/*
Theme Name: CEA Compliance
Theme URI: https://colonyenterpriseauthority.org/
Author: Colony Enterprise Authority Compliance Department
Description: Custom theme for the CEA Compliance Department site — Civic Seal design system, built to replace the Bluehost Website Builder theme and its recurring CSS conflicts with the department's own plugins.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cea-theme
*/

:root{
  --paper:#E9E7D9;
  --paper-raised:#F4F2E7;
  --ink:#211E16;
  --ink-soft:#57543F;
  --green-900:#24402F;
  --green-700:#3C6349;
  --green-050:#DDE6DC;
  --ochre:#A9772A;
  --ochre-text:#7A5419;
  --ochre-soft:#EFE1C4;
  --rust:#9C3B2A;
  --rust-soft:#F3DCD4;
  --line:#C7C0A7;
  --line-strong:#A79F84;
  --shadow-rgb:33,30,22;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181B15;
    --paper-raised:#20241C;
    --ink:#ECE7D6;
    --ink-soft:#AFA98F;
    --green-900:#8FBB9E;
    --green-700:#6FA383;
    --green-050:#26332A;
    --ochre:#D9AC5C;
    --ochre-text:#D9AC5C;
    --ochre-soft:#3A311E;
    --rust:#E08066;
    --rust-soft:#3A2420;
    --line:#3A3E30;
    --line-strong:#4C5140;
    --shadow-rgb:0,0,0;
  }
}
:root[data-theme="dark"]{
  --paper:#181B15;
  --paper-raised:#20241C;
  --ink:#ECE7D6;
  --ink-soft:#AFA98F;
  --green-900:#8FBB9E;
  --green-700:#6FA383;
  --green-050:#26332A;
  --ochre:#D9AC5C;
  --ochre-text:#D9AC5C;
  --ochre-soft:#3A311E;
  --rust:#E08066;
  --rust-soft:#3A2420;
  --line:#3A3E30;
  --line-strong:#4C5140;
  --shadow-rgb:0,0,0;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  text-wrap:balance;
  margin:0;
}
a{ color:inherit; }
img{ max-width:100%; }
main{ display:block; }

.seal{
  display:block; flex-shrink:0; border-radius:50%;
  background-image:url('assets/images/cea-seal.png'); background-size:cover; background-position:center;
}

/* Header / nav */
.b-header{
  background:var(--paper-raised); border-bottom:1px solid var(--line);
  padding:0 40px;
  position:sticky; top:0; z-index:100;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.b-header.scrolled{
  box-shadow:0 6px 18px -8px rgba(var(--shadow-rgb),.28);
  border-bottom-color:var(--line-strong);
}
.b-header-inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.b-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.b-brand .seal{ width:44px; height:44px; }
.b-brand .name{ font-family:'Fraunces',serif; font-size:16.5px; font-weight:500; line-height:1.3; }
.b-brand .dept{ font-size:12px; color:var(--ink-soft); }
.b-nav{ display:flex; align-items:center; gap:18px; font-size:14.5px; flex-wrap:wrap; }
.b-nav-item{ position:relative; }
/* Bridges the visual gap between the trigger and its dropdown (the
   dropdown's margin-top) so moving the mouse straight down doesn't pass
   over empty space and drop :hover before ever reaching the menu. */
.b-nav-item::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:max(280px, 100%); height:12px;
}
.b-nav-sep{ color:var(--line-strong); font-size:13px; user-select:none; }
.b-nav > a, .b-nav-trigger{
  display:inline-flex; align-items:center; gap:5px;
  text-decoration:none; color:inherit; padding:8px 2px; border-bottom:2px solid transparent;
  font:inherit; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer;
}
.b-nav > a.on, .b-nav-item.on .b-nav-trigger{ border-bottom-color:var(--green-700); font-weight:600; }
.b-nav-trigger .chev{ font-size:9px; margin-top:1px; opacity:.7; transition:transform .15s ease; }
.b-nav-item:hover .b-nav-trigger .chev, .b-nav-item:focus-within .b-nav-trigger .chev{ transform:rotate(180deg); }
.b-nav-dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:10px; min-width:280px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 14px 32px -12px rgba(var(--shadow-rgb),.28);
  padding:8px; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:120;
}
.b-nav-item:hover .b-nav-dropdown,
.b-nav-item:focus-within .b-nav-dropdown,
.b-nav-item.open .b-nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.b-nav-dropdown a{
  display:block; text-decoration:none; color:var(--ink);
  padding:10px 12px; border-radius:4px; font-size:14px;
}
.b-nav-dropdown a:hover, .b-nav-dropdown a:focus-visible{ background:var(--green-050); }
.b-nav-dropdown a .sub{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:400; }
.b-nav-dropdown a strong{ font-weight:600; }
.b-nav-dropdown-divider{ height:1px; background:var(--line); margin:6px 4px; }
.b-nav-dropdown a.b-nav-dropdown-all{ font-size:12.5px; color:var(--green-700); font-weight:600; }

