/* --- Enhanced CalcDomain CSS with Mobile-First Design & Accessibility --- */

/* ====================================================================== */
/* Design Tokens                                                          */
/* ====================================================================== */
:root {
  --primary-color:#005A9C; --secondary-color:#003F6E; --accent-color:#00A4E4;
  --background-color:#F8F9FA; --surface-color:#FFFFFF;
  --text-color:#212529; --muted-text-color:#6C757D; --border-color:#DEE2E6;
  --success-color:#198754; --error-color:#DC3545; --warning-color:#FFC107;

  --font-sans-serif:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-monospace:'Source Code Pro',SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --touch-target-min:48px; --touch-target-optimal:60px;
  --input-padding:clamp(.75rem,2vw,1rem);
  --border-radius-button:8px; --border-radius-card:12px;

  --transition-standard:.2s ease-in-out; --transition-fast:.1s ease-in-out;

  --container-max-width:1200px; --sidebar-width:clamp(300px,40vw,450px);
  --gap-small:.5rem; --gap-medium:1rem; --gap-large:2rem;

  --overlay-bg:rgba(0,0,0,.4);
}

@media (prefers-contrast: high){
  :root{
    --primary-color:#000080; --secondary-color:#000;
    --text-color:#000; --border-color:#000; --background-color:#fff;
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ====================================================================== */
/* Base                                                                   */
/* ====================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; font-size:clamp(16px,2.5vw,18px); }
body{
  font-family:var(--font-sans-serif);
  background:var(--background-color);
  color:var(--text-color);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{ overflow:hidden; }

/* Skip link */
.skip-link{
  position:absolute; top:-40px; left:6px;
  background:var(--primary-color); color:#fff;
  padding:8px 16px; z-index:1000; text-decoration:none;
  border-radius:0 0 4px 4px; font-weight:600;
}
.skip-link:focus{ top:0; }

/* Type & links */
h1,h2,h3,h4,h5,h6{ margin-bottom:.75rem; font-weight:700; line-height:1.2; color:var(--secondary-color); }
h1{ font-size:clamp(1.8rem,4vw,2.5rem); }
h2{ font-size:clamp(1.5rem,3.5vw,2rem); }
h3{ font-size:clamp(1.3rem,3vw,1.75rem); }
h4{ font-size:clamp(1.1rem,2.5vw,1.25rem); }
p{ margin-bottom:1rem; max-width:65ch; }
a{ color:var(--primary-color); text-decoration:none; transition:color var(--transition-fast); }
a:hover{ color:var(--secondary-color); text-decoration:underline; }
a:focus{ outline:3px solid var(--primary-color); outline-offset:2px; border-radius:2px; }
code{ font-family:var(--font-monospace); background:#e9ecef; padding:.2em .4em; border-radius:3px; }

/* Layout helpers */
.container{ max-width:var(--container-max-width); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.main-content{ padding:var(--gap-large) 0; }

/* ====================================================================== */
/* Header + Search + Hamburger (centered full-screen menu)                */
/* ====================================================================== */
.site-header{
  background:var(--surface-color);
  padding:.75rem 0;
  border-bottom:1px solid var(--border-color);
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  position:sticky; top:0; z-index:100;
}

/* change: default grid = auto | 1fr | auto  (logo, search, toggle) */
.header-content{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--gap-medium);
}

.logo{
  font-size:clamp(1.25rem,3vw,1.5rem);
  font-weight:700; color:var(--primary-color);
}
.logo:hover{ text-decoration:none; }
.logo:focus{ outline:3px solid var(--primary-color); outline-offset:2px; }

/* Search — FIX: make it flexible and non-wrapping on mobile */
.site-search{
  display:flex; align-items:center; gap:.5rem;
  justify-self:stretch;         /* lets it expand within the middle column */
  flex:1 1 auto; min-width:0;   /* critical to allow shrinking */
}
.site-search input[type="search"]{
  flex:1 1 auto; min-width:0;   /* critical to allow shrinking */
  width:auto;                   /* override fixed widths */
  max-width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--border-color);
  border-radius:8px; font-size:.95rem; background:#fff;
}
.site-search input[type="search"]:focus{
  outline:none; border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgba(0,90,156,.15);
}
.site-search .btn{
  white-space:nowrap;
  padding:.5rem .9rem; font-size:.95rem;
  border-radius:8px;
}

/* Toggle */
.nav-toggle{
  appearance:none; border:1px solid var(--border-color);
  background:var(--surface-color); border-radius:var(--border-radius-button);
  padding:.5rem .75rem; min-height:var(--touch-target-min);
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
}
.nav-toggle:focus{ outline:3px solid var(--primary-color); outline-offset:2px; }
.nav-toggle-text{ font-weight:600; }
.nav-toggle-box{ position:relative; width:22px; height:16px; display:inline-block; }
.nav-toggle-inner,.nav-toggle-inner::before,.nav-toggle-inner::after{
  content:""; position:absolute; height:2px; width:100%; background:var(--text-color); left:0;
  transition:transform var(--transition-standard), opacity var(--transition-standard);
}
.nav-toggle-inner{ top:50%; transform:translateY(-50%); }
.nav-toggle-inner::before{ top:-7px; }
.nav-toggle-inner::after{ top:7px; }
.nav-toggle.is-active .nav-toggle-inner{ background:transparent; }
.nav-toggle.is-active .nav-toggle-inner::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-inner::after{ transform:translateY(-7px) rotate(-45deg); }

/* Centered full-screen overlay menu (slides from top) */
.main-nav{
  position:fixed; inset:0; background:var(--surface-color);
  transform:translateY(-100%); transition:transform var(--transition-standard);
  padding:5.5rem 1.25rem 2rem; overflow-y:auto; z-index:99; border-top:1px solid var(--border-color);
}
.main-nav.is-open{ transform:translateY(0); }

/* overlay header with Close button */
.nav-header{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-color); padding:.5rem .25rem .75rem; margin:-.5rem 0 .5rem;
  border-bottom:1px solid var(--border-color);
}
.nav-title{ font-weight:700; color:var(--secondary-color); }
.nav-close{
  appearance:none; border:1px solid var(--border-color); background:var(--surface-color);
  border-radius:var(--border-radius-button); padding:.5rem .75rem; font-weight:600; cursor:pointer;
  min-height:var(--touch-target-min); line-height:1;
}
.nav-close:focus{ outline:3px solid var(--primary-color); outline-offset:2px; }

/* Nav list (centered column) */
.main-nav ul{
  list-style:none; display:grid; gap:.25rem; max-width:720px; margin:0 auto;
}
.main-nav li a{
  display:block; padding:.9rem .75rem; border-radius:8px; font-weight:600;
  color:var(--secondary-color); border:1px solid transparent;
}
.main-nav li a:hover{ text-decoration:none; background:rgba(0,90,156,.06); border-color:var(--border-color); }
.main-nav li.divider{ height:1px; background:var(--border-color); margin:.5rem 0 .25rem; }

/* Desktop tweaks */
@media (min-width: 992px){
  .header-content{ grid-template-columns:auto 1fr auto; } /* stays the same on desktop */
  .site-search{ justify-self:stretch; }
  .site-search input[type="search"]{ width:100%; }
}

/* Ultra-narrow screens: stack search on its own row */
@media (max-width:380px){
  .header-content{
    grid-template-columns:auto auto;
    grid-template-areas:
      "logo navbtn"
      "search search";
  }
  .logo{ grid-area:logo; }
  .nav-toggle{ grid-area:navbtn; justify-self:end; }
  .site-search{ grid-area:search; }
}

/* ====================================================================== */
/* Buttons                                                                */
/* ====================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--input-padding) 1rem; font-size:.95rem; font-weight:600;
  border-radius:var(--border-radius-button); cursor:pointer;
  transition:all var(--transition-standard); border:1px solid transparent;
  min-height:var(--touch-target-min); min-width:var(--touch-target-min);
  gap:.5rem; text-decoration:none;
}
.btn:focus{ outline:3px solid var(--primary-color); outline-offset:2px; }
.btn-primary{ background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.btn-primary:hover{ background:var(--secondary-color); border-color:var(--secondary-color); color:#fff; text-decoration:none; transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--primary-color); border-color:var(--primary-color); }
.btn-secondary:hover{ background:var(--primary-color); color:#fff; text-decoration:none; }

/* ====================================================================== */
/* Cards / Grids / Footer                                                 */
/* ====================================================================== */
.card{
  background:var(--surface-color); border:1px solid var(--border-color);
  border-radius:var(--border-radius-card); padding:clamp(1rem,3vw,1.5rem);
  box-shadow:0 4px 6px rgba(0,0,0,.05); transition:all var(--transition-standard);
  display:block; text-decoration:none; color:inherit;
}
.card:hover{ box-shadow:0 8px 12px rgba(0,0,0,.1); transform:translateY(-2px); text-decoration:none; color:inherit; }
.card:focus{ outline:3px solid var(--primary-color); outline-offset:2px; }
.card h3{ margin:0 0 .75rem; }

.grid{ display:grid; gap:clamp(1rem,3vw,1.5rem); }
.grid-3-col{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }

.site-footer{ background:var(--secondary-color); color:#fff; padding:2rem 0; margin-top:4rem; }
.site-footer a{ color:#fff; padding:.25rem .5rem; border-radius:4px; transition:background-color var(--transition-fast); }
.site-footer a:hover{ color:var(--accent-color); background:rgba(255,255,255,.1); text-decoration:none; }
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:2rem; }
.footer-column h4{ color:#fff; margin-bottom:1rem; }
.footer-column ul{ list-style:none; }
.footer-column ul li{ margin-bottom:.5rem; }
.footer-bottom{ text-align:center; margin-top:2rem; padding-top:1rem; border-top:1px solid #495057; font-size:.9rem; }

  .section-toolbar{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
  .section-toolbar h2{margin:0}
  .section-toolbar .view-all{margin-left:auto;font-size:.95rem}
  
/* ====================================================================== */
/* Screen-reader utility (in case some pages inline it)                   */
/* ====================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}