/**
 * Shared static-page system for Tokyo Studio Capture -- Phase 5B.
 *
 * SCOPE: TSC Rack (body.page-id-3964), About (body.page-id-59), NAM Guide
 * (body.page-id-3987), Contact (body.page-id-61). All four are Elementor
 * `ast-page-builder-template` pages with no dedicated CSS of their own
 * before this file -- confirmed via the Phase 5A/5B live DOM audits.
 *
 * ARCHITECTURE: one shared stylesheet, not four page files, per the Phase
 * 5A decision -- the four pages are different enough in content that most
 * rules are still scoped per page-ID, but the utility classes (prose/
 * medium-width, eyebrow, CTA button, subtle divider, callout, policy
 * demotion) are shared, unscoped `tsc-static-*` classes so the same visual
 * language is reused rather than four near-duplicate rule sets. These
 * classes are added MANUALLY in the Elementor editor (Advanced -> CSS
 * Classes) per the exact instructions given alongside this file -- this
 * stylesheet does nothing on its own until those classes exist in the
 * page's saved markup.
 *
 * `typography.css` already applies Inter (font-family only) to all four
 * pages -- confirmed live, not excluded like the homepage/checkout are.
 * Heading SIZES are intentionally left to Astra's own existing per-level
 * H1-H6 Customizer output (same reasoning typography.css itself documents)
 * -- retagging a heading (H1 -> H2, H1 -> H3) in Elementor is what changes
 * its visual size, not a rule in this file, so hierarchy fixes on TSC Rack/
 * NAM Guide are manual Elementor edits, not CSS.
 */

/* ============================================================
 * 1. SHARED UTILITY CLASSES
 * ============================================================ */

/* Narrow reading column -- About body text, NAM Guide sections.
 *
 * SPECIFICITY FIX (Phase 5C follow-up): live-traced via el.matches() against
 * every stylesheet rule declaring max-width -- Elementor's own core
 * frontend.min.css carries:
 *   .e-con.e-con > .e-con-inner > .elementor-widget,
 *   .elementor.elementor .e-con > .elementor-widget { max-width: 100%; }
 * Both halves of that selector resolve to specificity (0,4,0) (4 class
 * selectors each). A single bare `.tsc-static-prose` class is (0,1,0) and
 * can never beat that, regardless of stylesheet load order -- confirmed
 * live: 3 widgets that already carried the class were still computing
 * max-width:100%. This only affects bare Elementor WIDGETS
 * (`.elementor-widget`, e.g. Text Editor) -- Elementor does not apply that
 * rule to Containers (`.e-con`) themselves, which is why the same class
 * already worked correctly when placed on a Container (About's Story
 * section). Fixed by repeating the class selector 5 times on the max-width
 * declaration only: 5 class selectors = specificity (0,5,0), which beats
 * (0,4,0) cleanly by the cascade's own rules -- no !important, no ID, no
 * nth-child, and it changes nothing about which elements the class
 * matches. Applies equally whether the class sits on a widget or a
 * Container, so no separate rule is needed for either case.
 */
.tsc-static-prose {
	margin-left: auto;
	margin-right: auto;
}

.tsc-static-prose.tsc-static-prose.tsc-static-prose.tsc-static-prose.tsc-static-prose {
	max-width: var(--tsc-content-width-narrow);
}

/* Medium width -- TSC Rack Overview/Feature Highlights/Technical sections. */
.tsc-static-medium {
	max-width: var(--tsc-content-width-medium);
	margin-left: auto;
	margin-right: auto;
}

/* Consistent section vertical rhythm, used where a section currently relies
   on inconsistent/ad-hoc spacing (Elementor default container padding is
   left alone everywhere this class is not explicitly added). */
.tsc-static-section {
	padding-top: var(--tsc-space-8);
	padding-bottom: var(--tsc-space-8);
}

/* Small uppercase muted label -- reuses the H6-as-eyebrow pattern already
   authored into the About page content; this class only needs adding where
   a NEW eyebrow is introduced (TSC Rack hero), not where one already
   renders correctly via Astra's own H6 styling. */
.tsc-static-eyebrow {
	display: block;
	margin-bottom: var(--tsc-space-3);
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsc-text-muted-light);
}

/* Restrained CTA button -- same flat/square/Inter language as the
   sitewide .elementor-button convention in hero.css (dark fill at rest,
   accent fill on hover/focus), reused here rather than inventing a new
   button style. Lands on the widget wrapper Elementor already renders. */
.tsc-static-cta .elementor-button {
	display: inline-block;
	padding: var(--tsc-space-4) var(--tsc-space-5);
	border: 0;
	border-radius: 0;
	font-family: var(--tsc-font-body);
	font-size: var(--tsc-fs-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsc-text);
	background-color: var(--tsc-text-light);
}

@media (prefers-reduced-motion: no-preference) {
	.tsc-static-cta .elementor-button {
		transition: background-color 160ms ease, color 160ms ease;
	}
}

