/* ============================================================ */
/* 2026.css - Site-wide styles                                  */
/* Dinkytown.net / KJE Computer Solutions, Inc.                 */
/* ============================================================ */


/* -- 1. CSS CUSTOM PROPERTIES -------------------------------- */
:root {
  --dk-green-dark:        #1b5e3b;
  --dk-green-deeper:      #14472c;
  --dk-green-mid:         #237a4d;
  --dk-green-light:       #2d8f5a;
  --dk-lime:              #bdd631;
  --dk-lime-soft:         rgba(189,214,49,0.15);
  --dk-gold:              #f0b429;
  --dk-gold-hover:        #f5c443;
  --dk-gold-glow:         rgba(240,180,41,0.15);
  --dk-gold-deep:         #d9a01e;
  --dk-blue:              #2e86c1;
  --dk-blue-light:        #5dade2;
  --dk-blue-glow:         rgba(46,134,193,0.12);
  --dk-cream:             #f9f6ee;
  --dk-cream-transparent: rgba(249,246,238,0.70);
  --dk-white:             #ffffff;
  --dk-gray-100:          #edeae2;
  --dk-gray-200:          #d5d0c5;
  --dk-gray-400:          #8a8477;
  --dk-gray-600:          #5a5548;
  --dk-font-dark:         #1a2e1f;
  --font-display:         'Fraunces', Georgia, serif;
  --font-body:            'DM Sans', system-ui, sans-serif;
  --shadow-sm:            0 1px 3px rgba(27,94,59,0.08);
  --shadow-md:            0 4px 20px rgba(27,94,59,0.12);
  --shadow-lg:            0 12px 48px rgba(27,94,59,0.18);
  --radius:               10px;
  --radius-sm:            6px;
}


/* -- 2. RESET & BASE ----------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--font-body);
  background:  var(--dk-cream);
  color:       var(--dk-font-dark);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

*:focus-visible { outline:2px solid var(--dk-lime); outline-offset:2px; }

.container {
  max-width: 1200px;
  margin:    0 auto;
 /* padding:   0 24px; */  padding:   0 ; 
  width:     100%;
}


/* -- 3. SUB BAR ---------------------------------------------- */
.sub-bar {
  background:    #3a8945;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding:       10px 0;
}
.sub-bar__inner {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             16px;
}


/* -- 4. SEARCH FORM ------------------------------------------ */
.search-form { flex:1; max-width:520px; }
.search-form__label { display:none; }

.search-form__wrap {
  display:       flex;
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  border:        1.5px solid var(--dk-gold);
  transition:    border-color .2s, box-shadow .2s;
}
.search-form__wrap:focus-within {
  border-color: var(--dk-gray-200);
  box-shadow:   0 0 0 2px #3a8945, 0 0 0 4px var(--dk-lime);
}

.search-form__inner {
  position:    relative;
  flex:        1;
  display:     flex;
  align-items: center;
}

.search-form__icon {
  position:       absolute;
  left:           14px;
  color:          var(--dk-gray-400);
  pointer-events: none;
  z-index:        1;
  flex-shrink:    0;
}

.search-form__input {
  width:       100%;
  padding:     9px 36px 9px 42px;
  border:      none;
  font-family: var(--font-body);
  font-size:   0.88rem;
  color:       var(--dk-font-dark);
  background:  var(--dk-white);
  outline:     none;
}
.search-form__input::placeholder { color:var(--dk-gray-400); }
.search-form__input:focus-visible { outline:none; }

