/* ============================================================================
   CONTRACTOR CLASSES — shared /site brand CSS (matches the old contractorsclasses look)
   Blue accents (#2498e3), dark nav, Arial. Loaded by /site/header.php.
   ============================================================================ */
:root{ --cc-blue:#2498e3; --cc-blue-d:#188dd9; --cc-brown:#844104; --cc-dark:#2c2c2c; --cc-text:#444; }

body{ font-family:Arial,Helvetica,sans-serif; color:var(--cc-text); display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1 0 auto; }

/* top bar: logo + phone + cart */
.cc-top{ background:#fff; border-bottom:1px solid #eee; }
.cc-logo{ 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:#777; text-align:center; margin-top:-2px; }
.cc-top-right{ display:flex; align-items:center; gap:1.25rem; }
.cc-phone, .cc-cart{ color:var(--cc-dark); text-decoration:none; white-space:nowrap; }
.cc-phone{ font-weight:bold; }
.cc-phone:hover, .cc-cart:hover{ color:var(--cc-blue); }

/* nav bar */
.cc-nav{ background:var(--cc-brown); padding:0; }
.cc-nav .nav-link{ color:#fff; font-weight:bold; padding:.7rem 1rem; }
.cc-nav .nav-link:hover, .cc-nav .nav-link.active{ background:var(--cc-blue); color:#fff; }
.cc-nav .navbar-toggler{ border-color:rgba(255,255,255,.5); }
.cc-nav .navbar-toggler-icon{ filter:invert(1); }

/* hero carousel + captions */
.cc-hero img{ width:100%; height:auto; object-fit:cover; }
.cc-hero .cc-cap{ position:absolute; top:0; right:0; max-width:46%; padding:2rem 2.5rem; color:#fff; text-align:right; }
.cc-hero .cc-cap h2{ font-weight:400; text-shadow:1px 1px 4px rgba(0,0,0,.7); }
.cc-hero .cc-cap p{ text-shadow:1px 1px 4px rgba(0,0,0,.7); }
.cc-btn{ display:inline-block; background:var(--cc-blue); color:#fff; padding:.5rem 1.4rem; border-radius:4px; text-decoration:none; font-weight:bold; }
.cc-btn:hover{ background:var(--cc-blue-d); color:#fff; }
@media(max-width:768px){
  .cc-hero .cc-cap{ position:static; max-width:100%; text-align:center; background:var(--cc-brown); padding:1.25rem; }
}

/* content pages */
.cc-content{ max-width:920px; }
.cc-content p{ line-height:1.7; }
.cc-page-title{ color:var(--cc-dark); font-weight:700; border-bottom:3px solid var(--cc-blue); padding-bottom:.35rem; margin-bottom:1.1rem; }
.cc-step{ margin-bottom:1.25rem; }
.cc-step-num{ font-weight:700; color:var(--cc-dark); }
.cc-step-act{ font-weight:700; color:var(--cc-blue-d); }

/* footer */
footer.cc-foot{ background:var(--cc-brown); color:#e8ddd2; padding:1.5rem 0; text-align:center; }
footer.cc-foot a{ color:#fff; text-decoration:none; }
footer.cc-foot a:hover{ color:var(--cc-blue); }

/* ============================================================================
   FLORIDA EXAM-PREP LICENSE-TYPE PAGES  (/florida-contractor-exam/*)
   ----------------------------------------------------------------------------
   REWRITTEN 8/10/2026 TO MATCH THE LEGACY SOURCE PAGE EXACTLY, PER STEVE:
   contractorsclasses.com/florida-contractor-exam.php/FL-residential-contractor-license-exam-info

   EVERY VALUE BELOW WAS READ OFF THE LIVE SOURCE PAGE WITH A HEADLESS BROWSER
   (COMPUTED STYLES), NOT EYEBALLED:
     BODY TEXT ............ Open Sans 13px / 20.8px, BLACK
     PAGE TITLE ........... Arial 28.6px BOLD, BROWN #844104
     "Exam Information:" .. Open Sans 18px WEIGHT 900, BLACK
     EXAM SUB-HEADS ....... Open Sans 14px BOLD, BROWN #844104, UNDERLINED
     "Computer Based .." ... Open Sans 16px BOLD, BLACK
     SECTION TITLE ........ Open Sans 20px/32px BOLD, RED #ff0000, CENTERED,
                            1px #9a9a9a RULES ABOVE + BELOW, 10px PADDING
     BUY ROWS ............. Course_Material.png (181x31) + BROWN 14px BOLD LABEL
     HIGHLIGHT ............ YELLOW #ffff00 ON BLACK (<mark>)
   ============================================================================ */

/* THE SOURCE USES A SELF-HOSTED "SC Open Sans"; GOOGLE'S OPEN SANS IS THE SAME
   TYPEFACE. TAHOMA/GENEVA REMAIN THE FALLBACKS, EXACTLY AS THE SOURCE HAS THEM. */
.cc-exam{
  font-family:'Open Sans', Tahoma, Geneva, sans-serif;
  font-size:13px;
  line-height:20.8px;
  color:#000;
  max-width:900px;
}
.cc-exam p{ font-size:13px; line-height:20.8px; margin:0 0 13px; }

/* ---- PAGE TITLE (ARIAL, BROWN -- MATCHES SOURCE) ---- */
.cc-exam-title{
  font-family:Arial, Helvetica, sans-serif;
  font-size:28.6px; font-weight:700; color:#844104;
  margin:0 0 18px; line-height:1.25;
}

/* ---- "Exam Information:" / "Exam Preparation Course Material:" ---- */
.cc-exam h3.cc-blk{
  font-size:18px; font-weight:900; color:#000;
  line-height:28.8px; margin:0 0 6px;
}

/* ---- "(1) Business & Finance Exam" ---- */
.cc-exam h4.cc-sub{
  font-size:14px; font-weight:700; color:#844104;
  line-height:22.4px; margin:14px 0 2px; text-decoration:underline;
}

/* ---- "Computer Based Testing" ---- */
.cc-exam h3.cc-cbt{
  font-size:16px; font-weight:700; color:#000;
  line-height:25.6px; margin:18px 0 4px;
}

/* ---- RED CENTERED SECTION RULE ---- */
.cc-exam h2.section-title{
  font-size:20px; line-height:32px; font-weight:700; color:#ff0000;
  text-align:center; margin:26px 0 18px; padding:10px 0;
  border-top:1px solid #9a9a9a; border-bottom:1px solid #9a9a9a;
}

/* ---- YELLOW HIGHLIGHT ---- */
.cc-exam mark{ background:#ffff00; color:#000; font-size:16px; font-weight:700; padding:0; }
.cc-exam mark + a{ color:#844104; font-weight:700; font-size:16px; text-decoration:none; }
.cc-exam mark + a:hover{ text-decoration:underline; }

/* ---- COURSE MATERIAL BUY ROWS ---- */
.cc-buy{ margin:0 0 14px; }
.cc-buy-row{ display:flex; align-items:center; gap:18px; margin:0 0 14px; flex-wrap:wrap; }
.cc-buy-row img{ width:181px; height:31px; flex:0 0 auto; }
.cc-buy-row a{ text-decoration:none; }
.cc-buy-lbl{ color:#844104; font-size:14px; font-weight:700; line-height:22.4px; }
.cc-buy-row a:hover .cc-buy-lbl{ text-decoration:underline; }

/* ---- SELECT LICENSE TYPE DROPDOWN (REPLACES THE OLD LEFT SIDEBAR) ----
   KEPT DELIBERATELY PLAIN SO IT SITS INSIDE THE LEGACY LOOK RATHER THAN
   COMPETING WITH IT. BROWN + ARIAL, SAME FAMILY AS THE PAGE TITLE.        */
.cc-picker{ margin:0 0 20px; padding:10px 0; border-top:1px solid #9a9a9a;
            border-bottom:1px solid #9a9a9a; }
.cc-picker-label{ display:block; font-family:Arial,Helvetica,sans-serif; font-weight:700;
                  font-size:16px; color:#844104; margin:0 0 6px; }
.cc-picker-select{ font-family:'Open Sans',Tahoma,Geneva,sans-serif; font-size:14px;
                   padding:6px 8px; border:1px solid #9a9a9a; background:#fff; color:#000;
                   min-width:280px; max-width:100%; cursor:pointer; }
.cc-picker-select:focus{ outline:2px solid #844104; }
.cc-picker-select option:disabled{ color:#999; }
.cc-picker-nojs{ margin:8px 0 0; padding-left:18px; font-size:13px; }
.cc-picker-help{ margin:6px 0 0; font-size:12px; color:#555; }
.cc-picker-help a{ color:#844104; font-weight:700; }

/* ---- PHONE: KEEP THE LEGACY LOOK, JUST STOP ANYTHING OVERFLOWING ---- */
@media(max-width:600px){
  .cc-exam-title{ font-size:24px; }
  .cc-buy-row{ gap:10px; }
  .cc-picker-select{ min-width:0; width:100%; }
}

/* ============================================================================
   TRY FREE DEMO PAGE  (/florida-contractor-exam/try-contractor-exam-demo.php)
   ----------------------------------------------------------------------------
   ADDED 8/10/2026. VALUES MEASURED OFF THE LEGACY SOURCE PAGE:
   contractorsclasses.com/florida-contractor-exam.php/try-FL-contractor-exam-demo

     HEADINGS ......... Open Sans 15.21px BOLD BLACK ("Sample the Difference")
     SUB-HEADING ...... Open Sans 13px BOLD BLACK ("Register for the demo")
     LIST ............. 13px, GREEN CHECKMARK IMAGE AS THE BULLET
     BUTTON ........... linear-gradient #47a1ef -> #073763, WHITE 15px BOLD,
                        5px/30px PADDING, 6px RADIUS, 1px #057fd0 BORDER
     TWO-COLUMN ....... 69% TEXT / 30% IMAGE, STACKS UNDER 850px
   ============================================================================ */

/* ---- THIN GRADIENT RULE UNDER THE PAGE TITLE ---- */
.cc-demo-rule{
  height:6px; width:60%; max-width:520px; margin:-6px 0 18px;
  background:linear-gradient(to right, #844104 0%, #d9c3a8 60%, #ffffff 100%);
}

/* ---- HEADINGS ---- */
.cc-demo .cc-demo-h{ font-size:15.21px; font-weight:700; color:#000; margin:0 0 10px; }
.cc-demo .cc-demo-h-gap{ margin-top:26px; }
.cc-demo .cc-demo-h4{ font-size:13px; font-weight:700; color:#000; margin:0 0 8px; }

/* ---- "FREE DEMO" / "DEMO" EMPHASIS, BROWN LIKE THE SOURCE ---- */
.cc-demo .cc-demo-em{ color:#844104; }
.cc-demo .cc-demo-link{ color:#844104; font-weight:700; text-decoration:none; }
.cc-demo .cc-demo-link:hover{ text-decoration:underline; }

/* ---- GREEN CHECKMARK LIST ---- */
.cc-demo .cc-checks{ list-style:none; margin:14px 0 0; padding:0; }
.cc-demo .cc-checks li{
  font-size:13px; line-height:20.8px; margin:0 0 14px; padding-left:52px;
  min-height:38px; display:flex; align-items:center;
  background:url("/florida-contractor-exam/images/green-checkmark-sm.png") no-repeat left center;
  background-size:38px 38px;
}

/* ---- THE BLUE "TRY DEMO >>" BUTTON ---- */
.cc-demo .cc-demo-btn{
  display:inline-block;
  background:linear-gradient(rgb(71,161,239) 5%, rgb(7,55,99) 100%);
  color:#fff; font-size:15px; font-weight:700; line-height:normal;
  padding:5px 30px; border:1px solid #057fd0; border-radius:6px;
  text-decoration:none; text-align:center;
}
.cc-demo .cc-demo-btn:hover{
  background:linear-gradient(rgb(7,55,99) 5%, rgb(71,161,239) 100%);
  color:#fff;
}

/* ---- SMALL PRINT UNDER THE BUTTON ---- */
.cc-demo .cc-demo-note{ font-size:13px; margin-top:18px; }

/* ---- TWO-COLUMN SPLIT: TEXT LEFT, PICTURE RIGHT ---- */
.cc-split{ display:flex; align-items:flex-start; gap:2%; margin:0 0 8px; }
.cc-split-text{ flex:0 1 69%; min-width:0; }
.cc-split-img{ flex:0 0 30%; }
.cc-split-img img{ width:100%; height:auto; }
.cc-split-img-sm{ flex:0 0 20%; text-align:center; }

/* ---- PHONES AND SMALL TABLETS: STACK, TEXT FIRST ---- */
@media(max-width:850px){
  .cc-split{ display:block; }
  .cc-split-text, .cc-split-img{ width:100%; }
  .cc-split-img{ margin:16px 0 24px; text-align:center; }
  .cc-split-img img{ max-width:420px; }
  .cc-split-img-sm img{ max-width:200px; }
  .cc-demo-rule{ width:100%; }
}
@media(max-width:686px){
  .cc-demo .cc-demo-btn{ display:block; width:100%; }
}

/* ============================================================================
   STUDY MATERIAL / PRODUCT CATALOG PAGES
   (/florida-contractor-exam/<type>-contractor-<exam>-exam-study-material.php)
   ----------------------------------------------------------------------------
   ADDED 8/10/2026. MIRRORS THE LEGACY PAGE:
   contractorsclasses.com/florida-contractor-exam.php/residential-contractor-business-exam-study-material

   THE PRODUCT BLOCKS ARE TEXT-THEN-PICTURE-AND-BUTTON. ON A PHONE THE PICTURE
   AND BUTTON STACK UNDER THE TEXT, PICTURE FIRST, SO THE BUY BUTTON IS ALWAYS
   THE LAST THING A THUMB REACHES.
   ============================================================================ */

/* ---- PRODUCT BLOCK ---- */
.cc-prod .cc-mod{ margin:0 0 26px; }
.cc-prod .cc-mod-head{ font-size:15.21px; font-weight:700; color:#000; margin:22px 0 10px; }

.cc-prod .cc-mod-buy{
  display:flex; align-items:flex-start; gap:22px;
  background:#f7f5f2; border:1px solid #e4ddd3; border-radius:4px;
  padding:14px 16px; margin:14px 0 0;
}
.cc-prod .cc-mod-img{ position:relative; flex:0 0 200px; }
.cc-prod .cc-mod-img img{ width:100%; height:auto; display:block; }
.cc-prod .cc-mod-badge{ position:absolute; top:-8px; left:-8px; width:42px !important; height:42px; }
.cc-prod .cc-mod-act{ flex:1 1 auto; min-width:0; }

.cc-prod .cc-mod-video{ font-size:12px; margin:0 0 10px; }
.cc-prod .cc-mod-video a{ color:#057fd0; }

.cc-prod .cc-mod-lead{ margin:0 0 6px; font-size:13px; }
.cc-prod .cc-mod-list{ margin:0 0 12px; padding-left:18px; font-size:13px; }
.cc-prod .cc-mod-list li{ margin-bottom:3px; }
.cc-prod .cc-mod-after{ font-size:13px; margin-top:10px; }

/* ---- THE PURCHASE BUTTON + ITS PRICE LINE ---- */
.cc-prod .cc-buyline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.cc-prod .cc-buyline-price{ color:#844104; font-size:14px; font-weight:700; }
.cc-prod .cc-btn-call{ background:linear-gradient(#8a8a8a 5%, #4a4a4a 100%); border-color:#6f6f6f; }

/* ---- PULL QUOTE ---- */
.cc-prod .cc-quote{ display:block; text-align:center; color:#844104; font-weight:700; margin:6px 0; }

/* ---- SKIP-DOWN LINK ---- */
.cc-prod .cc-skiplink{ color:#057fd0; font-weight:700; font-size:13px; }

/* ---- COLOR-CODED TAB WORDS ---- */
.cc-prod .cc-tab-blue{ color:#0b57d0; }
.cc-prod .cc-tab-black{ color:#000; }
.cc-prod .cc-tab-red{ color:#c00; }

/* ---- CLASSROOM CARD ---- */
.cc-prod .cc-class-card{ font-size:13px; line-height:20.8px; margin-bottom:10px; }
.cc-prod .cc-class-title{ font-weight:700; color:#844104; font-size:14px; }
.cc-prod .cc-class-price{ color:#c00; }
.cc-prod .cc-class-when{ font-style:italic; color:#666; margin-bottom:6px; }

/* ---- PACKAGE DISCOUNT BANNER + SAVINGS TABLE ---- */
.cc-prod .cc-pk-banner{
  background:#f3e6d4; border-top:1px solid #d8c3a3; border-bottom:1px solid #d8c3a3;
  color:#a03c00; font-weight:700; font-size:15px; text-align:center;
  padding:8px 10px; margin:24px 0 0; letter-spacing:.02em;
}
.cc-prod .cc-pk-save{ color:#c00; font-weight:700; font-size:15px; margin-bottom:8px; }
.cc-prod .cc-pk-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:12px; }
.cc-prod .cc-pk-table td{ padding:3px 0; border-bottom:1px solid #e8e2d9; }
.cc-prod .cc-pk-amt{ text-align:right; white-space:nowrap; padding-left:14px; }
.cc-prod .cc-pk-sub{ color:#666; }
.cc-prod .cc-pk-total td{ border-top:2px solid #c9bda9; border-bottom:none;
                          font-weight:700; color:#844104; font-size:14px; padding-top:6px; }

/* ---- THE THREE LINKS UNDER THE TOP BULLETS ---- */
.cc-prod .cc-topbtns{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 18px; }

/* ---- SMALL PRINT ---- */
.cc-prod .cc-ship-head{ margin-top:30px; }
.cc-prod .cc-ship{ font-size:12px; padding-left:18px; margin-bottom:14px; }
.cc-prod .cc-ship li{ margin-bottom:7px; line-height:1.6; }
.cc-prod .cc-ship-logos img{ height:28px; width:auto; margin-right:14px; vertical-align:middle; }
.cc-prod .cc-ship-logos img:first-child{ height:34px; }

/* ---- PHONES: STACK, PICTURE THEN BUTTON, UNDER THE TEXT ---- */
@media(max-width:700px){
  .cc-prod .cc-mod-buy{ display:block; }
  .cc-prod .cc-mod-img{ width:100%; max-width:260px; margin:0 auto 14px; }
  .cc-prod .cc-mod-badge{ left:0; }
  .cc-prod .cc-buyline{ flex-direction:column; align-items:stretch; gap:8px; }
  .cc-prod .cc-buyline .cc-demo-btn{ width:100%; }
  .cc-prod .cc-buyline-price{ text-align:center; }
  .cc-prod .cc-topbtns .cc-demo-btn{ width:100%; }
}

/* ---- THE PER-TRADE DESCRIPTION UNDER THE TITLE ----------------------------
   THE ONLY BLOCK OF TEXT THAT DIFFERS BETWEEN THE SEVEN TRADE PAGES SHARING
   ONE BODY OF CONTENT. STYLED TO READ AS AN INTRO, NOT AS BODY COPY.        */
.cc-prod .cc-trade-desc{
  font-size:14px; line-height:22px; color:#3a3a3a;
  background:#f7f4f0; border-left:4px solid #844104; border-radius:0 4px 4px 0;
  padding:11px 15px; margin:0 0 18px;
}

/* ============================================================================
   STUDY-MATERIAL PAGES — ALTERNATING GREY / WHITE PRODUCT BANDS
   ----------------------------------------------------------------------------
   REPLACES THE EARLIER WARM-BEIGE BOX AROUND THE IMAGE + BUTTON. THE LEGACY
   SITE SHADES THE **WHOLE** PRODUCT BLOCK -- HEADING, TEXT, PICTURE AND BUTTON
   -- AND ALTERNATES IT DOWN THE PAGE:

       odd blocks  = #eeeeee   (measured off the source page, article.odd)
       even blocks = #ffffff   (article.even)

   NO BORDER, NO ROUNDED CORNERS, NO GAP BETWEEN BLOCKS, SO THE STRIPES RUN
   CONTINUOUSLY THE WAY THEY DO ON THE OLD SITE.
   ============================================================================ */

/* THE BAND ITSELF — FULL WIDTH OF THE CONTENT COLUMN */
.cc-prod .cc-mod{
  margin:0;
  padding:2px 16px 16px;
  border:0;
  border-radius:0;
}
.cc-prod .cc-mod-odd{  background:#eeeeee; }
.cc-prod .cc-mod-even{ background:#ffffff; }

/* THE INNER IMAGE + BUTTON AREA IS NOW PLAIN — THE BAND CARRIES THE SHADING */
.cc-prod .cc-mod-buy{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:12px 0 0;
}

/* THE CLASSROOM BLOCK USES THE SAME BANDING AS EVERY OTHER PRODUCT */
.cc-prod .cc-mod-classroom{ padding-top:12px; }

/* PACKAGE BANNERS SIT FLUSH AGAINST THE BANDS ABOVE AND BELOW */
.cc-prod .cc-pk-banner{ margin:0 0 0; }

/* SECTION HEADINGS KEEP A LITTLE AIR AROUND THEM BETWEEN BANDS */
.cc-prod h2.section-title{ margin:22px 0 14px; }

@media(max-width:700px){
  .cc-prod .cc-mod{ padding:2px 12px 14px; }
}
@media(max-width:700px){
  .cc-prod .cc-mod{ padding:2px 12px 14px; }
}

/* ---- PACKAGE BANNERS: NO SHADED STRIP, JUST BOLD + YELLOW HIGHLIGHT --------
   CHANGED 8/10/2026 PER STEVE. WAS A FULL-WIDTH BEIGE BAND; NOW IT IS PLAIN
   TEXT ON THE PAGE BACKGROUND WITH A <mark> HIGHLIGHT, MATCHING THE YELLOW
   HIGHLIGHT ALREADY USED ON THE LICENSE-TYPE PAGES.                        */
.cc-prod .cc-pk-banner{
  background:none;
  border:0;
  text-align:center;
  margin:22px 0 10px;
  padding:0;
}
.cc-prod .cc-pk-banner mark{
  background:#ffff00;
  color:#000;
  font-size:15px;
  letter-spacing:.02em;
  padding:2px 8px;
}

/* ---- SAVINGS-TABLE DISCOUNT ROW: RED AND BOLD -----------------------------
   ADDED 8/10/2026 PER STEVE. A ROW IN A PACKAGE SAVINGS TABLE MARKED WITH
   'discount' (see the $packages lists in the _body_*.php files) IS SHOWN RED
   AND BOLD, SO THE MONEY COMING OFF THE PRICE IS THE THING THE EYE LANDS ON. */
.cc-prod .cc-pk-discount td{
  color:#c00;
  font-weight:700;
}

/* ============================================================================
   INDIVIDUAL EXAM BOOKS PAGE  (/florida-contractor-exam/individual-exam-books.php)
   ----------------------------------------------------------------------------
   FIVE DROP-DOWNS, ONE PER EXAM. BUILT ON THE BROWSER'S OWN <details> ELEMENT,
   SO THERE IS NO JAVASCRIPT TO BREAK AND IT WORKS ON EVERY PHONE.
   HEADINGS ARE BIG TAP TARGETS -- OUR STUDENTS ARE OLDER AND ON PHONES.
   ============================================================================ */

.cc-books .cc-bk{ border:1px solid #d8cfc2; border-radius:4px; margin:0 0 10px; background:#fff; }
.cc-books .cc-bk[open]{ border-color:#844104; }

/* THE CLICKABLE HEADING */
.cc-books .cc-bk-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; list-style:none;
  background:#f3ede5; padding:13px 16px;
  font-size:15px; font-weight:700; color:#844104;
}
.cc-books .cc-bk-head::-webkit-details-marker{ display:none; }
.cc-books .cc-bk[open] .cc-bk-head{ background:#844104; color:#fff; }
.cc-books .cc-bk-head:hover{ background:#e8dfd2; }
.cc-books .cc-bk[open] .cc-bk-head:hover{ background:#6d3503; }

/* THE LITTLE +/- INDICATOR */
.cc-books .cc-bk-title::before{ content:"+ "; font-weight:700; }
.cc-books .cc-bk[open] .cc-bk-title::before{ content:"\2013 "; }

.cc-books .cc-bk-count{ font-size:12px; font-weight:400; opacity:.75; white-space:nowrap; }

/* WHAT IS INSIDE ONE DROP-DOWN */
.cc-books .cc-bk-body{ padding:6px 16px 14px; }
.cc-books .cc-bk-note{ font-size:12px; color:#666; margin:8px 0 10px; font-style:italic; }

.cc-books .cc-bk-row{
  display:flex; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid #eee;
}
.cc-books .cc-bk-row:last-child{ border-bottom:0; }
.cc-books .cc-bk-name{ flex:1 1 auto; font-size:13px; color:#000; min-width:0; }
.cc-books .cc-bk-price{ font-size:15px; font-weight:700; color:#844104; white-space:nowrap; }
.cc-books .cc-bk-btn{ flex:0 0 auto; font-size:13px; padding:5px 18px; }

.cc-books .cc-bk-dbpr, .cc-books .cc-bk-back{ font-size:13px; margin-top:16px; }
.cc-books .cc-bk-dbpr a, .cc-books .cc-bk-back a{ color:#057fd0; font-weight:700; }

/* PHONES: STACK EACH BOOK ROW, FULL-WIDTH BUTTON */
@media(max-width:640px){
  .cc-books .cc-bk-row{ display:block; }
  .cc-books .cc-bk-name{ display:block; margin-bottom:4px; }
  .cc-books .cc-bk-price{ display:block; margin-bottom:8px; }
  .cc-books .cc-bk-btn{ display:block; width:100%; text-align:center; }
}

/* TIGHTEN THE +/- INDICATOR SPACING ON THE BOOK DROP-DOWNS */
.cc-books .cc-bk-title::before{ display:inline-block; width:1em; }

/* ============================================================================
   COURSE CATALOG PAGE  (/florida-contractor-exam/course-catalog.php)
   ----------------------------------------------------------------------------
   THE STORE FRONT DOOR. TWO COLUMNS OF CLASSIFICATION BUTTONS ON A COMPUTER,
   ONE COLUMN ON A PHONE. BUTTON ARTWORK IS THE ORIGINAL 333x80 PNGs FROM THE
   OLD SITE, WITH THE CLASSIFICATION NAME BAKED INTO THE PICTURE.
   ============================================================================ */

.cc-catalog .cc-cat-intro{ font-size:14px; margin:0 0 18px; }

.cc-cat-grid{
  display:grid; grid-template-columns:1fr; gap:14px 34px;
  margin:0 0 18px; max-width:760px;
}
@media(min-width:760px){ .cc-cat-grid{ grid-template-columns:1fr 1fr; } }

.cc-cat-btn{
  display:block; position:relative; line-height:0;
  border-radius:6px; overflow:hidden; text-decoration:none;
  transition:transform .08s ease, box-shadow .12s ease;
}
.cc-cat-btn img{ width:100%; height:auto; display:block; }

/* HOVER LIFT — MAKES IT OBVIOUS THESE ARE BUTTONS */
a.cc-cat-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(132,65,4,.32); }
a.cc-cat-btn:focus{ outline:3px solid #057fd0; outline-offset:2px; }

/* NOT-BUILT-YET BUTTONS — DIMMED, NOT CLICKABLE, WITH A "CALL US" TAG */
.cc-cat-btn-off{ cursor:default; }
.cc-cat-btn-off img{ filter:grayscale(85%); opacity:.45; }
.cc-cat-soon{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:3px;
  line-height:normal;
}

.cc-catalog .cc-cat-callnote{ font-size:13px; color:#555; margin:0 0 8px; }
.cc-catalog .cc-cat-callnote a{ color:#844104; font-weight:700; }

/* THE THREE EXTRA LINKS UNDERNEATH */
.cc-cat-extras{ display:grid; grid-template-columns:1fr; gap:10px; max-width:760px; }
@media(min-width:760px){ .cc-cat-extras{ grid-template-columns:1fr 1fr 1fr; } }

.cc-cat-extra{
  display:block; text-decoration:none;
  background:#f3ede5; border:1px solid #ddd2c2; border-left:4px solid #844104;
  border-radius:4px; padding:12px 14px;
}
.cc-cat-extra:hover{ background:#e9dfd0; }
.cc-cat-extra-label{ display:block; font-size:14px; font-weight:700; color:#844104; margin-bottom:3px; }
.cc-cat-extra-note{ display:block; font-size:12px; color:#5c5c5c; line-height:1.5; }

/* ============================================================================
   EXAM PREP HOME  (/site/florida-contractor-exam.php)
   ----------------------------------------------------------------------------
   REBUILT 8/10/2026: SMALL BANNER PICTURE AT THE TOP, SELLING COPY DIRECTLY
   BELOW IT. THE OLD FULL-WIDTH ROTATING SLIDESHOW PUSHED THE COPY OFF THE
   BOTTOM OF A PHONE SCREEN, WHICH IS WHERE MOST OF OUR STUDENTS ARE.
   ============================================================================ */

.cc-fce-hero{ max-width:760px; margin:0 0 20px; }
.cc-fce-hero img{
  width:100%; height:auto; display:block;
  border-radius:5px; border:1px solid #d8cfc2;
}

.cc-fce .cc-fce-head{
  font-family:Arial, Helvetica, sans-serif;
  font-size:17px; font-weight:700; color:#000;
  margin:0 0 12px; line-height:1.35;
}

/* THE FOUR BULLETS */
.cc-fce-bullets{ margin:0 0 4px; padding-left:22px; }
.cc-fce-bullets li{ font-size:14px; line-height:26px; color:#000; }
.cc-fce-bullets a{ color:#057fd0; text-decoration:none; }
.cc-fce-bullets a:hover{ text-decoration:underline; }
.cc-fce-bullets a strong{ color:#057fd0; }

/* THE "WHY CHOOSE US" VIDEO BUTTON */
.cc-fce-why{ flex:0 0 130px; text-align:center; }
.cc-fce-why img{ max-width:110px; height:auto; }

/* THE FOUR SELLING SECTIONS */
.cc-fce .cc-fce-sec{
  font-size:15.21px; font-weight:700; color:#000;
  margin:20px 0 6px; border:0; padding:0;
}
.cc-fce p{ font-size:13px; line-height:20.8px; margin:0 0 12px; }
.cc-fce p a{ color:#057fd0; font-weight:700; }

/* THE THREE BUTTONS SIT DIRECTLY UNDER THE BULLETS */
.cc-fce .cc-topbtns{ margin:6px 0 20px; padding-bottom:16px; border-bottom:1px solid #cfcfcf; }

@media(max-width:850px){
  .cc-fce-why{ margin:4px 0 12px; }
  .cc-fce-why img{ max-width:88px; }
}
@media(max-width:700px){
  .cc-fce .cc-topbtns .cc-demo-btn{ width:100%; }
}

/* ---- TRADE KNOWLEDGE: THE "YOU ALSO NEED THE B&F BOOKS" NOTE --------------
   IMPORTANT AND EASY TO MISS, SO IT GETS ITS OWN BOX RATHER THAN SITTING IN
   THE RUN OF TEXT. STUDENTS WHO MISS IT BUY THE WRONG THING AND THEN PHONE. */
.cc-prod .cc-tk-note{
  display:block;
  background:#fffbe6; border:1px solid #f0e2a8; border-left:4px solid #d9b400;
  border-radius:4px; padding:11px 14px; margin:0 0 12px;
  font-size:13px; line-height:20.8px;
}
.cc-prod .cc-tk-note a{ color:#844104; font-weight:700; }

/* ---- THE VIDEO LINK: BLUE PLAY ICON + TEXT --------------------------------
   ICON AND WORDS ARE ONE LINK, SO EITHER CAN BE TAPPED. THE ICON IS DRAWN IN
   CODE (see cc_video_icon() in _catalog_page.php), NOT A PICTURE FILE.      */
.cc-prod .cc-mod-video a{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none;
}
.cc-prod .cc-mod-video a span{ text-decoration:underline; }
.cc-prod .cc-mod-video a:hover span{ color:#035a94; }
.cc-prod .cc-vid-ico{ flex:0 0 auto; }
.cc-prod .cc-mod-video a:hover .cc-vid-ico circle{ fill:#035a94; }

/* ---- FOOTNOTE UNDER A PACKAGE (e.g. rental book availability) ------------- */
.cc-prod .cc-pk-after{
  font-size:12px; line-height:1.6; color:#6b4a1f;
  background:#fffbe6; border-left:3px solid #d9b400;
  padding:8px 11px; margin:10px 0 0; border-radius:3px;
}
.cc-prod .cc-pk-after a{ color:#844104; font-weight:700; }

/* ---- TOP MENU "RESOURCES" DROP-DOWN ---------------------------------------
   ADDED 8/10/2026. KEEPS THE BAR TO SIX ITEMS. THE MENU IS BROWN LIKE THE BAR
   IT DROPS FROM, WITH GENEROUS ROW HEIGHT -- OUR STUDENTS ARE OLDER AND MOSTLY
   ON PHONES, SO THESE NEED TO BE EASY TO HIT.                               */
.cc-nav .dropdown-toggle::after{ margin-left:.4em; vertical-align:.15em; }

.cc-nav .cc-dropdown{
  background:#6d3503; border:0; border-radius:0 0 4px 4px; padding:.25rem 0;
  margin-top:0; box-shadow:0 6px 16px rgba(0,0,0,.28); min-width:230px;
}
.cc-nav .cc-dropdown .dropdown-item{
  color:#fff; font-weight:bold; font-size:15px; padding:.6rem 1.15rem;
}
.cc-nav .cc-dropdown .dropdown-item:hover,
.cc-nav .cc-dropdown .dropdown-item:focus,
.cc-nav .cc-dropdown .dropdown-item.active{ background:#2498e3; color:#fff; }

/* ON A PHONE THE MENU IS ALREADY INSIDE THE OPEN HAMBURGER PANEL, SO INDENT
   THE CHILDREN INSTEAD OF FLOATING THEM OVER THE PAGE. */
@media(max-width:991px){
  .cc-nav .cc-dropdown{
    background:transparent; box-shadow:none; padding:0 0 .25rem 0; margin:0;
    border-left:3px solid #2498e3; border-radius:0;
  }
  .cc-nav .cc-dropdown .dropdown-item{ padding-left:1.6rem; font-size:14px; }
}

/* ============================================================================
   ⭐ ONE PAGE WIDTH FOR THE WHOLE SITE
   ----------------------------------------------------------------------------
   ADDED 8/10/2026. Pages had drifted to three different widths:
       920px  the older /site pages (references, compare, faq, videos, etc.)
       900px  every page built in the new /florida-contractor-exam section
      1320px  the outer container on the older pages, so their tables and
              images could sprawl much wider than their own text

   Everything now uses ONE width, set in a single place below. The header bar,
   the brown menu bar, the page content and the footer all line up on the same
   left and right edges.

   TO CHANGE THE SITE WIDTH: change the one number on the next line.
   ============================================================================ */

:root{ --cc-page-width: 920px; }

.cc-top > .container,
.cc-nav > .container,
main > .container,
main > div.container,
footer.cc-foot > .container{
  max-width: var(--cc-page-width);
}

/* The older /site pages capped their TEXT at 920px with .cc-content while the
   box around it ran to 1320px. Now that the box itself is 920px, that inner
   cap just duplicates it -- let it fill the column instead. */
main > .container.cc-content{ max-width: var(--cc-page-width); }

/* The new pages were 900px. Bring them to the same number. */
main > .container.cc-exam{ max-width: var(--cc-page-width); }

/* The coloured bars still run the full width of the screen -- it is only the
   content inside them that lines up with the page. */

/* ---- SITE NAME: ALL ONE COLOUR --------------------------------------------
   CHANGED 8/10/2026 PER STEVE. The ".com" used to be blue while the rest of
   the wordmark was brown. It is now all brand brown, one solid colour.
   TO RECOLOUR THE WHOLE WORDMARK: change --cc-brown at the top of this file. */
.cc-wordmark .cc-tld{ color:var(--cc-brown); }

/* ---- EXAM-PREP HOME: TOP PICTURE NOW SPANS THE FULL PAGE WIDTH ------------
   CHANGED 8/10/2026 PER STEVE. It was capped at 760px inside a 920px column,
   which left it looking inset. It now fills the column, matching the width of
   everything below it. The source image is 900px wide, so at this size it
   renders essentially at its native resolution -- no upscaling blur.        */
.cc-fce-hero{ max-width:none; }