.tsc-static-cta .elementor-button:hover,
.tsc-static-cta .elementor-button:focus-visible {
	background-color: var(--tsc-accent);
	color: var(--tsc-text-on-accent);
}

.tsc-static-cta .elementor-button:focus-visible {
	outline: 2px solid var(--tsc-accent);
	outline-offset: 2px;
}

/* CORRECTIVE PASS (Phase 5B): live-audited on TSC Rack's hero CTA -- the
   pre-existing heading widgets above it center via `text-align:center` set
   at the widget-container level (Elementor's own per-widget Alignment
   control). A new Button widget defaults that control to Left/unset
   (confirmed live: .elementor-button-wrapper computed `text-align:start`),
   so it rendered flush left instead of matching the heading above it. Fixed
   here rather than via an Elementor edit -- forces the same centered
   behavior regardless of the widget's own Alignment setting. Scoped to
   .tsc-static-cta only, so the global .elementor-button convention used
   elsewhere (hero.css, homepage-reviews.css) is untouched. */
.tsc-static-cta .elementor-button-wrapper {
	text-align: center;
}

/* Phase 5C: consistent breathing room above every use of this CTA
   component. About's Contact CTA (elementor-element-96b7e32) sits
   immediately after the Policy text with 0px margin between them
   (live-confirmed) -- close enough to read as visually attached to
   whatever precedes it. Applied at the shared class level, not page-
   scoped, since the same spacing is equally correct above TSC Rack's hero
   and closing CTAs. */
.tsc-static-cta {
	margin-top: var(--tsc-space-7);
}

/* Larger variant for the one true "final purchase" CTA (TSC Rack closing
   button) -- same shape/color language, more visual weight. */
.tsc-static-cta--large .elementor-button {
	padding: var(--tsc-space-5) var(--tsc-space-6);
	font-size: 1.0625rem;
}

/* Subtle divider -- replaces Elementor's default divider-widget look
   (heavier line, larger default margin) with a thin, quiet rule matching
   --tsc-border-light. Used on NAM Guide's 10 existing divider widgets so
   they stop reading as decorative clutter, without deleting any of them. */
.tsc-static-divider-subtle .elementor-divider-separator {
	border-top-width: 1px;
	border-top-color: var(--tsc-border-light);
}

.tsc-static-divider-subtle {
	margin-top: var(--tsc-space-6) !important; /* Elementor sets this widget's own spacing via an inline/generated rule at the same specificity as a plain class selector -- same evidenced-exception pattern used in homepage-reviews.css. */
	margin-bottom: var(--tsc-space-6) !important;
}

/* Restrained note/callout box -- ONE reusable treatment, used only where
   content is already explicitly emphasized in the source (NAM Guide's "We
   highly recommend using TSC Rack" heading+paragraph). No new copy, no
   icon, no color beyond existing tokens. */
.tsc-static-callout {
	padding: var(--tsc-space-6);
	border: 1px solid var(--tsc-border-light);
	border-left: 3px solid var(--tsc-accent);
	background-color: var(--tsc-bg-light);
}

.tsc-static-callout h1,
.tsc-static-callout h2,
.tsc-static-callout h3,
.tsc-static-callout h4 {
	margin-top: 0;
}

.tsc-static-callout > *:last-child {
	margin-bottom: 0;
}

/* Policy demotion -- About's Delivery & Refund Policy. Smaller heading
   scale, muted body color, narrower measure -- visually secondary to the
   Approach/Story editorial core without hiding or removing anything.
 *
 * Carries the same max-width specificity fix as .tsc-static-prose above --
 * live-confirmed this class has the identical bug (its own independent
 * max-width declaration at (0,1,0), losing to Elementor core's (0,4,0)
 * .elementor-widget rule). Same fix, same reasoning. */
.tsc-static-policy {
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--tsc-space-7);
	border-top: 1px solid var(--tsc-border-light);
	color: var(--tsc-text-muted-light);
}

.tsc-static-policy.tsc-static-policy.tsc-static-policy.tsc-static-policy.tsc-static-policy {
	max-width: var(--tsc-content-width-narrow);
}

.tsc-static-policy h2 {
	font-size: 1.25rem;
	letter-spacing: 0.01em;
}

.tsc-static-policy p {
	font-size: 0.9375rem;
	color: var(--tsc-text-muted-light);
}

/* ============================================================
 * 2. TSC RACK -- Feature Highlights modular grid (body.page-id-3964)
 * ============================================================
 * CORRECTIVE PASS (Phase 5B): the original design here was a 2-column CSS
 * Grid (text | image side by side). Live-audited after upload: each
 * feature's widgets do NOT have a uniform, predictable count/order --
 * live-confirmed child counts of 2, 3, and 4 per item, and one item
 * (True Stereo Support) has its Text Editor widget positioned BEFORE its
 * own heading in source order. A 2-column grid with no explicit
 * grid-template-areas auto-places children left-to-right/top-to-bottom, so
 * this non-uniform input produced checkerboarded/reversed pairs and, for
 * the 3-child item, a dead empty grid cell -- exactly the "existing
 * Elementor children make the grid brittle" case. Switched to a single-
 * column stacked row: heading, then whatever follows it in source order
 * (text, divider, image), all full-width and top-to-bottom. This is
 * correct regardless of how many widgets a feature has or what order they
 * were authored in -- durable for TSC Rack 2.0's eventual feature swap,
 * per the brief. Still editorial, not a card: no background/shadow/radius,
 * only the thin top/bottom border separating rows.
 */