.search-form__clear {
  position:        absolute;
  right:           10px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--dk-gray-200);
  border:          none;
  cursor:          pointer;
  display:         none;
  align-items:     center;
  justify-content: center;
  color:           var(--dk-gray-600);
  transition:      background .15s, color .15s;
  flex-shrink:     0;
  padding:         0;
}
.search-form__clear:hover { background:var(--dk-gray-400); color:#fff; }
.search-form__clear.visible { display:flex; }

.search-form__btn {
  padding:     0 20px;
  background:  linear-gradient(135deg, var(--dk-gold), var(--dk-gold-deep));
  color:       var(--dk-green-dark);
  font-family: var(--font-body);
  font-size:   0.85rem;
  font-weight: 700;
  border:      none;
  cursor:      pointer;
  transition:  background .2s;
  white-space: nowrap;
}
.search-form__btn:hover { background:linear-gradient(135deg, var(--dk-gold-hover), var(--dk-gold)); }
.search-form__btn:focus-visible { outline:2px solid var(--dk-lime); outline-offset:-2px; }


/* -- 5. MAIN NAV --------------------------------------------- */
.main-nav {
  background:    var(--dk-green-dark);
  position:      sticky;
  top:           0;
  z-index:       100;
  box-shadow:    0 1px 8px rgba(20,71,44,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.main-nav .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          55px;
}

.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo__img { height:55px; width:auto; display:block; }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         2px;
  list-style:  none;
  height:      100%;
  flex-wrap:   nowrap;
}
.nav-links > li { height:100%; display:flex; align-items:center; }
.nav-links > li > a {
  display:         flex;
  align-items:     center;
  white-space:     nowrap;
  gap:             5px;
  padding:         8px 14px;
  font-size:       0.9rem;
  font-weight:     500;
  color:           rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius:   var(--radius-sm);
  transition:      all 0.2s;
}
.nav-links > li > a:hover,
.nav-links > li.open > a,
.nav-links > li:focus-within > a { color:#fff; background:rgba(255,255,255,0.1); }
.nav-links > li > a .caret { transition:transform 0.25s; }
.nav-links > li.open > a .caret,
.nav-links > li:focus-within > a .caret { transform:rotate(180deg); }

.nav-links > li.nav-split-popular,
.nav-links > li.nav-split-recent { display:none; }
.nav-links > li.nav-combined { display:flex; }

.nav-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         9px 20px;
  background:      var(--dk-gold);
  color:           var(--dk-green-dark);
  font-size:       0.85rem;
  font-weight:     600;
  border-radius:   100px;
  text-decoration: none;
  transition:      all 0.2s;
  white-space:     nowrap;
  box-shadow:      0 2px 8px rgba(240,180,41,0.3);
}
.nav-cta:hover {
  background:  var(--dk-gold-hover);
  box-shadow:  0 4px 16px rgba(240,180,41,0.4);
  transform:   translateY(-1px);
}


/* -- 6. MEGA MENU -------------------------------------------- */
.has-mega     { position:static !important; }
.has-dropdown { position:relative; }

.mega-menu {
  position:   absolute; top:100%; left:0; right:0;
  background: var(--dk-white);
  border-top: 3px solid var(--dk-lime);
  box-shadow: var(--shadow-lg);
  opacity:    0; visibility:hidden; transform:translateY(-6px);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index:    99;
}
.has-mega.open .mega-menu { opacity:1; visibility:visible; transform:translateY(0); }

.mega-menu__inner { max-width:1200px; margin:0 auto; padding:20px 24px 24px; }
.mega-menu__grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }

.mega-menu__item {
  display:       flex; align-items:flex-start; gap:10px; padding:9px 12px;
  border-radius: var(--radius); text-decoration:none; transition:all 0.2s;
}
.mega-menu__item:hover { background:var(--dk-cream); transform:translateX(2px); }
.mega-menu__item:hover .mega-icon { color:white; box-shadow:0 2px 10px rgba(27,94,59,0.25); }

.mega-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--dk-gold-glow); color:var(--dk-gold);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all 0.25s;
}
.mega-icon--navy   { background:var(--dk-green-dark); color:white; }
.mega-icon--orange { background:var(--dk-gold-glow);  color:var(--dk-gold); }
.mega-icon--blue   { background:var(--dk-blue-glow);  color:var(--dk-blue); }
.mega-icon--teal   { background:rgba(35,122,77,0.12); color:var(--dk-green-mid); }
.mega-icon--coral  { background:var(--dk-lime-soft);  color:#7a9a1e; }
.mega-menu__item:hover .mega-icon--navy   { background:var(--dk-green-dark); }
.mega-menu__item:hover .mega-icon--orange { background:var(--dk-gold); }
.mega-menu__item:hover .mega-icon--blue   { background:var(--dk-blue); }
.mega-menu__item:hover .mega-icon--teal   { background:var(--dk-green-mid); }
.mega-menu__item:hover .mega-icon--coral  { background:var(--dk-lime); color:var(--dk-green-dark); }

.mega-menu__label { font-weight:600; font-size:0.88rem; color:var(--dk-font-dark); line-height:1.3; }
.mega-menu__desc  { font-size:0.76rem; color:var(--dk-gray-400); margin-top:2px; line-height:1.4; }


/* -- 7. QUICK DROPDOWN --------------------------------------- */
.quick-dropdown {
  position:absolute; top:100%; right:0; min-width:300px;
  background:var(--dk-white); border-top:3px solid var(--dk-lime);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-lg); padding:16px 8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1); z-index:99;
}
.has-dropdown.open .quick-dropdown { opacity:1; visibility:visible; transform:translateY(0); }

