/**
 * Global Footer -- Phase 4C.
 *
 * ARCHITECTURE (audited before writing anything): the **Astra Custom
 * Footer Builder** (`#colophon.site-footer`) -- not Elementor, not custom
 * markup. Two independent builder rows:
 *   1. `.site-primary-footer-wrap` -- 4 equal columns
 *      (`site-footer-primary-section-1..4`), each a standard WordPress
 *      widget area (`footer-widget-area`):
 *        1. A Media/Image block widget (the logo -- untouched, per brief).
 *        2. An H6 block ("Links") + a Nav Menu widget (About/NAM GUIDE/
 *           TSC Rack/Contact) + a separate block with the "Act on
 *           Specified Commercial Transactions" link.
 *        3. An H6 block ("CATEGORIES") + WooCommerce's native Product
 *           Categories block (Plugins/Compressor/Preamp/EQ/Saturation &
 *           Tape).
 *        4. An H6 block ("Stay Updated") + a MailPoet subscribe form
 *           shortcode (`#mailpoet_form_1`).
 *      Confirmed live: `.site-primary-footer-wrap` background is already
 *      `rgb(0,0,0)` (genuinely black, kept per brief) -- BUT its three H6
 *      section headings ("Links"/"CATEGORIES"/"Stay Updated") compute to
 *      `color: rgb(0,0,0)` -- literally BLACK TEXT ON THE BLACK
 *      BACKGROUND, invisible. This is a pre-existing bug, not something
 *      introduced here -- confirmed via `getBoundingClientRect`/opacity/
 *      visibility all showing the element IS actually in the layout, just
 *      unreadable. Fixed below as part of the same typography pass the
 *      brief already asked for ("clearer hierarchy").
 *   2. `.site-below-footer-wrap` -- a SEPARATE, but still native Astra
 *      Footer Builder, row: copyright text (section 1) + social icons
 *      (section 2). Confirmed live: background `rgb(241,242,242)` -- the
 *      same pale gray the Reviews cards used, unrelated to the dark
 *      footer above it, confirming the brief's "feels disconnected"
 *      description. Because this is a genuine, structurally-independent
 *      Astra builder row (not a fragile hack), integrating it into the
 *      dark footer is a safe, ordinary CSS background/color change -- no
 *      structural risk, no template override needed.
 *
 * Newsletter: MailPoet's own form config already sets the Subscribe
 * button's colors via INLINE styles on the `<input>` itself
 * (`background-color:#c19a83` -- the TSC accent tan -- `border-
 * color:#313131`) -- confirmed live, someone already configured this in
 * the MailPoet form builder UI, not this theme. Left alone entirely per
 * the brief ("do not change subscription logic or form submission
 * behavior") -- only spacing/font-family/input-field styling is touched
 * here, and only via `!important` where an inline style must be
 * overridden (evidenced above, same standard used throughout this
 * project), never by touching the form's own saved configuration.
 *
 * Copyright text ("Copyright © 2026 Tokyo Studio Capture (TSC): NAM
 * Profiles and Impulse Responses"): confirmed live to come from Astra's
 * own Footer Builder "Copyright" element (`data-section="section-footer-
 * builder"`) -- this text is a CUSTOMIZER SETTING (Appearance > Customize
 * > Footer Builder > the copyright bar element's own text field, exact
 * path may vary slightly by Astra version), not a string in any theme
 * file, not post content. NOT changed here -- per the brief's own
 * instruction not to auto-change copy stored in a global/footer setting.
 * Recommend simplifying to "Copyright © 2026 Tokyo Studio Capture" (or
 * similar) directly in that Customizer field -- future-proof against the
 * "NAM Profiles and Impulse Responses"-only framing now that TSC also
 * develops Audio Software, and safer to edit there than to intercept/
 * rewrite via a PHP string-replace filter for what is fundamentally an
 * editorial/brand decision, not a bug.
 */

/* ============================================================
 * 1. PRIMARY FOOTER -- typography + hierarchy
 * ============================================================
 */
.site-primary-footer-wrap .widget-title,
.site-primary-footer-wrap h6.wp-block-heading {
	margin: 0 0 var(--tsc-space-4);
	font-family: var(--tsc-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsc-text-muted); /* FIX: was literally rgb(0,0,0) -- invisible against this row's real black background. */
}

.site-primary-footer-wrap .menu-link,
.site-primary-footer-wrap .wc-block-product-categories-list-item__name,
.site-primary-footer-wrap .wc-block-product-categories-list-item-count,
.site-primary-footer-wrap section a:not(.mailpoet_submit) {
	font-family: var(--tsc-font-body);
	font-size: 0.9375rem;
	color: var(--tsc-text-muted);
	text-decoration: none;
}