body.page-id-3964 .tsc-feature-grid {
	display: flex;
	flex-direction: column;
	max-width: var(--tsc-content-width-medium);
	margin-left: auto;
	margin-right: auto;
}

body.page-id-3964 .tsc-feature-item {
	display: flex;
	flex-direction: column;
	max-width: var(--tsc-content-width-medium);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--tsc-space-7);
	padding-bottom: var(--tsc-space-7);
	border-top: 1px solid var(--tsc-border-light);
}

body.page-id-3964 .tsc-feature-item:last-child {
	border-bottom: 1px solid var(--tsc-border-light);
}

body.page-id-3964 .tsc-feature-item h3 {
	margin-top: 0;
}

body.page-id-3964 .tsc-feature-item img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	body.page-id-3964 .tsc-feature-item {
		padding-top: var(--tsc-space-6);
		padding-bottom: var(--tsc-space-6);
	}
}

/* ============================================================
 * 3. ABOUT (body.page-id-59)
 * ============================================================
 * CORRECTIVE PASS (Phase 5B): live-audited the "collapsed to a few
 * characters" regression reported after `tsc-static-prose` was added to
 * the Story/Policy container (elementor-element-9c8acf4). Root cause,
 * confirmed via the live post-59.css generated stylesheet: two widgets
 * inside that container -- the Story body text (elementor-element-da8b21f)
 * and the Policy body text (elementor-element-15127da) -- each carry a
 * PRE-EXISTING Elementor-authored padding of 350px left/350px right
 * (0px 350px 50px 350px), unrelated to this phase's work. That padding was
 * invisible while the container was ~1340-1440px wide (700px of it just
 * ate into generous surrounding whitespace); once tsc-static-prose capped
 * the same container to 760px, the same fixed 700px of horizontal padding
 * left only ~60px for the actual paragraph, causing the severe wrap. Reset
 * directly on these two known-affected widgets rather than broadening
 * `.tsc-static-prose` itself to strip padding from every descendant
 * sitewide (smaller, more targeted correction).
 */
body.page-id-59 .elementor-element-da8b21f > .elementor-widget-container,
body.page-id-59 .elementor-element-15127da > .elementor-widget-container {
	padding: 0 !important; /* Overrides Elementor's own per-widget generated padding rule at matching specificity -- same evidenced-exception pattern used elsewhere in this project. */
}

/* The "Our Approach" container (elementor-element-5ddd59b) has its OWN
   genuine, deliberate Elementor "boxed" content-width of 940px containing
   a real 2-column layout (two 50%-width children). tsc-static-prose's
   760px cap was squeezing those two columns down to 380px each -- not a
   padding bug, a real architecture conflict. See section E of this pass's
   report: `tsc-static-prose` should be REMOVED from elementor-element-
   5ddd59b in the Elementor editor (not fixed here in CSS) -- at its native
   940px width the existing 2-column layout already reads fine unconstrained. */

/* ============================================================
 * 4. NAM GUIDE (body.page-id-3987)
 * ============================================================
 * Shared .tsc-static-prose/.tsc-static-divider-subtle/.tsc-static-callout
 * classes (section 1) cover this page entirely -- nothing NAM-Guide-
 * specific beyond that was needed.
 */

/* ============================================================
 * 5. CONTACT (body.page-id-61)
 * ============================================================
 * No manual Elementor edit needed here -- both fixes are pure CSS against
 * already-stable selectors (a persistent elementor-element ID for the H1,
 * and WPForms' own class-based field/textarea selectors).
 *
 * H1 SIZE: live-measured (1440px) at font-size:65px / line-height:91px --
 * Astra's default oversized/uppercase H1 treatment. Reduced to a size
 * consistent with the smaller H2-level headings used as intros elsewhere
 * on these four pages, since "CONTACT" is a one-word page title, not a
 * hero headline.
 */
body.page-id-61 .elementor-element-811f157 h1 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: var(--tsc-lh-heading);
}

/* FORM FIELD RADIUS: live-confirmed no inline styles exist on these
   elements (class-based only), current computed border-radius: 2px on all
   three fields. Submit button already border-radius: 0 / accent tan --
   untouched, per the brief. */
body.page-id-61 .wpforms-field-large,
body.page-id-61 .wpforms-field-medium {
	border-radius: 0 !important; /* WPForms sets radius via its own generated per-form CSS at matching specificity -- same evidenced-exception pattern used elsewhere in this project (homepage-reviews.css, footer.css). */
}