/* ==========================================================================
   Full Code Medical — Audit remediation CSS
   Source: Full_Code_Medical_Website_Audit.pdf  ·  Ledger: Audit-Remediation-Invoice.md
   Each rule references its invoice item ID (e.g. A1, B2). Keep them labeled.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 4 — Responsive Design & Layout
   -------------------------------------------------------------------------- */

/* ---- Work Block A — Navigation / Menu Bar ---- */

/* A1 + A2  Header dead zone (999px) + menu fit (1000–1150px). Reworked 2026-07-09.
   The real mobile header is the TapTap plugin bar (hamburger / logo / search) — NOT any
   Elementor "Main Header" section. Desktop header = #2b8b678c (logo + horizontal nav +
   Log In). Original 999px dead zone: a hand-written Additional CSS rule hid TapTap at
   min-width:999px while the desktop header only appears at >=1000px, so 999px showed
   neither.

   HANDOFF at 1020px (user preference — keep the full desktop nav until it's genuinely
   tight, then switch to mobile):
     • Desktop header #2b8b678c: shown >=1020px; hidden <=1019px (this overrides the
       native "desktop >=1000px", so 1000–1019px uses the mobile bar too).
     • TapTap: the Additional CSS boundary is set to min-width:1020px, so TapTap shows
       <=1019px and hides >=1020px. (Change the Additional CSS rule "min-width:999px" →
       "min-width:1020px"; replicate on staging/prod — see invoice + README.)
     Gapless: <=1019 TapTap, >=1020 desktop.

   The desktop nav used to WRAP because the "Log In" button hogged a ~264px column.
   FIX PART 2 (below) slims Log In, lets the logo+nav column flex into the reclaimed
   space, and centers the menu so it breathes on wide screens and tightens as the window
   narrows — down to the 1020px handoff.
   (Legacy Elementor sections #7103a40 / #fbdd126 remain natively hidden.) */
@media (max-width: 1019px) {
	.elementor-16 .elementor-element-2b8b678c { display: none !important; }
}

/* Desktop header layout (>=1020px): logo left, menu EQUIDISTANT between the logo and
   Log In, Log In right. The logo+nav column flexes to fill; inside it the logo shrinks to
   content and the nav column takes the rest, so the nav spans exactly from the logo's
   right edge to Log In's left edge. The menu uses space-around, and we zero ALL the nested
   horizontal padding/margin on the nav — otherwise Elementor's asymmetric paddings
   (~12px left / ~30px right) make the two end half-gaps unequal. With them zeroed, the
   half-gap at each end is equal, so whitespace(logo↔menu) == whitespace(menu↔Log In) and
   the items are evenly spaced between. */