.quick-dropdown__featured {
  margin:0 8px 10px; padding:14px 16px;
  background:var(--dk-gold-glow); border:1px solid rgba(240,180,41,0.2);
  border-radius:var(--radius); display:flex; align-items:center; gap:12px;
  text-decoration:none; transition:all 0.2s;
}
.quick-dropdown__featured:hover { background:rgba(247,148,29,0.18); border-color:var(--dk-gold); }
.quick-dropdown__featured-icon {
  width:38px; height:38px; background:var(--dk-gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0;
}
.quick-dropdown__featured-text { font-size:0.85rem; font-weight:600; color:var(--dk-font-dark); line-height:1.3; }
.quick-dropdown__featured-sub  { font-weight:400; font-size:0.75rem; color:var(--dk-gray-400); }
.quick-dropdown__divider { height:1px; background:var(--dk-gray-100); margin:6px 8px; }
.quick-dropdown__section-title {
  padding:8px 16px 4px; font-size:0.68rem; font-weight:600;
  color:var(--dk-gray-400); text-transform:uppercase; letter-spacing:0.08em;
}
.quick-dropdown__link {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-radius:var(--radius-sm); text-decoration:none;
  font-size:0.88rem; font-weight:500; color:var(--dk-gray-600); transition:all 0.15s;
}
.quick-dropdown__link:hover { background:var(--dk-cream); color:var(--dk-font-dark); }
.quick-dropdown__link svg { color:var(--dk-gray-400); flex-shrink:0; }
.quick-dropdown__link:hover svg { color:var(--dk-gold); }


/* -- 8. MOBILE TOGGLE ---------------------------------------- */
.mobile-toggle {
  display:none; width:42px; height:42px;
  border:1px solid rgba(255,255,255,0.25); border-radius:var(--radius-sm);
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0;
}
.mobile-toggle span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:all 0.3s; }
.mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-toggle.active span:nth-child(2) { opacity:0; }
.mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }


/* -- 9. MOBILE DRAWER ---------------------------------------- */
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(20,71,44,0.6); z-index:199;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.mobile-overlay.open { opacity:1; pointer-events:auto; }

.mobile-drawer {
  display:none; position:fixed; top:0; right:0;
  width:340px; max-width:90vw; height:100vh;
  background:var(--dk-white); box-shadow:var(--shadow-lg);
  z-index:200; overflow-y:auto;
  transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.mobile-drawer.open { transform:translateX(0); }

.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:55px; border-bottom:3px solid var(--dk-lime);
}
.drawer-close {
  width:36px; height:36px; border:1px solid var(--dk-gray-200);
  background:var(--dk-white); border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--dk-gray-600); transition:all 0.2s;
}
.drawer-close:hover { background:var(--dk-cream); color:var(--dk-green-dark); }

.drawer-search {
  padding:12px 20px; border-bottom:1px solid var(--dk-gray-100);
  background:var(--dk-green-dark);
}
.drawer-search .search-form { max-width:none; }

.drawer-featured {
  display:flex; align-items:center; gap:12px; margin:4px 0; padding:10px 12px;
  background:var(--dk-gold-glow); border:1px solid rgba(240,180,41,0.2);
  border-radius:var(--radius); text-decoration:none; transition:all 0.2s;
}
.drawer-featured:hover { background:rgba(247,148,29,0.18); border-color:var(--dk-gold); }
.drawer-featured__icon {
  width:34px; height:34px; background:var(--dk-gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0;
}
.drawer-featured__text { font-size:0.85rem; font-weight:600; color:var(--dk-font-dark); line-height:1.3; }
.drawer-featured__sub  { font-weight:400; font-size:0.72rem; color:var(--dk-gray-400); }

.drawer-section { padding:12px 20px; }
.drawer-section__title {
  font-size:0.7rem; font-weight:600; color:var(--dk-gray-400);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;
  padding-left:10px; border-left:3px solid var(--dk-lime);
}
.drawer-link {
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  border-radius:var(--radius-sm); text-decoration:none;
  color:var(--dk-font-dark); font-size:0.88rem; font-weight:500; transition:all 0.15s;
}
.drawer-link:hover { background:var(--dk-cream); }
.drawer-link > svg { flex-shrink:0; color:var(--dk-gray-400); }
.drawer-link .mega-icon { width:32px; height:32px; }

.drawer-divider { height:3px; background:var(--dk-lime); margin:4px 20px; }

.drawer-cta {
  margin:16px 20px; display:block; text-align:center; padding:12px;
  background:var(--dk-gold); color:white; font-weight:600; font-size:0.88rem;
  border-radius:var(--radius); text-decoration:none; transition:background 0.2s;
}
.drawer-cta:hover { background:var(--dk-gold-hover); }


/* -- 10. PAGE HEADER ----------------------------------------- */
.page-header {
  background: var(--dk-cream);
  padding:    20px 0 20px;
  position:   relative;
  overflow:   visible;
}
.page-header .container { display:flex; align-items:center; gap:20px; position:relative; }

.page-header__back {
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.78rem; font-weight:500; color:var(--dk-gray-400);
  text-decoration:none; margin-bottom:6px; transition:color 0.2s;
}
.page-header__back:hover { color:var(--dk-green-mid); }

.page-header h1 {
  font-family:var(--font-display); font-size:1.85rem; font-weight:700;
  color:var(--dk-font-dark); line-height:1.15;
}
.page-header__sub { margin-top:10px; margin-bottom:10px; }*/

.page-header__icon {
  width:60px; height:60px; border-radius:var(--radius);
  background:var(--dk-lime); display:flex; align-items:center; justify-content:center;
  color:var(--dk-green-dark); flex-shrink:0;
}

.page-header__cta {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:110px; height:110px; flex-shrink:0;
  background:var(--dk-green-dark); border-radius:var(--radius);
  text-decoration:none; transition:all 0.2s; box-shadow:var(--shadow-sm);
}
.page-header__cta:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.page-header__cta-icon {
  width:44px; height:44px; background:var(--dk-lime); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--dk-green-dark); margin-bottom:6px;
}
.page-header__cta-txt { font-size:0.7rem; font-weight:600; color:white; text-align:center; line-height:1.3; }