.b-nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:40px; height:40px; border:1px solid var(--line-strong); border-radius:4px;
  background:none; cursor:pointer; padding:0; flex-shrink:0;
}
.b-nav-toggle span{ display:block; width:18px; height:2px; background:currentColor; }

@media (max-width:760px){
  .b-nav-toggle{ display:flex; }
  .b-nav{
    display:none; width:100%; flex-direction:column; align-items:stretch; gap:0;
    margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  }
  .b-header.nav-open .b-nav{ display:flex; }
  .b-nav > a, .b-nav-trigger{ width:100%; justify-content:space-between; padding:12px 4px; }
  .b-nav-sep{ display:none; }
  .b-nav-item{ width:100%; }
  .b-nav-item::after{ display:none; }
  .b-nav-dropdown{
    position:static; transform:none; margin:0 0 4px; min-width:0; width:100%;
    box-shadow:none; border:none; padding:0 0 0 14px; opacity:1; visibility:visible; pointer-events:auto;
    display:none;
  }
  .b-nav-item.open .b-nav-dropdown{ display:block; }
}

/* Hero */
.b-hero{
  background:linear-gradient(180deg, var(--green-050), var(--paper) 70%);
  padding:76px 40px 40px; text-align:center;
}
.b-hero h1{ font-size:40px; font-weight:500; max-width:780px; margin:0 auto; line-height:1.25; }
.b-hero .b-kicker{ font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); font-weight:600; margin-top:14px; font-family:'IBM Plex Mono',monospace; }
.b-hero p{ font-size:17px; color:var(--ink-soft); max-width:560px; margin:20px auto 0; line-height:1.6; }
.b-hero .b-hero-lead{ font-size:20px; font-weight:500; color:var(--ink); max-width:805px; margin:22px auto 0; line-height:1.4; }
.b-hero-ctas{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.b-btn{ font-size:15px; text-decoration:none; padding:13px 26px; border-radius:3px; font-weight:600; }
.b-btn.primary{ background:var(--green-700); color:var(--paper-raised); }
.b-btn.secondary{ border:1px solid var(--line-strong); color:var(--ink); }

/* A horizontal carousel, not a fixed grid, on purpose — three show at a
   time so each image reads clearly, and a 5th or 6th application later
   is just another slide, not a column-width recalculation. */
.b-cards-wrap{ position:relative; max-width:1180px; margin:0 auto; padding:32px 40px 64px; }
.b-cards{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.b-cards::-webkit-scrollbar{ display:none; }
.b-card{
  display:block; flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start;
  text-decoration:none; color:inherit;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; transition:box-shadow .15s ease, border-color .15s ease;
}
.b-card:hover{ box-shadow:0 14px 28px -14px rgba(var(--shadow-rgb),.35); border-color:var(--line-strong); }
.b-card-img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-bottom:1px solid var(--line); }
.b-card-body{ padding:18px 20px 22px; }
.b-card h3{ font-size:16px; font-weight:600; margin-bottom:8px; }
.b-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 14px; }
.b-card-link{ font-size:13px; font-weight:600; color:var(--green-700); }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--paper-raised); border:1px solid var(--line-strong);
  color:var(--ink); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(var(--shadow-rgb),.3);
  z-index:10;
}
.carousel-arrow:hover{ background:var(--green-700); color:var(--paper-raised); border-color:var(--green-700); }
.carousel-arrow.left{ left:6px; }
.carousel-arrow.right{ right:6px; }

