/* ===========================================================================

     CONTRACTORSCLASSES.COM (PLURAL) — THE LOOK OF THE SITE

     ⭐ CHANGED 8/13/2026 PER STEVE: THE COLOURS NOW MATCH contractorclasses.com
        EXACTLY. The two sites share a brand and a customer, and this one used
        to be a blue site that looked like a stranger to people who already knew
        us. These are the singular site's own tokens, copied value for value:

            --cc-brown  #844104     --cc-blue   #2498e3
            --cc-dark   #2c2c2c     --cc-blue-d #188dd9
            --cc-text   #444        white page background, Arial body

        ⚠️ IF THE OTHER SITE'S COLOURS EVER CHANGE, CHANGE THEM HERE TOO.
           The whole point is that a returning visitor recognises us.

     WHAT STILL MAKES THIS SITE ITS OWN
     ----------------------------------
     Not the paint — the content. Complete packages only, its own navigation,
     its own words, and pages the other site does not have (the state book list
     and the comparison). Same shopfront, different shop.

     ⚠️ THE TYPE IS LARGE ON PURPOSE. Our students are contractors, mostly in
        their 50s, 60s and 70s, reading on a phone on a job site. Buttons are
        sized for a thumb in a work glove. Do not shrink any of it to "look
        neater" -- readability IS the design.

=========================================================================== */

:root {
  /* ---- MATCHED TO contractorclasses.com ---- */
  --cc-brown:   #844104;
  --cc-brown-d: #5E2E02;
  --cc-blue:    #2498e3;
  --cc-blue-d:  #188dd9;
  --cc-dark:    #2c2c2c;
  --cc-text:    #444444;

  /* ---- SUPPORTING NEUTRALS ---- */
  --paper:      #FFFFFF;
  --card:       #FFFFFF;
  --card-2:     #F6F6F6;
  --ink:        #2c2c2c;
  --ink-2:      #444444;
  --ink-3:      #777777;
  --rule:       #DDDDDD;
  --rule-soft:  #EEEEEE;
  --blue-soft:  #E7F3FB;
  --brown-soft: #F5EBE1;
  --red:        #A4231D;
  --red-soft:   #F8E7E6;
  --shadow:     0 1px 3px rgba(0,0,0,.06);

  /* ---- OLD NAMES, KEPT ON PURPOSE ----
     The pages were written against the first (blue) skin and refer to --blue
     in inline styles. Dropping the name would leave those blocks with NO
     background colour -- white text on white. These point at the new palette
     so the old references keep working. ⚠️ Do not delete them without first
     grepping the pages for "var(--blue".                                    */
  --blue:       #2498e3;
  --blue-d:     #188dd9;
  --brown:      #844104;

  --serif: Georgia, "Times New Roman", serif;
  --sans:  Arial, Helvetica, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--cc-text);
  font-family: var(--sans);
  font-size: 19px;            /* ⚠️ LARGE ON PURPOSE — see note above */
  line-height: 1.62;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   PAGE WIDTH — AND THE FULL-WIDTH BANDS

   ⭐ WIDENED 8/13/2026. Steve looked at a competitor's site on a desktop
      monitor and asked why theirs runs the full width of the screen and ours
      did not. Fair question. The answer was that the old 920px cap was being
      applied to EVERYTHING -- including the coloured call-to-action boxes --
      so the whole page sat in a narrow column with white space either side.

   HOW IT WORKS NOW -- AND WHY IT IS TWO DIFFERENT NUMBERS
   ------------------------------------------------------
     .cc-wrap   1180px   the layout: cards, tables, headings, bands
     p          42rem    the TEXT ITSELF stays in a readable column

   ⚠️ DO NOT DELETE THE 42rem CAP ON PARAGRAPHS to make text "fill the page".
      A line of text that runs the whole width of a 27-inch monitor is
      genuinely hard to read -- the eye loses its place coming back to the
      start of the next line. Every competitor that looks full width is doing
      exactly this too: wide layout, narrow text. Wide bands, readable column.

   .cc-band = a section that breaks OUT of the wrapper and runs edge to edge.
      Put one anywhere inside .cc-wrap and it will go full width on its own.
      It uses negative margins rather than 100vw on purpose: 100vw includes
      the scrollbar and causes a sideways scroll on Windows.
--------------------------------------------------------------------------- */
.cc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
p { max-width: 42rem; }