.page-header__row  { display:flex; align-items:center; gap:20px; position:relative; flex-wrap:wrap; }
.page-header__img  { height:110px; width:auto; flex-shrink:0; }
.page-header__text { flex:1; min-width:200px; }


/* -- 11. VIEW MENU (category pages) -------------------------- */
.view-menu-wrap { position:relative; flex-shrink:0; width:100%; order:10; }

.view-menu-btn {
  display:flex; align-items:center; gap:10px; padding:10px 16px; width:100%;
  background:var(--dk-white); border:1px solid var(--dk-gray-200);
  border-radius:var(--radius); font-family:var(--font-body); font-size:0.84rem; font-weight:600;
  color:var(--dk-font-dark); cursor:pointer;
  transition:box-shadow .2s, border-color .2s;
  user-select:none; position:relative; overflow:hidden;
}
/* Animated lime underline on hover */
.view-menu-btn::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--dk-green-mid); transform:scaleX(0);
  transform-origin:left; transition:transform .25s;
}
.view-menu-btn:hover { border-color:var(--dk-green-mid); box-shadow:var(--shadow-md); }
.view-menu-btn:hover::after { transform:scaleX(1); }
.view-menu-btn.open  { border-color:var(--dk-green-mid); box-shadow:var(--shadow-md); }

/* Button inner layout: label + current selection side by side */
.vm-btn-content {
  display:flex; flex-direction:row; align-items:center;
  gap:10px; flex:1; min-width:0; text-align:left;
}
.vm-btn-title {
  display:flex; align-items:center; gap:6px;
  font-size:0.72rem; font-weight:600; color:var(--dk-gray-400);
  text-transform:uppercase; letter-spacing:0.08em;
  white-space:nowrap; flex-shrink:0; margin:0;
}
/* Current selection display inside the button */
.vm-btn-selection {
  display:flex; align-items:center; gap:8px;
  font-size:0.84rem; font-weight:600; color:var(--dk-font-dark);
  line-height:1.3; flex:1; min-width:0;
}
.vm-btn-selection .vm-sel-icon {
  width:24px; height:24px; border-radius:5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--dk-green-mid); background:var(--dk-lime-soft);
}
.vm-btn-desc {
  display:inline; font-size:0.72rem; font-weight:400;
  color:var(--dk-gray-400); margin-left:6px;
}
.vm-caret { color:var(--dk-gray-400); flex-shrink:0; transition:transform .25s; }
.view-menu-btn.open .vm-caret { transform:rotate(180deg); }

/* Dropdown panel */
.view-menu {
  position:absolute; top:calc(100% + 6px); left:0; right:0; min-width:100%;
  background:var(--dk-white); border:1.5px solid var(--dk-gray-200);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .2s cubic-bezier(.4,0,.2,1); z-index:150;
}
.view-menu.open { opacity:1; visibility:visible; transform:translateY(0); }
/* Suppress transitions during window resize */
.view-menu.resizing, .view-menu.resizing *,
.view-menu-btn.resizing, .view-menu-btn.resizing * { transition:none; }

/* Section headings and dividers inside the dropdown */
.vm-section-title {
  padding:8px 12px 4px; font-size:0.65rem; font-weight:700;
  color:var(--dk-gray-400); text-transform:uppercase; letter-spacing:0.12em;
}
.vm-divider { height:1px; background:var(--dk-gray-100); margin:4px 8px; }

/* Menu items */
.vm-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px; width:100%;
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  background:none; font-family:var(--font-body); font-size:0.84rem; font-weight:500;
  color:var(--dk-gray-600); text-align:left;
}
.vm-item:hover { background:var(--dk-cream); color:var(--dk-font-dark); }
.vm-item:hover .vm-item-icon { color:var(--dk-green-mid); }
.vm-item.active { background:var(--dk-lime-soft); color:var(--dk-green-dark); font-weight:600; }
.vm-item.active .vm-item-icon { color:var(--dk-green-mid); }
.vm-item.active .vm-check { display:flex; }

.vm-item-icon {
  width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--dk-gray-400);
  background:var(--dk-gray-100); transition:all .15s;
}
.vm-item.active .vm-item-icon { background:rgba(189,214,49,0.3); }
.vm-item-text { flex:1; }
.vm-item-desc { font-size:0.72rem; font-weight:400; color:var(--dk-gray-400); margin-top:1px; }
.vm-check { display:none; color:var(--dk-green-mid); flex-shrink:0; }