@media (max-width:640px){
  .b-cards-wrap{ padding:24px 20px 48px; }
  .b-card{ flex:0 0 100%; }
}

/* Generic inner-page layout (Forms, Regulations, Contact, fallback page.php) */
.b-page-hero{
  background:linear-gradient(180deg, var(--green-050), var(--paper) 70%);
  padding:56px 40px 40px; text-align:center;
}
.b-page-hero h1{ font-size:32px; font-weight:500; }
.b-page-hero p{ font-size:16px; color:var(--ink-soft); max-width:620px; margin:14px auto 0; line-height:1.6; }
.b-page-body{ max-width:900px; margin:0 auto; padding:40px 40px 72px; }
/* When a page's own content (e.g. the supplier application form) already
   renders its own title/subtitle, the generic .b-page-hero above is
   skipped — drop this padding-top too so its content doesn't start with
   an extra blank gap on top of the form's own top padding. */
.no-hero .b-page-body{ padding-top:0; }
.b-page-body h2{ font-size:22px; font-weight:500; margin:36px 0 14px; }
.b-page-body h2:first-child{ margin-top:0; }
.b-page-body p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.b-page-note{
  background:var(--ochre-soft); border:1px solid var(--line); border-radius:6px;
  padding:16px 20px; font-size:14.5px; color:var(--ink); line-height:1.6; margin:0 0 32px;
}
.b-page-note a{ color:var(--ochre-text); font-weight:600; }

.b-resource-list{ display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; }
.b-resource{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:6px;
  padding:18px 22px;
}
.b-resource-title{ font-size:15.5px; font-weight:600; margin-bottom:4px; }
.b-resource-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; max-width:560px; }
.b-resource-action{
  flex-shrink:0; font-size:13.5px; font-weight:600; color:var(--green-700);
  text-decoration:none; border:1px solid var(--line-strong); border-radius:3px; padding:9px 18px;
}
.b-resource-action:hover{ background:var(--green-700); color:var(--paper-raised); border-color:var(--green-700); }

.b-contact-form{ display:flex; flex-direction:column; gap:14px; max-width:640px; margin:0 auto; }
.b-contact-form label{ font-size:13px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
.b-contact-form input, .b-contact-form textarea{
  width:100%; font:inherit; font-size:14.5px; padding:11px 12px; border-radius:4px;
  border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink);
}
.b-contact-form input:focus, .b-contact-form textarea:focus{ outline:2px solid var(--green-700); outline-offset:1px; }
.b-contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .b-contact-row{ grid-template-columns:1fr; } }
.b-contact-submit{
  align-self:flex-start; font-size:15px; font-weight:600; cursor:pointer;
  background:var(--green-700); color:var(--paper-raised); border:none; border-radius:3px; padding:13px 28px;
}
.b-contact-submit[aria-disabled="true"]{ opacity:.6; cursor:default; }
.b-contact-status{ font-size:14px; margin-top:4px; }
.b-contact-status.ok{ color:var(--green-700); }
.b-contact-status.err{ color:var(--rust); }

/* Footer */
.b-footer{ background:var(--ink); color:var(--paper-raised); padding:40px 40px 0; }
.b-footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13.5px; padding-bottom:32px; }
.b-footer-inner .col div{ opacity:.75; margin-top:6px; }
.b-footer-inner .col strong{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:15px; margin-bottom:4px; }
.footer-legal-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; opacity:.85; }
.footer-legal-link:hover{ opacity:1; }
.b-footer-bottom{
  max-width:1180px; margin:0 auto; border-top:1px solid rgba(244,242,231,.15);
  padding:18px 0; font-size:12px; opacity:.6;
}