/* ===========================
   The Colorful Couch – Production Styles
   (Consolidated & polished)
   File: assets/css/styles.css
   =========================== */

/* ---------- Theme & Variables ---------- */
:root{
  --color-primary:#5c6ac4;
  --color-secondary:#ffffff;
  --color-accent:#f27121;

  --bg-light:#f9f9f9;

  --text-dark:#333333;
  --text-muted:#595d62;
  --text-light:#ffffff;

  --radius:12px;
  --radius-sm:8px;

  --shadow-1:0 2px 8px rgba(0,0,0,.06);
  --shadow-2:0 10px 24px rgba(0,0,0,.14);

  --transition:.28s ease;

  /* Header height should match logo size */
  --header-height:110px;   /* desktop */
}
@media (max-width:768px){
  :root{ --header-height:82px; } /* mobile */
}

/* ---------- Resets ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text-dark);
  background:var(--bg-light);
  line-height:1.7;
  scroll-behavior:smooth;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.hidden{ display:none !important; }

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; top:-40px; left:0; z-index:10000;
  background:var(--color-secondary); color:var(--text-dark);
  padding:.5rem .75rem; border-radius:var(--radius-sm); box-shadow:var(--shadow-1);
  transition:top var(--transition);
}
.skip-link:focus{ top:.5rem; left:.5rem; }
:focus{ outline:2px dashed var(--color-accent); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0s !important; transition-duration:0s !important; scroll-behavior:auto !important; }
}

/* ---------- Utilities ---------- */
.container{ max-width:1000px; margin:0 auto; padding:0 1rem; }
.container--wide{ max-width:1200px; }
.stack > * + *{ margin-top:var(--stack,1rem); }
.grid{ display:grid; gap:1.25rem; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:768px){ .cols-2{ grid-template-columns:1fr; } }
.center{ text-align:center; }