/* -- 12. PAGE CONTENT ---------------------------------------- */
.page-content { background:var(--dk-cream); padding:0 20px; }


/* -- 13. CALCULATOR LAYOUT ----------------------------------- */
.calc-wrap {
  display:grid; grid-template-columns:1fr 320px; gap:28px;
  max-width:1200px; margin:0 auto;
}
.calc-card { background:var(--dk-white); border-radius:var(--radius); }
.calc-card__head {
  padding:18px 28px; display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, var(--dk-green-dark), var(--dk-green-mid)); color:white;
}
.calc-card__head h2 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.calc-card__tag {
  background:var(--dk-lime); color:var(--dk-green-dark);
  font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:100px;
}
.calc-card__body { padding:0; }


/* -- 14. SIDEBAR --------------------------------------------- */
.sb {
  background:var(--dk-white); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px; margin-bottom:20px;
}
.sb__t {
  font-family:var(--font-display); font-size:0.95rem; font-weight:600;
  color:var(--dk-font-dark); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.sb__t svg { color:var(--dk-gold); }

.sb-cta {
  display:flex; align-items:center; gap:14px; padding:18px;
  background:linear-gradient(135deg, var(--dk-green-dark), var(--dk-green-mid));
  border-radius:var(--radius); text-decoration:none; transition:all 0.2s; box-shadow:var(--shadow-sm);
}
.sb-cta:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.sb-cta__ic {
  width:42px; height:42px; background:var(--dk-lime); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--dk-green-dark); flex-shrink:0;
}
.sb-cta__txt { font-size:0.86rem; font-weight:600; color:white; line-height:1.3; }
.sb-cta__sub { font-weight:400; color:rgba(255,255,255,0.6); font-size:0.76rem; }


/* -- 15. RELATED / RECENT LINKS (.rl) ------------------------ */
.rl {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:var(--radius-sm); text-decoration:none;
  font-size:0.84rem; font-weight:500; color:var(--dk-gray-600); transition:all 0.15s;
}
.rl:hover { background:var(--dk-cream); color:var(--dk-font-dark); }
.rl svg { color:var(--dk-gray-400); flex-shrink:0; }
.rl:hover svg { color:var(--dk-gold); }


/* -- 16. DEFINITIONS ACCORDION ------------------------------- */
.defs { margin-top:24px; }
.defs__toggle {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:16px 20px; cursor:pointer;
  background:var(--dk-white); border:1.5px solid var(--dk-gray-100);
  border-radius:var(--radius); font-family:var(--font-body); transition:all 0.2s;
}
.defs__toggle:hover { border-color:var(--dk-green-mid); }
.defs__toggle .defs__t { font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--dk-font-dark); }
.defs__chevron { color:var(--dk-gray-400); transition:transform 0.3s; flex-shrink:0; }
.defs__toggle.open .defs__chevron { transform:rotate(180deg); }
.defs__toggle.open { border-radius:var(--radius) var(--radius) 0 0; border-bottom-color:transparent; }
.defs__body {
  display:none; padding:20px;
  border:1.5px solid var(--dk-gray-100); border-top:none;
  border-radius:0 0 var(--radius) var(--radius); background:var(--dk-white);
}
.defs__body.open { display:block; }
.dg { display:grid; grid-template-columns:1fr; gap:14px; }
.di dt { font-weight:600; font-size:0.88rem; color:var(--dk-green-dark); margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.di dt::before { content:''; width:6px; height:6px; background:var(--dk-lime); border-radius:50%; flex-shrink:0; }
.di dd { font-size:0.84rem; color:var(--dk-gray-600); line-height:1.6; padding-left:12px; margin-bottom:8px; }


/* -- 17. CALCULATOR GRID (category pages) -------------------- */
/* Card fade-up animation — fires on page load and view switch  */
@keyframes newsCardFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.section-label {
  grid-column:1/-1; display:flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dk-green-dark); padding:0.5rem 0 0.25rem;
  border-bottom:2px solid var(--dk-lime); margin-top:0.75rem;
}
.section-label svg { color:var(--dk-green-mid); flex-shrink:0; }

.articles-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
}

.news-card {
  cursor:pointer; display:flex; text-decoration:none;
  background:var(--dk-white); padding:1rem 1.1rem; flex-direction:column;
  gap:0.5rem; border:1px solid var(--dk-gray-200);
  transition:box-shadow .2s, transform .2s;
  animation:newsCardFadeUp .5s ease both;
  position:relative; overflow:hidden; border-radius:var(--radius);
}
/* Stagger animation for first visible cards */
.news-card:nth-child(2) { animation-delay:.07s; }
.news-card:nth-child(3) { animation-delay:.14s; }
.news-card:nth-child(4) { animation-delay:.21s; }
.news-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--dk-green-mid); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.news-card:hover { box-shadow:0 8px 32px rgba(27,94,59,0.18); transform:translateY(-2px); border-color:var(--dk-green-mid); }
.news-card:hover::after { transform:scaleX(1); }
.news-card:hover .calc-icon { background:rgba(189,214,49,0.3); border-color:var(--dk-lime); }
.news-card:hover .card-title { color:var(--dk-green-mid); }