.cc-band {
  margin-left: calc(50% - 50vw + 10px);
  margin-right: calc(50% - 50vw + 10px);
  padding: 46px 20px;
}
.cc-band > .cc-inner { max-width: 1180px; margin: 0 auto; }
.cc-band.cc-band-blue  { background: var(--cc-blue);  color: #fff; }
.cc-band.cc-band-brown { background: var(--cc-brown); color: #fff; }
.cc-band.cc-band-soft  { background: var(--card-2); }
.cc-band-blue h2, .cc-band-brown h2 { color: #fff; }
.cc-band-blue p,  .cc-band-brown p  { color: #fff; opacity: .93; }

/* Cards side by side once there is room for them. This is what actually USES
   the extra width -- widening the page without this just stretches nothing. */
.cc-cards { display: grid; gap: 16px; }
@media (min-width: 880px) { .cc-cards { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------------
   MASTHEAD

   ⭐ THE STICKY PHONE BAR WAS REMOVED 8/13/2026 at Steve's request. The number
      now sits in the top right of the masthead, exactly as it does on the other
      site. It is still on every page and still tap-to-call -- it just does not
      follow the reader down the screen.
--------------------------------------------------------------------------- */
.cc-top { background: #fff; border-bottom: 1px solid var(--rule-soft); }
.cc-top .cc-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
.cc-logo { text-decoration: none; display: inline-block; line-height: 1.05; }
.cc-wordmark {
  display: block; font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  color: var(--cc-brown); letter-spacing: -.01em;
}
.cc-wordmark .cc-tld { color: var(--cc-blue); }
.cc-tagline {
  display: block; font-style: italic; font-size: .78rem;
  color: var(--ink-3); margin-top: 1px;
}
.cc-top-right { display: flex; align-items: center; gap: 1.25rem; }
.cc-phone {
  color: var(--cc-dark); text-decoration: none; white-space: nowrap;
  font-weight: bold; font-size: 1.05rem;
}
.cc-phone:hover, .cc-phone:focus-visible { color: var(--cc-blue); }

/* ---------------------------------------------------------------------------
   THE MENU
--------------------------------------------------------------------------- */
.cc-nav { background: var(--cc-brown); }
.cc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.cc-nav a {
  display: block; color: #fff; text-decoration: none;
  font-size: .97rem; font-weight: 600;
  padding: 13px 17px;                    /* big tap targets */
  border-bottom: 4px solid transparent;
}
.cc-nav a:hover, .cc-nav a:focus-visible { background: var(--cc-brown-d); }
.cc-nav a.active { border-bottom-color: var(--cc-blue); background: var(--cc-brown-d); }

/* ---------------------------------------------------------------------------
   HEADINGS AND TEXT
--------------------------------------------------------------------------- */
h1 {
  font-family: var(--serif); font-weight: 700; color: var(--cc-dark);
  font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1.14;
  margin: 0 0 18px; text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 700; color: var(--cc-brown);
  font-size: clamp(1.45rem, 4.4vw, 1.9rem); line-height: 1.2;
  margin: 0 0 10px; text-wrap: balance;
}
h3 { font-size: 1.12rem; font-weight: 700; color: var(--cc-dark); margin: 24px 0 6px; }
.cc-lede { color: var(--ink-2); font-size: 1.06rem; margin: 0 0 24px; }
.cc-kicker {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cc-blue); font-weight: 700; margin: 0 0 12px;
}

/* ---------------------------------------------------------------------------
   BUTTONS — sized for a thumb in a work glove
--------------------------------------------------------------------------- */
.cc-btn {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 1.08rem; line-height: 1.25;
  padding: 18px 22px; border-radius: 4px;
  border: 2px solid var(--cc-blue); background: var(--cc-blue); color: #fff;
}
.cc-btn:hover, .cc-btn:focus-visible { background: var(--cc-blue-d); border-color: var(--cc-blue-d); }
.cc-btn-alt { background: transparent; color: var(--cc-blue); }
.cc-btn-alt:hover, .cc-btn-alt:focus-visible { background: var(--blue-soft); }
.cc-btn small { display: block; font-weight: 400; font-size: .82rem; opacity: .9; margin-top: 4px; }
.cc-btn-row { display: grid; gap: 12px; }
@media (min-width: 620px) { .cc-btn-row { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------------
   PANELS, TABLES, FOOTER
--------------------------------------------------------------------------- */
.cc-panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 22px 24px; box-shadow: var(--shadow);
}
.cc-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
thead th {
  font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--card-2); border-bottom: 2px solid var(--rule);
}
tbody tr:last-child td { border-bottom: 0; }

main { padding: 34px 0 56px; }
.cc-foot { background: var(--cc-dark); color: #ddd; padding: 32px 0; margin-top: 40px; font-size: .94rem; }
.cc-foot a { color: #fff; }
.cc-foot .cc-wrap > * { max-width: none; }
.cc-foot .small { font-size: .78rem; color: #999; margin-top: 16px; }

/* ---- STAFF SHORTCUT IN THE FOOTER -----------------------------------------
   The copyright line links to the store admin login. It must look IDENTICAL
   to the plain text around it -- a visible link there would just confuse
   customers. Same colour, no underline, no hover change. Copied from the
   singular site so the two behave the same way.                            */
footer.cc-foot .cc-admin-link,
footer.cc-foot .cc-admin-link:link,
footer.cc-foot .cc-admin-link:visited,
footer.cc-foot .cc-admin-link:hover {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;   /* hand on hover, so staff can tell it is there */
}

details { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 10px; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

a { color: var(--cc-blue); }
a:focus-visible, .cc-btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cc-brown); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 640px) { body { font-size: 18px; } .cc-top .cc-wrap { justify-content: center; text-align: center; } }