.site-primary-footer-wrap .menu-link:hover,
.site-primary-footer-wrap .menu-link:focus-visible,
.site-primary-footer-wrap .wc-block-product-categories-list-item__name:hover,
.site-primary-footer-wrap section a:not(.mailpoet_submit):hover {
	color: var(--tsc-text);
}

.site-primary-footer-wrap .menu-item {
	margin-bottom: var(--tsc-space-2);
}

.site-primary-footer-wrap .wc-block-product-categories-list-item {
	margin-bottom: var(--tsc-space-2);
}

/* ============================================================
 * 2. NEWSLETTER -- restyle only heading/input/spacing, not MailPoet's
 *    own saved button color/behavior (see header comment).
 * ============================================================
 */
#mailpoet_form_1 .mailpoet_text {
	font-family: var(--tsc-font-body) !important; /* MailPoet's own generated per-field <style> block sets this at matching specificity -- evidenced exception, same standard as elsewhere in this project. */
	border: 1px solid var(--tsc-border-light) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--tsc-surface-light) !important;
}

#mailpoet_form_1 .mailpoet_text::placeholder {
	color: var(--tsc-text-muted);
	opacity: 1;
}

#mailpoet_form_1 .mailpoet_submit {
	font-family: var(--tsc-font-body) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-top: var(--tsc-space-3) !important;
}

/* ============================================================
 * 3. BELOW-FOOTER ROW -- integrate into the dark footer
 * ============================================================
 * Genuine, independent Astra Footer Builder row (see header comment) --
 * safe to restyle directly, no structural change.
 */
.site-below-footer-wrap {
	background-color: var(--tsc-bg) !important; /* Astra's own dynamic Customizer CSS sets this row's background at matching specificity -- evidenced exception, same standard as elsewhere in this project. */
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--tsc-space-5);
	padding-bottom: var(--tsc-space-5);
}

.ast-footer-copyright,
.ast-footer-copyright p {
	font-family: var(--tsc-font-body);
	font-size: 0.8125rem;
	color: var(--tsc-text-muted) !important; /* same Astra dynamic-CSS specificity conflict as the row background above. */
}

.site-footer-below-section-2 {
	display: flex;
	justify-content: flex-end;
}

@media (max-width: 767px) {
	.site-footer-below-section-2 {
		justify-content: flex-start;
		margin-top: var(--tsc-space-3);
	}
}

/* ============================================================
 * 4. LEGAL LINK -- de-emphasize -- Phase 4C.1, RELOCATED Phase 4C.2
 * ============================================================
 * "Act on Specified Commercial Transactions" is its own separate widget
 * area (`<aside data-section="sidebar-widgets-footer-widget-5">`) --
 * originally stacked below the Links nav menu in the Primary Footer
 * (`.site-footer-primary-section-2`); manually moved via the Astra
 * Footer Builder (Customizer, not this file) into the Below Footer row's
 * left column, directly below Copyright. RE-AUDITED live after that move
 * (cache-busted fetch, since a first check hit a stale cached page and
 * briefly looked like the move hadn't taken effect -- it had): the
 * widget's own internal markup, classes, and `data-section` attribute are
 * byte-identical to before, only its ANCESTOR changed, from
 * `.site-footer-primary-section-2` to `.site-footer-below-section-1`
 * (confirmed live, sitting alongside `.ast-footer-copyright` in that same
 * column). Selector updated accordingly -- this is the only change this
 * pass; no HTML/PHP, no Footer Builder structure touched.
 *
 * `!important` on `color` only (evidenced, not habitual -- same standard
 * used throughout this project): live-confirmed Astra's own dynamic
 * Customizer CSS carries a same-context rule, `.footer-widget-area[data-
 * section="sidebar-widgets-footer-widget-5"].footer-widget-area-inner a
 * { color: var(--ast-global-color-5) }` -- position-independent (keys off
 * the widget area's own attributes, not its ancestor column), so it kept
 * applying unchanged after the move and still needs overriding.
 */
.site-footer-below-section-1 [data-section="sidebar-widgets-footer-widget-5"] a {
	display: inline-block;
	margin-top: var(--tsc-space-2);
	font-family: var(--tsc-font-body); /* FIX: this rule never set font-family at all (every other footer rule in this file does) -- confirmed live it was inheriting the sitewide default Oswald all the way up from <body>, since typography.css (which normally sets Inter) explicitly excludes the homepage, same established exclusion already relied on elsewhere in this file. */
	font-size: 0.75rem;
	color: var(--tsc-text-muted) !important;
}

.site-footer-below-section-1 [data-section="sidebar-widgets-footer-widget-5"] a:hover,
.site-footer-below-section-1 [data-section="sidebar-widgets-footer-widget-5"] a:focus-visible {
	color: var(--tsc-text) !important;
}