.card-header { display:flex; align-items:center; gap:0.7rem; }
.calc-icon {
  width:36px; height:36px; border-radius:8px;
  background:var(--dk-lime-soft); border:1.5px solid rgba(189,214,49,0.4);
  display:flex; align-items:center; justify-content:center;
  color:var(--dk-green-dark); flex-shrink:0; transition:background .2s, border-color .2s;
}
.year-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dk-green-dark); color:#fff; padding:5px;
  border-radius:4px; margin-left:auto; flex-shrink:0;
}
.card-title {
  font-family:var(--font-body); font-size:0.9rem; font-weight:700;
  line-height:1.25; color:var(--dk-font-dark); flex:1;
}
.card-summary { font-size:0.8rem; line-height:1.55; color:var(--dk-gray-600); flex:1; }


/* -- 18. PRESS / NEWS CARDS ---------------------------------- */
/* Used on both category pages (pub-logo-wrap, card-link)       */
/* and the press page (news.html). Base styles live here;       */
/* press-page overrides are in section 24.                      */
.pub-logo-wrap { height:36px; display:flex; align-items:center; }
.pub-logo-wrap img {
  max-height:36px; max-width:140px; object-fit:contain;
  filter:grayscale(1); opacity:0.6; transition:filter .2s, opacity .2s;
}
.news-card:hover .pub-logo-wrap img { filter:grayscale(0); opacity:1; }
.pub-logo-text { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--dk-gray-400); }

.card-link {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dk-green-mid); text-decoration:none; font-weight:500;
  margin-top:auto; transition:color 0.2s;
}
.card-link:hover { color:var(--dk-green-dark); text-decoration:underline; }
.card-link svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }


/* -- 19. HOME HERO ------------------------------------------- */
.demo-hero {
  padding:40px 24px;
  text-align:center;
  background:linear-gradient(180deg, var(--dk-white) 0%, var(--dk-cream) 100%);
}
.demo-hero h1 {
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  color:var(--dk-font-dark); margin-bottom:16px; line-height:1.15;
}
.demo-hero h1 span {
  background:linear-gradient(135deg, var(--dk-green-mid), var(--dk-lime));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.demo-hero p {
  font-size:1.12rem; color:var(--dk-gray-600);
  max-width:560px; margin:0 auto 28px; line-height:1.6;
}
.demo-hero__img { display:block; max-width:428px; width:90%; height:auto; margin:0 auto 12px; }
.demo-hero__popular {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px; margin-bottom:28px;
}
.demo-hero__popular-link {
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px;
  background:var(--dk-white); border:1px solid var(--dk-gray-200); border-radius:100px;
  font-size:0.84rem; font-weight:500; color:var(--dk-green-dark);
  text-decoration:none; transition:all 0.2s;
}
.demo-hero__popular-link svg { flex-shrink:0; color:var(--dk-green-mid); }
.demo-hero__popular-link:hover {
  background:var(--dk-gold-glow); border-color:var(--dk-gold);
  color:var(--dk-font-dark); box-shadow:var(--shadow-sm);
}
.demo-hero__popular-link:hover svg { color:var(--dk-gold); }
.demo-hero__stats { display:flex; justify-content:center; gap:40px; margin-top:36px; margin-bottom:30px; }
.demo-hero__stat { text-align:center; }
.demo-hero__stat-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--dk-gold); }
.demo-hero__stat-label { font-size:0.8rem; color:var(--dk-gray-400); margin-top:2px; }