@media (min-width: 1020px) {
	/* Log In: shrink to content, button min 140px, right-aligned. */
	.elementor-16 .elementor-element-2b8b678c .elementor-element-345d3c82 {
		width: auto !important;
		flex: 0 0 auto !important;
		text-align: right !important;
	}
	.elementor-16 .elementor-element-7b66b7c .elementor-button {
		display: inline-block !important;
		width: auto !important;
		min-width: 140px !important;
		padding: 10px 22px !important;
	}
	/* Logo + nav column fills the space between the left edge and the (shrunk) Log In. */
	.elementor-16 .elementor-element-2b8b678c .elementor-element-50334c54 {
		width: auto !important;
		flex: 1 1 auto !important;
	}
	/* Zero the inner section's 5px side padding so the nav column spans exactly from the
	   logo's right edge to Log In's left edge (symmetric on both sides). */
	.elementor-16 .elementor-element-5a317fb9 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Logo shrinks to content (kept at 57px height); nav column takes the remaining space. */
	.elementor-16 .elementor-element-50334c54 .elementor-element-1b8876f0 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	.elementor-16 .elementor-element-2f0397 img {
		height: 57px !important;
		width: auto !important;
		max-width: none !important;
	}
	.elementor-16 .elementor-element-50334c54 .elementor-element-20f3be4 {
		width: auto !important;
		flex: 1 1 auto !important;
	}
	/* Force the ENTIRE nav chain (widget-wrap → widget → container → nav → ul) to fill the
	   nav column with zero padding/margin, so the ul is exactly as wide as the column and
	   space-around's end half-gaps come out equal = menu equidistant from logo and Log In. */
	.elementor-16 .elementor-element-20f3be4 > .elementor-widget-wrap,
	.elementor-16 .elementor-element-20f3be4 .elementor-element-15b30bb7,
	.elementor-16 .elementor-element-15b30bb7 > .elementor-widget-container,
	.elementor-16 .elementor-element-15b30bb7 .elementor-nav-menu--main {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	/* space-around across the symmetric nav column: equal end half-gaps (menu equidistant
	   from logo and Log In) AND it scales — items spread on wide screens and tighten as the
	   window narrows toward the 1020px handoff, so it never overflows (a fixed gap would).
	   This only works now that the clearfix ::after below is removed from the flex flow. */
	.elementor-16 .elementor-element-15b30bb7 .elementor-nav-menu {
		width: 100% !important;
		justify-content: space-around !important;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		padding: 0 20px !important;
	}
	/* The menu ul has a clearfix ::after (content:" ") that becomes an invisible 7th flex
	   item — it added a trailing gap after "More" and pushed the block off-center. Remove
	   both pseudo-elements from the flex flow so the 6 items center evenly. */
	.elementor-16 .elementor-element-15b30bb7 .elementor-nav-menu::before,
	.elementor-16 .elementor-element-15b30bb7 .elementor-nav-menu::after {
		display: none !important;
	}
}

/* A1/A2 follow-up: the TapTap header is position:fixed and 70px tall
   (taptap_header_height=70), but #page had no matching top clearance, so the fixed
   bar overlapped the top of the page content (hero H1 was hidden behind it). The old
   Additional CSS cleared only 40px and only for 592–999px — too little. Give #page a
   full 70px clearance across TapTap's visible range (<=1019px). (The admin-bar offset is
   handled separately by WP on <html>, so this works in both admin and logged-out
   views.) !important supersedes the stale 40px Additional CSS rule. */
@media (max-width: 1019px) {
	#page { margin-top: 70px !important; }
}

/* A1/A2 follow-up (2): a pre-existing Additional CSS hack pulls the content up with
   `#page .site-content { margin-top: -15% !important }` at <=767px (~-90px at 600px
   wide) — which overpowers the clearance above and drags the hero back behind the
   fixed TapTap header on phones/small tablets, on every page. Neutralize it. Higher
   specificity (body #page …) so it wins over the !important rule regardless of order. */
@media (max-width: 767px) {
	body #page .site-content { margin-top: 0 !important; }
}

/* A3  Internal links opening in new tabs — handled in assets/js/audit-fixes.js
   (drops target="_blank" from internal site links, keeps it for app/social/external). */

/* A4  Desktop nav items are tightly spaced (9px horizontal padding). NOT FIXED — no
   room. The desktop header content is boxed at max-width:1150px, and at that width the
   6 top-level items already total ~591px = exactly the ~591px available (zero slack).
   Any extra padding pushes "More" onto a second line at every desktop width. Widening
   the header past 1150px would misalign it with the page body; the alternative is
   shrinking the logo/font. Left at native spacing (low-severity cosmetic item) — revisit
   only if the header is reworked (fewer items / smaller logo / wider content width). */


/* §3 PERFORMANCE — GIF → <video> swap sizing (see functions.php
   fullcode_swap_gif_for_video). The heavy Patient-AI-15s.gif (8.8 MB, transparent)
   was converted to MP4/WebM composited over the section colour #EAF3F1 and injected
   as a <video class="fullcode-gif-video"> in place of the <img>. Elementor sizes the
   ORIGINAL image via `.elementor-element-4f187ba img { width:75% }` (60% ≤999px) and
   centres it (text-align:center); a <video> isn't an <img>, so it escaped those rules
   and filled the whole column (~3× too big). Re-apply the SAME width to the video so
   it occupies the identical box. display:block + margin:auto reproduces the widget's
   centering (text-align:center only centres inline boxes). Per-widget because the width
   % is a per-image setting — add a matching block for each future converted GIF. */
.elementor-4505 .elementor-element-4f187ba video.fullcode-gif-video {
	display: block;
	width: 75%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 999px) {
	.elementor-4505 .elementor-element-4f187ba video.fullcode-gif-video {
		width: 60%;
	}
}


/* ---- Work Block B — Responsive Layout & Overflow ---- */

/* B1  Hero image overflows the viewport (~+58px @1024px, +19px @1280px on Home &
   Individuals). The hero graphic (laptop/phone) bleeds past the right edge at laptop
   widths — a real horizontal overflow (confirmed: scrollWidth − innerWidth = 58 @1024).
   No visible scrollbar on macOS's overlay scrollbars, but the page can scroll right and
   Windows shows a bar. Clip horizontal overflow at the page wrapper so nothing can spill
   PAST the viewport; full-bleed sections still reach the edges, only the overspill is
   clipped. `clip` (not `hidden`) doesn't create a scroll container, so position:sticky
   etc. keep working. This also resolves B3 (Organizations hero image +11px @360–375px). */
#page {
	overflow-x: clip;
}

