/* ═══════════════════════════════════════════════════════════
   SHARIF LAW — responsive layer

   This file is enqueued LAST, after base.css and every section
   stylesheet, and that ordering is the whole point.

   Section sheets redefine selectors like .hero-grid and .team
   with the same specificity as base.css. CSS resolves equal
   specificity by source order, so a media query sitting in
   base.css is overridden by the plain rule in the section sheet
   that loads after it — the collapse never happens and the site
   stays multi-column on a phone.

   Keep every width-dependent rule here.
   ═══════════════════════════════════════════════════════════ */

/* ═══ responsive ════════════════════════════════════════════ */
@media (max-width:1080px){
  .nav{display:none}.hdr{gap:14px;padding-left:18px}
  .hero-grid,.why-top,.split,.split.rev,.faq-grid,.book-grid,.team{grid-template-columns:1fr;gap:44px}
  .rrow{grid-template-columns:1fr 120px}
  .rstage{position:relative;left:auto;top:auto;translate:none;margin:0 auto 26px;width:210px;height:250px}
  .book-aside{position:static}
  .cred-grid,.pa-grid,.wgrid,.posts{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .signup{grid-template-columns:1fr;gap:22px}
  .steps{grid-template-columns:1fr}
  .logo .nm{font-size:16px}.logo img{height:38px}
  .portrait-wrap{max-width:470px;margin-inline:auto;min-height:440px}
  .creds{margin-top:-30px}
}
@media (max-width:760px){
  body{font-size:15px}
  .sec{padding:64px 0}.sec.tight{padding-bottom:64px}
  .paths,.cred-grid,.pa-grid,.wgrid,.posts,.f-grid,.frow,.vals,.cinfo{grid-template-columns:1fr}
  .cta-panel,.signup,.cform,.book-aside{padding:32px 24px}
  .pick.c5,.pick.c4{grid-template-columns:repeat(2,1fr)}
  .cmp{grid-template-columns:1fr}
  .topbar{font-size:11.5px}
  .topbar .r{margin-left:0;gap:16px;flex-wrap:wrap}
  .topbar .wrap{justify-content:center;text-align:center}
  .stage{padding:64px 0}.orb,.scale-ico{display:none}
  .ghost{font-size:64px;bottom:auto;top:1%}
  .logo .tg{display:none}
  .creds{margin-top:-20px;padding-bottom:64px}
  .pc-name{left:12px;bottom:12px;padding:10px 14px 10px 11px}
  .pc-name .s{display:none}
  .pc-chip{right:12px;top:12px;padding:8px 13px 8px 11px}
  .site-header{padding-top:10px}
  .wrap{padding-inline:20px}
}


/* ═══ MOBILE HARDENING ══════════════════════════════════════ */
/* clip, not hidden — overflow:hidden on html breaks position:sticky */
html{overflow-x:clip}

/* Flex children default to min-width:auto and refuse to shrink below their
   content. That is what pushed the header pill past the viewport on phones. */
.hdr{min-width:0}
.hdr > *{min-width:0}
.logo{min-width:0}
.logo .txt{min-width:0;overflow:hidden}
.logo .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn .lbl-short{display:none}

@media (max-width:620px){
  .btn.hdr-btn .lbl-full{display:none}
  .btn.hdr-btn .lbl-short{display:inline}
  .btn.hdr-btn{padding:13px 18px}
  .logo img{height:38px}
  .logo .nm{font-size:15px;letter-spacing:.1em}
  .hdr{gap:10px;padding:8px 8px 8px 14px}
}
@media (max-width:400px){
  .logo .div{display:none}
  .logo{gap:9px}
  .logo .nm{font-size:14px}
}

/* Touch targets. Inline links are 20px tall by default — too small to hit
   reliably. These give them a comfortable 40px+ without changing the look. */
@media (max-width:900px){
  .topbar a{padding:7px 0;min-height:38px}
  .topbar .wrap{gap:4px 20px}
  .fcol ul a{display:inline-flex;align-items:center;min-height:42px;padding:4px 0}
  .fcol address a{min-height:40px;display:flex;align-items:center}
  .tlink{min-height:44px;align-items:center}
  .pa li a{padding:14px 0}
  .drop-menu a{padding:13px 12px}
  .socials a{width:44px;height:44px}
  .crumb a{padding:6px 0;display:inline-block}
  .tst-nav button,.rnav button{width:46px;height:46px}
  details.q summary{padding:20px 0}
}

/* Long unbroken strings (emails, URLs) must never force a scrollbar. */
.fcol address a,.ci a,.topbar a{overflow-wrap:anywhere}

/* ── WordPress essentials ─────────────────────────────────── */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy-deep);
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:600}
.skip-link:focus{left:0}
.prose{max-width:72ch}
.prose h2{font-size:clamp(24px,2.8vw,34px);margin:38px 0 14px}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose p{margin:0 0 18px;color:var(--text-2)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--text-2)}
.prose li{margin:8px 0}
.prose li::marker{color:var(--gold-deep)}
.prose a{color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold-deep)}
.prose blockquote{margin:26px 0;padding:20px 26px;border-left:3px solid var(--gold);
  background:#FBF5E9;border-radius:0 16px 16px 0;color:#6E5416}
.prose img,.prose figure img{border-radius:18px;box-shadow:var(--sh-m)}
.prose figcaption{font-size:13px;color:var(--text-3);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;margin:22px 0}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line-2);text-align:left}
.prose code{background:var(--ivory-2);padding:2px 6px;border-radius:5px;font-size:.9em}
.post .thumb{display:block}
.post .shd a{color:inherit}
.post .shd a:hover{color:var(--steel)}
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  font-weight:600;font-size:14px;color:var(--text-2);transition:all .25s var(--ease)}
.page-numbers:hover{color:var(--navy-deep);box-shadow:inset 0 0 0 1px var(--gold)}
.page-numbers.current{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#3A2905;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.sharif-nomb{margin-bottom:0!important}
.logo-mark{height:48px;width:auto}
/* Elementor pages: let the builder control its own width */
.elementor-page main > .elementor{width:100%}

/* Editor-only reminders — never rendered for visitors. */
.note{margin-top:24px;padding:15px 18px;border-radius:16px;background:#FBF3E3;
  border:1px dashed rgba(156,113,28,.45);font-size:12.5px;line-height:1.7;color:#7C5C13}
.note-admin{position:relative;padding-top:34px}
.note-tag{position:absolute;top:10px;left:20px;font-family:var(--font-label);
  font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--gold-deep);padding:3px 9px;border-radius:999px}

/* ═══ phone corrections ═════════════════════════════════════ */
@media (max-width:760px){
  /* The signup field carried a 280px minimum, which is wider than the card's
     content box on a 360px screen — it pushed the whole panel off-canvas. */
  .signup{grid-template-columns:1fr;gap:20px}
  .su{flex-direction:column;align-items:stretch;width:100%}
  .su input{min-width:0;width:100%}
  .su .btn{justify-content:center;width:100%}
}

@media (max-width:620px){
  /* A roster row is a name, a spacer and a role. Two columns left the role
     wrapping onto its own line at 120px wide; stack it properly instead. */
  .rrow{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .rrow > span:nth-child(2){display:none}
  .rrole{text-align:left}

  /* Give running text and buttons room rather than squeezing them. */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .cta-btns .btn{width:100%;justify-content:center}
  .sec-head{margin-bottom:32px}
}

/* ═══ phone: hero, header and footer ═══════════════════════ */
@media (max-width:760px){
  /* The watermark sat directly behind the header pill and read as a smudge. */
  .ghost{display:none}

  /* The two glass cards are positioned against a 430px portrait. On a phone
     they collide with each other and hang off both edges, so they come out
     of the overlay and stack under the portrait as ordinary cards. */
  .portrait-wrap{display:block;min-height:0;max-width:none}
  .portrait{margin-inline:auto}
  .badge{position:static;width:auto;margin-top:12px;
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:var(--sh-m),inset 0 1px 0 #fff}
  .badge-a{margin-top:18px}
  .halo,.portrait-wrap > .ring{display:none}

  /* Footer: ten links stacked at 42px each made it endless. Two columns for
     the link groups, brand and contact full width. */
  .f-grid{grid-template-columns:1fr 1fr;gap:26px 20px;padding-bottom:38px}
  .f-brand{grid-column:1 / -1}
  .fcol:last-of-type{grid-column:1 / -1}
  .fcol ul{gap:2px}
  .fcol h4{margin-bottom:10px}
  .socials{margin-top:14px}
  .f-bottom{padding:20px 0 28px}
}

@media (max-width:620px){
  /* Give the header pill room to breathe rather than jamming the burger
     against the edge. */
  .hdr{gap:8px;padding:7px 7px 7px 13px}
  /* .nav carries margin-left:auto on desktop, but it is display:none here,
     so nothing was pushing the buttons to the right edge of the pill. */
  .hdr-cta{gap:6px;margin-left:auto}
  .burger{width:42px;height:42px}
  .btn.hdr-btn{padding:12px 16px;font-size:11.5px}
  .logo img{height:34px}
  .logo .nm{font-size:14px;letter-spacing:.08em}
  .site-header{padding-top:8px}
}

/* ═══ phone: Calendly embed ════════════════════════════════ */
/* Two columns on desktop, one below ~820px — the same content needs
   far more vertical room once it stacks. Height, not min-height. */
@media (max-width:900px){
  .calendly-holder{height:1150px}
}
@media (max-width:520px){
  .calendly-holder{height:1080px}
}

/* ═══ phone: quick-answer rows and stat cards ══════════ */
@media (max-width:620px){
  /* .brow is icon + text + button on one flex line. The button is flex:none
     with a long label, so on a phone it pushed itself out of the card and
     squeezed the paragraph down to about 70px — one word per line.
     Icon and heading share the first line; the button gets its own. */
  .brow{flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:20px 0}
  .brow .i{width:42px;height:42px}
  .brow > div{flex:1 1 0;min-width:0}
  .brow .go{margin-left:0;flex:1 1 100%;width:100%;justify-content:center}
  .brow h4{font-size:16px}
  .brow p{font-size:13.5px}

  /* The stat headline is sized for a quarter-width column on desktop. */
  .cbox{padding:22px 22px 20px}
  .cbox .n{font-size:23px}
  .cbox .i{width:40px;height:40px;margin-bottom:14px}
  .cbox .l{font-size:13px}
}