/* -- 20. HOME QUICK LINKS ------------------------------------ */
.quick-links { padding:48px 24px 56px; background:var(--dk-white); }
.quick-links__header { text-align:center; margin-bottom:32px; }
.quick-links__title {
  font-family:var(--font-display); font-size:1.6rem; font-weight:700;
  color:var(--dk-font-dark); margin-bottom:8px;
}
.quick-links__subtitle { font-size:0.95rem; color:var(--dk-gray-400); }
.quick-links__grid {
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.quick-link {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:24px 16px; border-radius:var(--radius);
  background:var(--dk-cream); border:1px solid transparent;
  text-decoration:none; transition:all 0.25s; text-align:center;
}
.quick-link:hover { border-color:var(--dk-lime); background:var(--dk-white); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.quick-link__icon { width:128px; height:128px; display:flex; align-items:center; justify-content:center; transition:all 0.25s; }
.quick-link__icon img { width:100%; height:100%; object-fit:contain; }
.quick-link:hover .quick-link__icon { transform:scale(1.1); }
.quick-link__label { font-weight:600; font-size:0.85rem; color:var(--dk-font-dark); line-height:1.3; }
.quick-link__count { font-size:0.72rem; color:var(--dk-gray-400); margin-top:-4px; }
.quick-links__cta { text-align:center; margin-top:28px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.quick-links__cta a {
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px;
  background:var(--dk-cream); border:1px solid var(--dk-gray-200);
  color:var(--dk-gray-600); font-size:0.84rem; font-weight:500;
  border-radius:100px; text-decoration:none; transition:all 0.2s;
}
.quick-links__cta a:hover { background:var(--dk-white); border-color:var(--dk-lime); color:var(--dk-font-dark); box-shadow:var(--shadow-sm); }


/* -- 21. FOOTER ---------------------------------------------- */
.ft { background:var(--dk-green-deeper); color:rgba(255,255,255,0.6); padding:40px 0 28px; }
.ft-in { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:center; }
.ft-brand { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.ft-brand img { height:68px; width:auto; }
.ft-brand p { font-size:0.76rem; line-height:1.5; }
.ft-disclaimer {
  max-width:1200px; margin:20px auto 0; padding:16px 24px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.74rem; line-height:1.6; color:rgba(255,255,255,0.45); text-align:center;
}
.ft-bot {
  max-width:1200px; margin:24px auto 0; padding:16px 24px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:center; gap:16px;
  font-size:0.73rem; text-align:center; flex-wrap:wrap;
}


/* -- 22. KJE CALCULATOR OVERRIDES ---------------------------- */
#KJEDefinitions                  { background:var(--dk-cream); }
#KJEReport                       { background:var(--dk-cream); }
div.KJECalcTopReportIsFixed,
div.KJECalcTopReportIsScrolling  { background:var(--dk-cream-transparent); }
div.KJECalculatorTableReportView { background:transparent; }
div.KJECalculatorScreenSize      { background:var(--dk-cream); }


/* -- 23. RESPONSIVE BREAKPOINTS ------------------------------ */
@media (min-width:960px) {
  .nav-links > li.nav-split-popular,
  .nav-links > li.nav-split-recent { display:flex; }
  .nav-links > li.nav-combined { display:none; }

  .demo-hero {
    display:grid; grid-template-columns:1fr 1fr; gap:40px;
    text-align:center; align-items:start;
    padding:40px calc(max(24px,(100% - 1152px) / 2));
  }
  .demo-hero__left { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
  .demo-hero p { margin:0 0 28px; }
  .demo-hero__stats { justify-content:center; }
  .demo-hero__right { display:flex; align-items:flex-start; justify-content:center; }
  .demo-hero__img { margin:0; max-width:428px; }
}

@media (max-width:1200px) {
  .container { padding:0 20px; }
}

@media (max-width:960px) {
  .mega-menu__grid { grid-template-columns:repeat(3,1fr); }
  .calc-wrap { grid-template-columns:1fr; gap:0; }
  .container { padding:0 20px; }
}

@media (max-width:768px) {
  .nav-links > li > a { padding:8px 10px; font-size:0.84rem; }
  .mega-menu__grid { grid-template-columns:repeat(2,1fr); }
  .quick-links__grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:576px) {
  .nav-links { display:none !important; }
  .mobile-toggle { display:flex; }
  .mobile-drawer, .mobile-overlay { display:block; }
  .mobile-drawer { width:100vw; max-width:100vw; }
  .sub-bar { display:none; }
  .container { padding:0 5px; }
  .page-content { padding:0 5px; }
  .page-header { padding:20px 5px 10px; }
  .page-header h1 { font-size:1.4rem; }
  .page-header__icon { width:46px; height:46px; }
  .page-header__icon svg { width:22px; height:22px; }
  .page-header__cta { width:80px; height:80px; }
  .page-header__cta-icon { width:34px; height:34px; }
  .page-header__cta-icon svg { width:18px; height:18px; }
  .page-header__cta-txt { font-size:0.6rem; }
  .page-header__row { gap:10px; }
  .demo-hero { padding:24px 20px; }
  .demo-hero h1 { font-size:1.7rem; }
  .demo-hero__img { max-width:300px; }
  .demo-hero__stats { gap:20px; flex-wrap:wrap; }
  .demo-hero__stat-num { font-size:1.4rem; }
  .quick-links__grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .quick-link { padding:16px 12px; }
  .quick-link__icon { width:96px; height:96px; }
  .quick-link__label { font-size:0.8rem; }
}

@media (max-width:480px) {
  .vm-btn-desc { display:none; }
  .demo-hero__stats { flex-wrap:wrap; }
}


/* -- 24. PRESS / NEWS PAGE OVERRIDES ------------------------- */
/*                                                              */
/* Used ONLY on news.html (press coverage page).                */
/* Scoped under .press-section to avoid colliding with the      */
/* calculator category grid which shares base class names.      */
/*                                                              */
/* Elements affected:                                           */
/*   .page-header--press     - simple header, no flex/icon/cta */
/*                             h1 in Playfair Display           */
/*   .press-section .articles-grid - wider cards, more gap     */
/*   .press-section .news-card     - roomier padding/gap        */
/*   .press-section .year-badge    - text badge, not icon tile  */
/*   .press-section .card-title    - Playfair Display serif     */
/*   .press-section .card-summary  - slightly larger text       */
/* ------------------------------------------------------------- */

/* Press page header - simple, no flex row, Playfair h1 */
.page-header--press { padding:28px 24px 32px; }
.page-header--press .container { display:block; }
.page-header--press h1 {
  font-family: 'Playfair Display', serif;
  font-size:   1.85rem;
  font-weight: 700;
  color:       var(--dk-font-dark);
  line-height: 1.15;
}
.page-header--press .page-header__sub { max-width:680px; }

/* Press grid - wider min card width, more breathing room */
.press-section .articles-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap:       15px;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 0 4rem;
}

/* Press card - roomier padding, default cursor (cards are divs not anchors) */
.press-section .news-card {
  cursor:  default;
  padding: 2rem;
  gap:     1rem;
}
.press-section .news-card:hover {
  box-shadow: 0 8px 32px rgba(27,94,59,0.12);
}

/* Press year badge - text pill, left-aligned (not the icon tile used in calc grids) */
.press-section .year-badge {
  display:        inline-block;
  background:     var(--dk-green-dark);
  color:          white;
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        0.2em 0.6em;
  align-self:     flex-start;
  border-radius:  2px;
  margin-left:    0;
}

/* Press card title - editorial serif */
.press-section .card-title {
  font-family: 'Playfair Display', serif;
  font-size:   1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color:       var(--dk-font-dark);
}

/* Press card summary - slightly larger than compact calc grid variant */
.press-section .card-summary {
  font-size:   0.88rem;
  line-height: 1.6;
}

/* Press grid collapses to single column sooner than calc grid */
@media (max-width:576px) {
  .press-section .articles-grid { grid-template-columns:1fr; }
  .press-section .news-card { padding:1.25rem; }
}

/* -- 25. PAGE PROSE (informational/content pages) ------------ */
/*                                                              */
/* Used on non-calculator info pages: ADA compliance, FAQ,      */
/* support docs, update notes, V3 instructions, etc.           */
/* Replaces the old dinkytown.css inline-style patterns.        */
/*                                                              */
/* Structure:                                                   */
/*   <section class="page-prose">                              */
/*     <div class="container">                                  */
/*       content...                                             */
/*     </div>                                                   */
/*   </section>                                                 */
/* ------------------------------------------------------------ */

  .page-prose { 
  padding: 24px 0 32px; 
  background: var(--dk-white);
}

/* .page-prose .container intentionally has NO padding override.
   Horizontal alignment inherits from the base .container rule:
     >= 1200px : padding 0       (centered in 1200px max-width)
     <  1200px : padding 0 20px  (matches .page-header alignment)
   This keeps prose text left-aligned with the page-header title. */

/* Typography */
.page-prose p {
  margin-bottom: 1rem;
  line-height:   1.7;
  color:         var(--dk-font-dark);
}

.page-prose h2 {
  font-family: var(--font-body);
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--dk-font-dark);
  margin:      1.75rem 0 0.75rem;
}

.page-prose h2:first-child { margin-top: 0; }

.page-prose h3 {
  font-family: var(--font-body);
  font-size:   1rem;
  font-weight: 600;
  color:       var(--dk-font-dark);
  margin:      1.25rem 0 0.5rem;
}

/* Links */
.page-prose a {
  color:           var(--dk-green-mid);
  text-decoration: none;
}
.page-prose a:hover {
  color:           var(--dk-green-dark);
  text-decoration: underline;
}

/* Lists */
.page-prose ul,
.page-prose ol {
  padding-left:  1.75rem;
  margin-bottom: 1.25rem;
  line-height:   1.9;
}
.page-prose li { margin-bottom: 0.25rem; }

/* Horizontal rule — used sparingly between major sections */
.page-prose hr {
  border:        none;
  border-top:    1px solid var(--dk-gray-100);
  margin:        2rem 0;
}

/* Float image (e.g. shield/badge alongside intro text) */
.prose-float-left {
  float:  left;
  margin: 0 24px 16px 0;
}

/* Clearfix for floated images */
.page-prose::after {
  content: '';
  display: table;
  clear:   both;
}

/* Video embed (inherits .video-container base, scoped here for prose context) */
.page-prose .video-container {
  margin: 1.5rem 0;
}

/* Responsive */
@media (max-width: 576px) {
  .prose-float-left { float: none; margin: 0 0 16px 0; width: 100%; max-width: 120px; }
}