/* ============================================================
 * 5. SOCIAL ICONS -- lighten -- Phase 4C.1
 * ============================================================
 * Root cause (audited, not guessed): the icon SVGs (`.footer-social-item
 * svg`) have no `fill` set anywhere -- confirmed live, no matching CSS
 * rule exists for `fill`/`color` on this selector at all -- so they were
 * rendering at the browser's own SVG default (`fill: black`), nearly
 * invisible against the dark footer. The per-icon inline `--color`/
 * `--background-color` custom properties (Astra's own brand-color
 * settings, e.g. `#1B64F6`) are NOT actually consumed by anything here --
 * confirmed live via computed style -- so overriding `fill` directly is
 * the correct, narrowly-scoped fix, not a specificity fight against an
 * inline value.
 *
 * `color-mix()` blends the two closest EXISTING dark-context tokens
 * (`--tsc-text-muted`, used by Copyright right above/beside these icons,
 * and `--tsc-text`) rather than inventing a new hardcoded color -- "use an
 * existing TSC token where possible" with a real, if partial, constraint:
 * neither token alone is "slightly brighter than Copyright" on its own.
 * Same `color-mix()` technique already used elsewhere in this project
 * (shop-by-category.css). Hover/focus moves further toward `--tsc-text`
 * (still not pure white) for a genuinely brighter but still restrained
 * active state.
 */
.footer-social-item svg {
	fill: color-mix(in srgb, var(--tsc-text-muted) 65%, var(--tsc-text) 35%);
}

.footer-social-item:hover svg,
.footer-social-item:focus-visible svg {
	fill: color-mix(in srgb, var(--tsc-text-muted) 20%, var(--tsc-text) 80%);
}

/* ============================================================
 * 6. NEWSLETTER -- mobile heading alignment -- Phase 4C.1
 * ============================================================
 * Root cause (audited, not guessed): Astra's approved mobile "centered
 * navigation" treatment sets `text-align: center` on `.footer-widget-area`
 * (confirmed live via an ancestor-chain walk -- the `<aside>` widget-area
 * wrapper itself carries the centered value, which normally inherited
 * text-align cascades down into), active below 768px (confirmed live: still
 * "left" at 768px, "center" at 544px). MailPoet's own generated `<style>`
 * block already sets `#mailpoet_form_1 { text-align: left }` directly on
 * the form, which is why the email field/button were ALREADY correctly
 * left-aligned -- but the "Stay Updated" H6 is a separate sibling widget
 * block outside that form, with no such override, so it stayed centered
 * while the form beside it did not.
 *
 * Fixed by left-aligning ONLY this one column's heading at the same
 * breakpoint -- every other column's approved centered treatment (Links,
 * CATEGORIES) is untouched, and desktop is unaffected (already
 * `text-align: left` there natively, confirmed live at 1440/1024/768).
 */
@media (max-width: 767px) {
	.site-footer-primary-section-4 h6.wp-block-heading {
		text-align: left;
	}
}

/* ============================================================
 * 7. PRIMARY FOOTER -- consistent left alignment on mobile
 * ============================================================
 * Root cause (audited, not guessed): ALL FOUR `.footer-widget-area`
 * columns compute `text-align: center` below 768px -- Astra's own approved
 * mobile "centered navigation" treatment (same mechanism documented in
 * section 6 above, confirmed live via getComputedStyle on each column).
 * Live-confirmed this cascades by plain inheritance into the LINKS nav
 * list and the CATEGORIES product list (both `display:block`, no flex/
 * justify-content involved) -- so overriding the one ancestor property
 * fixes the heading AND the list together, no separate list-level rule
 * needed.
 *
 * The logo (section 1) and the newsletter form (section 4) were NOT
 * visibly centered despite carrying the same inherited value -- the logo
 * is a block-level <figure>, which `text-align: center` has no visual
 * effect on; the newsletter form has its own separate `text-align: left`
 * from MailPoet's own generated <style> block (see section 2 above). That
 * is exactly the "accidental" left/center/left rhythm reported: two
 * columns were only ever left by structural coincidence, not by design,
 * while Links/Categories genuinely centered.
 *
 * Fixed at the ancestor level, uniformly, for the whole primary footer
 * row -- simpler and more consistent than a per-section patch, and
 * harmless where a column was already effectively left (a redundant
 * `text-align: left` changes nothing there). Scoped to
 * `.site-primary-footer-wrap` and the existing 767px breakpoint used
 * throughout this file -- desktop (already `text-align: left` natively,
 * per section 6's own audit) is untouched.
 *
 * `!important` (evidenced, not habitual -- same standard used throughout
 * this file): a plain override here computed back to `center` live --
 * confirmed via a direct before/after toggle that only `!important` wins,
 * consistent with every other Astra dynamic-Customizer-CSS conflict
 * already documented in this file.
 */
@media (max-width: 767px) {
	.site-primary-footer-wrap .footer-widget-area {
		text-align: left !important;
	}
}