/* B2  Multi-column grids break mid-word in the tablet range (~481–999px), sitewide.
   Root cause: this site's Elementor only stacks columns to 100% at <=499px, so in
   the 500–999px range multi-column grids (team cards, clinical bios, Features &
   Benefits, FAQ, etc.) stay 2–4 across and squeeze to ~80–150px, breaking words.
   Fix — responsive column scheme (content only; header/footer excluded):
     • Mobile (<=767px): one column. Elementor natively stacks only at <=499px, so we
       force single-column up through 767px too.
     • Tablet (768–999px): cap multi-column grids at TWO across. On desktop these are
       3-/4-/5-up (col-33/25/20/16) and squeeze/break mid-word; a single column makes
       card/team images huge — two-up is the sweet spot. col-50 is already 2-up.
     • Desktop (>=1000px): unchanged. */
@media (max-width: 767px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* B2 exception — LOGO GRIDS stay 2-up on mobile (regression reported 2026-07-16).
   The <=767px single-column rule above exists because TEXT grids break mid-word when
   squeezed. Partner-logo rows have no text to break, so forcing them to 100% just made
   each logo enormous (350px column / up to 330px logo at 390px wide) and 1-per-line —
   on prod they were 2-up. Logos must NEVER go 1-wide.

   Targeting: a column that is part of a multi-up grid (col-16/20/25/33 — the logo rows
   are col-25, i.e. 4-up on desktop) AND whose widget-wrap holds exactly ONE image widget
   and nothing else. That ":only-child image widget" test is what separates a logo cell
   from a team/bio card (image + heading + text), so this can't catch text cards — and it
   needs no per-section IDs, which differ per page (Home 50325cdb/73d7a82f, Organizations
   6e8fb875/5f1b7df2/66cde161) and would break whenever a new logo row is added.
   col-50 is deliberately NOT listed: those are hero/feature images that SHOULD go
   full-width on mobile. Verified across Home/Organizations/Individuals/Pricing/About/
   Contact: the selector matches 24 columns, ALL col-25 logo cells — the col-16/20/33
   entries match nothing today and are only there so a future 3-/5-/6-up logo row can't
   regress to 1-wide.
   Specificity (col class + :has) beats the blanket rule above, so order-independent. */
@media (max-width: 767px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-16:has(> .elementor-widget-wrap > .elementor-widget-image:only-child),
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-20:has(> .elementor-widget-wrap > .elementor-widget-image:only-child),
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-25:has(> .elementor-widget-wrap > .elementor-widget-image:only-child),
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-33:has(> .elementor-widget-wrap > .elementor-widget-image:only-child) {
		width: 50% !important;
		max-width: 50% !important;
	}
}

@media (min-width: 768px) and (max-width: 999px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-16,
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-20,
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-25,
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-column.elementor-col-33 {
		width: 50% !important;
	}
}

/* B2 — About "Meet the Team": the 12 members are built as 5 SEPARATE row-groups
   (2 + 3 + 3 + 3 + 1 columns), so capping each group at 2-up leaves lone cards
   ("2 across sometimes, 1 across other times"). Flatten all groups into ONE 2-column
   grid at tablet so the cards flow evenly (12 → a clean 2×6). display:contents
   dissolves the intermediate section/container wrappers so every card becomes a grid
   item. Scoped to the team column (416c2474); page-specific because the team is not a
   single Elementor grid. Cards keep their own styling (the rule targets the wrappers,
   not the cards).

   Extended to MOBILE (<=767px) on 2026-07-16 — same root cause, different symptom.
   Stacked 1-up, the 5 groups' own 40px top + 40px bottom section padding fell BETWEEN
   cards, so every 3rd gap was 169px vs the normal 40px ("bigger gaps between headshots").
   On prod the cards were 3-across, so each group was a single row and that padding read
   as ordinary row spacing — invisible. Flattening dissolves the sections (display:contents
   generates no box, so their padding stops rendering) and every gap becomes uniform.
   Measured at 390px: was 40px within a group / 169px across; now a uniform 40px. */
@media (max-width: 999px) {
	.elementor-element-416c2474 > .elementor-widget-wrap {
		display: grid !important;
		align-items: start;
	}
	.elementor-element-416c2474 > .elementor-widget-wrap > section,
	.elementor-element-416c2474 > .elementor-widget-wrap > section > .elementor-container {
		display: contents !important;
	}
	/* Cards fill their grid cell. The doubled `.elementor-column.elementor-column`
	   raises specificity above the 2-up cap rule (col-33{width:50%}) — and above the
	   <=767px `.elementor-column{width:100%}` rule — so these don't render at half
	   (or double) their grid cell. */
	.elementor-element-416c2474 > .elementor-widget-wrap > section > .elementor-container > .elementor-column.elementor-column {
		width: auto !important;
		max-width: none !important;
		flex-basis: auto !important;
	}
}
/* Mobile: one column. gap:0 because the cards already carry 40px of internal spacing —
   a grid gap ADDS to it (gap:40px measured 80px between cards). gap:0 => uniform 40px,
   matching the correct spacing on the rest of the page. */
@media (max-width: 767px) {
	.elementor-element-416c2474 > .elementor-widget-wrap {
		grid-template-columns: 1fr !important;
		gap: 0;
	}
}
/* Tablet: two columns (unchanged). */
@media (min-width: 768px) and (max-width: 999px) {
	.elementor-element-416c2474 > .elementor-widget-wrap {
		grid-template-columns: 1fr 1fr !important;
		gap: 30px;
	}
}

/* C1  Home flip boxes — uneven vertical gaps in the 500–999px band (reported 2026-07-16).
   NOT a child-theme regression: production (no child theme) shows the identical defect
   today — verified [0, 40] gaps at 600px and 850px on fullcodemedical.com. Reported off
   staging, but it is a pre-existing authoring bug in the page.

   The three flip boxes live in a narrow (~400px) inner column and stack vertically at
   EVERY width — they are never 3-across, so a per-widget bottom margin that looks
   harmless in the editor lands directly between the cards.

   post-4632.css (author settings, Elementor "Margin" on the widget) contains:
     @media(max-width:999px)  #6b1e6ea9, #3ee49408 > .elementor-widget-container{margin:0 0 40px}
     @media(max-width:499px)  #6b1e6ea9, #3ee49408 > .elementor-widget-container{margin:0 0 0}
   and #45817f23 (the FIRST card) has no margin rule at all. So the 40px was applied to
   cards 2+3 but never card 1, and was zeroed at <=499 but not in the 500–999 band. Each
   card's own bottom margin becomes the gap BELOW it, giving 0 (card1) then 40 (card2).

   Measured gaps: <=499 => [20, 20] · 500–999 => [0, 40] · >=1000 => [20, 20].
   Only the middle band is wrong, so normalise just that band to the 20px its neighbours
   already use. Scoped to this section; >=1000 and <=499 are untouched.

   Proper fix is in Elementor (clear the tablet margin on 6b1e6ea9 / 3ee49408), but that
   is a DB-side page edit; doing it here keeps it with the theme and portable across
   environments, consistent with the rest of this file. */
@media (min-width: 500px) and (max-width: 999px) {
	.elementor-4632 .elementor-element.elementor-element-9032b2f .elementor-widget-flip-box > .elementor-widget-container {
		margin-bottom: 20px !important;
	}
}


/* B3  Organizations hero image overflow @360–375px. */

/* B4  Footer tap targets. The audit's 44px is the AAA target (WCAG 2.5.5); the REQUIRED
   level is AA (2.5.8 = 24px, or smaller with ≥24px spacing), which the native footer menu
   links (~22px + spacing) already meet. Forcing 44px min-height on the STACKED menu links
   looked bad (huge gaps — nobody spaces footer menus that way), so we leave the menu links
   alone. Only the SOCIAL icons (in a row, ~38px) get bumped to a 44px touch area — a clean
   win with no layout downside. Scoped to the footer, touch widths (≤1024px). */
@media (max-width: 1024px) {
	.elementor-location-footer a.elementor-social-icon {
		min-width: 44px !important;
		min-height: 44px !important;
	}
}