/* ===========================
   Header & Navigation
   =========================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--color-secondary);
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-height);
  padding:.4rem 1rem; gap:.75rem;
}

/* Hamburger */
.menu-toggle{
  background:none; border:none; padding:.3rem; cursor:pointer; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle:hover{ background:rgba(0,0,0,.04); }

/* Brand / Logo (right-sized) */
.brand{ display:flex; align-items:center; margin-left:.25rem; }
.brand img{ height:110px; width:auto; }
@media (max-width:768px){ .brand img{ height:82px; } }

/* Right-side actions */
.nav-actions{ display:flex; gap:.5rem; margin-left:auto; align-items:center; flex-wrap:wrap; }

/* Dropdown menu */
.menu-dropdown{
  position:absolute; top:100%; left:1rem; min-width:220px;
  background:var(--color-secondary); border-radius:var(--radius);
  padding:.75rem; box-shadow:var(--shadow-1); z-index:1050;
}
.menu-dropdown.hidden{ display:none; }
.menu-dropdown a{ display:block; padding:.5rem .75rem; border-radius:var(--radius-sm); }
.menu-dropdown a:hover{ background:#f3f4f6; }

/* ===========================
   Buttons
   =========================== */
.btn{
  --bg:var(--color-primary); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.6rem 1.05rem; border-radius:999px;
  font-weight:600; border:1px solid transparent;
  background:var(--bg); color:var(--fg);
  box-shadow:var(--shadow-1);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  font-size:.98rem;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn:active{ transform:none; box-shadow:var(--shadow-1); }
.btn:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.primary{ --bg:var(--color-primary); }
.secondary{ --bg:var(--color-accent); }
.portal-btn{ --bg:var(--color-accent); }
.btn.ghost{
  --bg:#fff; --fg:var(--color-primary);
  background:var(--bg); color:var(--fg); border:1px solid #d7daea;
}
.btn.ghost:hover{ background:#f8faff; }

/* Link-style */
.link{ color:var(--color-primary); font-weight:600; }
.link:hover{ text-decoration:underline; }

/* ===========================
   Hero (Home)
   =========================== */
.hero{
  background:
    linear-gradient(to right, rgba(92,106,196,.82), rgba(242,113,33,.78)),
    url("../img/hero-couches.jpg") center/cover no-repeat;
  min-height:calc(100vh - var(--header-height));
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
}
.hero-content{ max-width:800px; padding:2rem; }
.hero-content h1{ font-size:clamp(1.9rem,3.8vw,2.8rem); line-height:1.15; margin-bottom:.4rem; }
.hero-content p{ font-size:clamp(1rem,1.5vw,1.2rem); opacity:.95; }

/* ===========================
   Page Hero / Prose
   =========================== */
.page-hero{
  background:var(--color-secondary);
  padding:2rem 1rem;
  border-bottom:1px solid #eceff3;
}
.page-hero .container{ max-width:980px; }
.page-hero h1{ font-size:2rem; line-height:1.15; margin-bottom:.3rem; }
.page-hero p{ color:var(--text-muted); }

.prose{
  --stack:1rem;
  max-width:820px; margin:2rem auto; padding:0 1rem;
  color:var(--text-dark);
}
.prose h2{ font-size:1.45rem; margin-top:1.5rem; }
.prose h3{ font-size:1.15rem; margin-top:1.1rem; }
.prose p{ color:var(--text-muted); }
.prose ul{ margin:.6rem 0 .6rem 1.25rem; list-style:disc; }
.prose li + li{ margin-top:.35rem; }
.feature{
  background:#fff; border-radius:var(--radius); padding:1.05rem; box-shadow:var(--shadow-1);
}

/* ===========================
   Services Snapshot (Home cards)
   =========================== */
.services-snapshot{ background:var(--bg-light); padding:3.2rem 1rem; }
.services-snapshot .container{ max-width:1200px; text-align:center; }
.services-snapshot h2{ font-size:1.7rem; margin-bottom:1.4rem; }

.service-cards{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:1.6rem;
}
.card{
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-1); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.card__media{ aspect-ratio:16/9; background:#eef0f2; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__content{ padding:1rem; text-align:left; }
.card__title{ font-size:1.05rem; margin:0 0 .2rem; }
.card__body{ color:var(--text-muted); font-size:.98rem; }

/* ===========================
   Services Page (tabs + grid)
   =========================== */
.service-toggle{
  display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap;
  margin:.6rem auto 0; padding:0 .5rem;
}
.service-toggle [role="tab"]{
  border:1px solid #e5e7eb; padding:.45rem .85rem; border-radius:999px;
  background:#fff; font-weight:600; cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
  font-size:.95rem;
}
.service-toggle [role="tab"][aria-selected="true"]{
  background:#111; color:#fff; border-color:#111;
}
.service-excerpt{
  max-width:820px; margin:.65rem auto 0; text-align:center; color:var(--text-muted);
}
.services-grid #servicesPanel{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  margin-top:.8rem;
}
@media (prefers-reduced-motion:no-preference){
  .services-grid #servicesPanel{ animation:servicesFade .22s ease-out; }
  @keyframes servicesFade{ from{opacity:.001; transform:translateY(2px);} to{opacity:1; transform:none;} }
}

/* ===========================
   Fees & Insurance Page
   =========================== */
.fees{ background:#fff; padding:1.8rem 1rem; }
.fees .container{ max-width:980px; }
.fees-intro{ max-width:820px; margin:0 auto .9rem; color:var(--text-muted); }

.fee-table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow-1); background:#fff;
  font-size:.98rem;
}
.fee-table th,.fee-table td{
  text-align:left; padding:.8rem 1rem; border-bottom:1px solid #edf0f2;
}
.fee-table thead th{
  background:#f7f8fb; font-weight:700; color:#2b2f36;
}
.fee-table tr:last-child td{ border-bottom:none; }
.fee-table .price{ white-space:nowrap; font-weight:700; }

/* callout + FAQ */
.callout{
  border-left:4px solid var(--color-primary);
  background:#f5f7ff; color:#2b2f36;
  padding:.9rem; border-radius:8px; margin:1rem 0;
  font-size:.98rem;
}
.faq{ margin-top:1.6rem; }
.accordion{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); background:#fff;
}
.accordion-item + .accordion-item{ border-top:1px solid #eef0f2; }
.accordion-header{
  width:100%; text-align:left; background:#fff; border:none;
  padding:.9rem 1.1rem; font-weight:700; cursor:pointer; font-size:1rem;
}
.accordion-header:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.accordion-panel{ padding:0 1.1rem .9rem; color:var(--text-muted); }

/* ===========================
   Newsletter
   =========================== */
.newsletter{ background:#fff; padding:3.2rem 1rem; text-align:center; }
.newsletter .container{ max-width:640px; }
.newsletter h2{ font-size:1.55rem; margin-bottom:.45rem; }
.newsletter p{ color:var(--text-muted); margin-bottom:1rem; }
.newsletter form{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.newsletter input[type="email"]{
  padding:.78rem 1rem; border:1px solid #d1d5db; border-radius:999px;
  flex:1 1 300px; max-width:420px; font-size:.98rem;
}
.newsletter input[type="email"]:focus{
  outline:none; border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(92,106,196,.2);
}

/* ===========================
   Availability Banner & Footer
   =========================== */
.availability-banner{
  background:var(--color-accent); color:#fff; text-align:center;
  padding:.45rem; font-size:.92rem;
}
.availability-banner .link{ color:#fff; text-decoration:underline; }
.availability-banner.hidden{ display:none !important; }

.site-footer{
  background:#222; color:#fff; text-align:center; padding:1.8rem 1rem;
}
.footer-links{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem;
}
.footer-links a{ color:#eaeaea; }
.footer-links a:hover{ text-decoration:underline; }

/* ===========================
   Careers (roles grid & cards)
   =========================== */
.roles{ background:#fff; padding:2rem 1rem; }
.roles .container{ max-width:1100px; }
.role-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch;
}
.role-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e9ecf4; border-radius:16px;
  box-shadow:var(--shadow-1);
  overflow:hidden; transition:box-shadow var(--transition), transform var(--transition);
}
.role-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.role-head{
  padding:1rem 1.1rem .75rem;
  display:flex; flex-direction:column; gap:.45rem;
  border-bottom:1px solid #f0f2f6;
}
.role-title{ font-size:1.1rem; line-height:1.25; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{
  padding:.28rem .55rem; border-radius:999px; font-size:.83rem; font-weight:600;
  background:#f5f7ff; border:1px solid #e5e7ef; color:#2b2f36;
}
.role-body{ padding:1rem 1.1rem .9rem; color:var(--text-muted); }
.role-body ul{ margin:.4rem 0 .3rem 1.25rem; list-style:disc; }
.role-body li + li{ margin-top:.22rem; }
.role-foot{
  margin-top:auto; padding:.9rem 1.1rem 1.1rem;
  display:flex; gap:.6rem; flex-wrap:wrap;
}

/* ===========================
   MODAL (bulletproof internal scroll)
   =========================== */

/* Background scroll lock class (toggled by JS for widest support) */
html.modal-open, body.modal-open { overflow:hidden; }

/* Overlay */
.modal{
  position:fixed; inset:0; z-index:2000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:1rem;
  height:100vh;                      /* fallback */
  height:calc(100dvh - 0px);         /* modern/mobile */

  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition);
}
.modal:target{ opacity:1; pointer-events:auto; }

/* Backdrop */
.modal__backdrop{
  position:absolute; inset:0; z-index:0;
  background:rgba(17,24,39,.48);
  backdrop-filter:saturate(1.2) blur(2px);
  cursor:pointer;
}

/* Dialog — flex column; only body scrolls */
.modal__dialog{
  position:relative; z-index:1;
  width:min(760px, 92vw);

  max-height:calc(100vh - 2rem);     /* fallback */
  max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));

  display:flex; flex-direction:column;

  background:#fff;
  border-radius:16px;
  border:1px solid #e9ecf4;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  overflow:hidden;                    /* keep rounded corners */
}

/* Header fixed; visible while body scrolls */
.modal__head{
  flex:0 0 auto;
  position:sticky; top:0; z-index:2;
  background:#fff;
  padding:1rem 1.1rem; border-bottom:1px solid #f0f2f6;

  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.modal__title{ font-size:1.05rem; }
.modal__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; text-decoration:none;
  color:#111; border:1px solid #e5e7ef; background:#fff;
}
.modal__close:hover{ background:#f8faff; }

/* Scroll area */
.modal__body{
  flex:1 1 auto;
  min-height:0;                      /* critical for flex children */
  overflow:auto;
  -webkit-overflow-scrolling:touch;  /* iOS smooth scroll */
  touch-action:pan-y;                /* ensure touch scroll grabs */
  overscroll-behavior:contain;       /* no page scroll chaining */
  padding:1rem 1.1rem 1.2rem;
}

/* ===========================
   Apply Form (within modals)
   =========================== */
.apply-grid{
  display:grid; gap:.8rem;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .apply-grid{ grid-template-columns:repeat(2,1fr); }
  .span-2{ grid-column:1 / -1; }
}
.apply label{ font-weight:600; font-size:.95rem; display:block; }
.apply input[type="text"],
.apply input[type="email"],
.apply input[type="tel"],
.apply input[type="url"],
.apply select,
.apply textarea{
  width:100%; margin-top:.35rem;
  padding:.72rem .85rem; font-size:.96rem;
  border:1px solid #d1d5db; border-radius:10px; background:#fff;
}
.apply textarea{ min-height:120px; resize:vertical; }

/* File input polish */
.apply input[type="file"]{
  width:100%; margin-top:.35rem;
  font-size:.95rem;
  padding:.5rem; border:1px dashed #cfd3dc; border-radius:10px; background:#fafbff;
}
.apply .file-hint{ color:var(--text-muted); font-size:.9rem; }

.checks{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:.3rem; }
.checks label{ font-weight:500; display:flex; align-items:center; gap:.45rem; }
.checks input{ transform:translateY(1px); }

.apply .help{ color:var(--text-muted); font-size:.92rem; margin:.15rem 0 .8rem; }
.apply .actions{ display:flex; align-items:center; gap:.7rem; margin-top:.2rem; }
.apply small{ color:var(--text-muted); }

/* ===========================
   Chatbot
   =========================== */
.chatbot{ position:fixed; bottom:1rem; right:1rem; z-index:1000; }
.chatbot-toggle{
  background:var(--color-primary); color:#fff; border:none; width:52px; height:52px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); cursor:pointer;
}
.chatbot-window{
  position:absolute; bottom:64px; right:0;
  background:#fff; width:300px; padding:1rem;
  border-radius:var(--radius); box-shadow:var(--shadow-2);
}
.chatbot-window.hidden{ display:none; }

/* ===========================
   Animations (opt-in via class)
   =========================== */
.animate-on-scroll{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
.animate-on-scroll.in-view{ opacity:1; transform:none; }

/* ===========================
   Contact Page helpers
   =========================== */
form.card{ padding:2rem; }

/* Text inputs only — don't style checkboxes/radios like text fields */
form.card input[type="text"],
form.card input[type="email"],
form.card input[type="tel"],
form.card input[type="url"],
form.card input[type="number"],
form.card input[type="password"],
form.card select,
form.card textarea{
  width:100%;
  padding:0.85rem 1rem;
  font-size:1rem;
  border:1px solid #d1d5db;
  border-radius:var(--radius-sm);
  transition: border var(--transition), box-shadow var(--transition);
  background:#fff;
}

/* Proper checkbox/radio visuals */
form.card input[type="checkbox"],
form.card input[type="radio"]{
  width:auto;
  padding:0;
  margin-top:.25rem;
  border:0;
  background:transparent;
  accent-color: var(--color-primary);
}

form.card textarea{ min-height:140px; resize:vertical; }

form.card input:focus,
form.card textarea:focus,
form.card select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(92,106,196,.2);
}

/* Helper for inline consent row */
.inline-check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}

/* Keep existing contact-grid styles */
.contact-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.contact-grid .card{ padding:1.5rem; text-align:center; }

/* ===========================
   Referral & Get Started Forms
   =========================== */
.start-form,
.referral-form{
  padding:2.5rem;
  max-width:720px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.start-form h2,
.referral-form h2{
  margin-bottom:1rem; font-size:1.6rem; text-align:center; color:var(--color-primary);
}
.start-form p,
.referral-form p{
  margin-bottom:1.5rem; text-align:center; color:var(--text-muted);
}
.start-form .form-grid,
.referral-form .form-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr 1fr;   /* ✅ two columns on desktop */
}
.referral-form .full,
.start-form .full{ grid-column:1 / -1; }

@media (max-width:720px){
  .start-form .form-grid,
  .referral-form .form-grid{ grid-template-columns:1fr; }  /* ✅ one column on mobile */
}

.start-form button,
.referral-form button{
  margin-top:1rem; font-size:1rem; padding:.9rem 1.4rem;
}

/* Success panel used after submit */
.success-panel{
  display:none;
  max-width:800px;
  margin:24px auto;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:24px;
  text-align:center;
}
.success-panel .big{ font-size:1.2rem; margin-bottom:.25rem; }

/* Availability (hybrid) */
.availability-section{ margin-top:.5rem; display:grid; gap:1.2rem; }
.availability-block strong{ display:block; margin-bottom:.4rem; color:var(--color-primary); font-weight:600; font-size:1rem; }
.checkbox-row{ display:flex; flex-wrap:wrap; gap:1rem 2rem; }
.checkbox-row label{ font-weight:400; cursor:pointer; display:flex; align-items:center; gap:.4rem; font-size:.95rem; color:var(--text-dark); }
.checkbox-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border:2px solid #d1d5db; border-radius:4px;
  display:inline-block; position:relative; cursor:pointer; transition:all var(--transition);
}
.checkbox-row input[type="checkbox"]:checked{ background:var(--color-primary); border-color:var(--color-primary); }
.checkbox-row input[type="checkbox"]:checked::after{
  content:""; position:absolute; top:2px; left:6px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* Small spacing tune so the card aligns visually inside .fees section */
.fees .card.referral-form{ margin-top:.5rem; }

/* ===========================
   Info Cards (bottom sections)
   =========================== */
.info-section{ padding:3rem 1rem; background:#fff; }
.info-grid{
  max-width:1000px; margin:0 auto;
  display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.info-card{
  background:#fff; border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; justify-content:space-between;
}
.info-card h3{ margin-bottom:.75rem; color:var(--color-primary); font-size:1.15rem; }
.info-card p{ flex:1; margin-bottom:.9rem; color:var(--text-muted); font-size:.95rem; }
.info-card a{ font-weight:600; color:var(--color-accent); text-decoration:none; }
.info-card a:hover{ text-decoration:underline; }

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width:1024px){
  .nav-actions .btn{ padding:.55rem .95rem; font-size:.96rem; }
}
@media (max-width:768px){
  .nav-container{ flex-wrap:wrap; }
  .menu-dropdown{ left:.75rem; right:.75rem; min-width:unset; }
  .service-cards{ grid-template-columns:1fr; }
  .hero-content h1{ font-size:clamp(1.7rem,5.2vw,2.2rem); }
}
@media (max-width:420px){
  .brand img{ height:78px; }
  .btn{ padding:.55rem .85rem; font-size:.95rem; }
}

/* ============================================================
   FINAL: Non-fullscreen modal hardening (percent-based sizing)
   ============================================================ */

/* Lock page height & scroll when a modal is open */
html.modal-open,
body.modal-open{
  height:100%;
  overflow:hidden;
}

/* Use percent sizing in windowed mode; allow overlay to scroll if needed */
.modal{
  height:100% !important;
  overflow:auto;
}

/* Size dialog relative to page box (not viewport units) */
.modal__dialog{
  max-height:calc(100% - 2rem) !important; /* matches .modal padding */
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Ensure body is the only scroller */
.modal__body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior:contain;
}

/* ============================================================
   Anchor & Skip-link hardening for #main-content
   ============================================================ */

/* Hide any link that jumps to #main-content (kills the top-left button entirely) */
a[href="#main-content"],
.skip-link,
.screen-reader-text.skip-link,
.screen-reader-shortcut{
  display:none !important;
}

/* Prevent white strip and header-overlap when landing on the anchor */
#main-content{
  background:var(--bg-light) !important;
  margin:0;
  padding:0;
  scroll-margin-top:calc(var(--header-height) + 12px);
}
#main-content:target{ outline:none !important; }

/* If the first child inside #main-content is a .container, align edges */
#main-content > .container{
  padding-left:0;
  padding-right:0;
}

/* ==========================================
   Mobile-only header tweaks (no desktop change)
   ========================================== */
@media (max-width: 600px){
  /* Shorter header + tighter spacing */
  :root { --header-height: 68px; }

  .nav-container{
    flex-wrap: nowrap;          /* keep everything on one line */
    gap: .4rem;
  }

  /* Make the logo smaller and allow it to shrink */
  .brand{ flex: 1 1 auto; min-width: 0; }   /* lets brand give space to buttons */
  .brand img{
    height: 60px;               /* smaller logo on mobile */
    width: auto;
    max-width: 50vw;            /* don’t let it hog the row */
  }

  /* Keep both buttons on the same level */
  .nav-actions{
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
    flex-wrap: nowrap;          /* never wrap to the next line */
  }
  .nav-actions .btn{
    padding: .48rem .7rem;      /* slimmer buttons */
    font-size: .90rem;
    white-space: nowrap;        /* keep each button on one line */
  }

  /* Slightly smaller hamburger so everything fits */
  .menu-toggle svg{ width: 24px; height: 24px; }
}

/* Extra-tight phones (e.g., 320–360px wide) */
@media (max-width: 360px){
  .brand img{ height: 52px; }
  .nav-actions{ gap: .3rem; }
  .nav-actions .btn{
    padding: .42rem .56rem;
    font-size: .84rem;
  }

  /* Optional: shorten “Client Portal” label to “Portal” via CSS only */
  .portal-btn{
    font-size: 0;               /* hide original text */
    padding: .42rem .56rem;
  }
  .portal-btn::after{
    content: "Portal";          /* shorter label fits the row */
    font-size: .84rem;
    line-height: 1;
  }
}