/*
Theme Name: SavoiaTV Child
Theme URI:
Description: Presentation-only child theme for SavoiaTV, built on GeneratePress. Establishes the broadcast/network visual foundation and provides the single Movie template. All content structure (custom post types, taxonomies, and fields) is owned by Advanced Custom Fields PRO and other plugins; this theme registers none of them.
Author: SavoiaTV
Author URI:
Template: generatepress
Version: 0.6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: savoiatv-child
*/

/* ============================================================
   SavoiaTV design tokens
   ------------------------------------------------------------
   Every major color, spacing value, radius, and layout width is
   defined here as a CSS custom property. Change a value once and
   it updates everywhere the token is used. Nothing below this
   block should hard-code a color or spacing value.
   ============================================================ */
:root {
    /* --- Core surfaces (black-dominant) --- */
    --stv-color-bg:            #08090b; /* page background */
    --stv-color-bg-elevated:   #111318;
    --stv-color-surface:       #171a20; /* cards / panels */
    --stv-color-surface-2:     #1f232b; /* raised panels */
    --stv-color-border:        rgba(255, 255, 255, 0.08);
    --stv-color-border-strong: rgba(255, 255, 255, 0.16);

    /* --- Text --- */
    --stv-color-text:    #f2f4f7; /* body text */
    --stv-color-heading: #ffffff; /* headings */
    --stv-color-muted:   #9aa3ad; /* secondary / labels */
    --stv-color-silver:  #c7ccd2; /* supporting light-gray */

    /* --- Blue accents --- */
    --stv-color-blue:       #1e73ff; /* primary accent */
    --stv-color-blue-hover: #3f8bff; /* hover / focus */
    --stv-color-blue-ink:   #ffffff; /* text on blue */

    /* --- Warm gold secondary accent (restrained, classic-entertainment) --- */
    /* Blue remains the primary interactive color; gold is for small accents,
       decorative rules, labels, featured indicators, and secondary emphasis. */
    --stv-color-gold:      #d6a63c; /* ~8.9:1 on the near-black bg */
    --stv-color-gold-soft: rgba(214, 166, 60, 0.35); /* subtle rules/borders */

    /* --- Typography --- */
    --stv-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --stv-font-size-meta: 0.95rem;

    /* --- Spacing scale --- */
    --stv-space-xs: 0.4rem;
    --stv-space-sm: 0.75rem;
    --stv-space-md: 1.25rem;
    --stv-space-lg: 2rem;
    --stv-space-xl: 3rem;

    /* --- Radii --- */
    --stv-radius:    10px;
    --stv-radius-sm: 6px;

    /* --- Layout --- */
    --stv-poster-col: 35%; /* desktop poster column width  */
    --stv-info-col:   65%; /* desktop info column width    */
    --stv-gap:        2.5rem;
    --stv-stack-breakpoint: 860px; /* documented reference; media queries use the literal value */

    /* --- Shell (header / navigation / footer) --- */
    /* Semantic aliases of the palette above — no new colors are introduced. */
    --stv-header-bg:       var(--stv-color-bg-elevated);
    --stv-footer-bg:       var(--stv-color-bg-elevated);
    --stv-nav-bg:          var(--stv-color-bg-elevated);
    --stv-nav-link:        var(--stv-color-silver);
    --stv-nav-link-active: var(--stv-color-heading);
    --stv-nav-accent:      var(--stv-color-blue);
}

/* ============================================================
   Foundation — broadcast / network base look
   ------------------------------------------------------------
   Intentionally light-touch: color and typography only, so that
   GeneratePress keeps full control of layout, widths, header,
   navigation, sidebars, and footer. Heavier styling lives in
   component stylesheets (e.g. assets/css/single.css).
   ============================================================ */
body {
    background-color: var(--stv-color-bg);
    color: var(--stv-color-text);
    font-family: var(--stv-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--stv-color-heading);
}

a {
    color: var(--stv-color-blue);
}

a:hover,
a:focus {
    color: var(--stv-color-blue-hover);
}

/* Visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.stv-btn:focus-visible {
    outline: 2px solid var(--stv-color-blue-hover);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   SavoiaTV widget areas
   ------------------------------------------------------------
   Styling for the theme's registered widget areas. The PHP only
   prints the wrapper when an area actually contains widgets, so
   these rules never create empty spacing on their own. Loaded
   site-wide (the footer area can appear on any page).
   ============================================================ */
.stv-widget-area {
	margin: var(--stv-space-lg) 0;
}

.stv-widget-area--above-content {
	margin-top: 0;
}

.stv-widget-area--below-details {
	margin-top: var(--stv-space-lg);
	padding-top: var(--stv-space-lg);
	border-top: 1px solid var(--stv-color-border);
}

.stv-widget-area--footer {
	margin: 0;
	padding: var(--stv-space-lg) 0;
	border-top: 1px solid var(--stv-color-border);
}

/* Individual widgets inside SavoiaTV areas */
.stv-widget {
	margin-bottom: var(--stv-space-md);
	color: var(--stv-color-text);
}

.stv-widget:last-child {
	margin-bottom: 0;
}

.stv-widget__title {
	margin: 0 0 var(--stv-space-sm);
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stv-color-silver);
}

.stv-widget a {
	color: var(--stv-color-blue);
}

.stv-widget a:hover,
.stv-widget a:focus {
	color: var(--stv-color-blue-hover);
}

/* Responsive: let multi-widget areas flow into columns on wider screens.
   The track minimum uses min(220px, 100%) so a column can never be wider than
   its container (prevents grid blow-out / horizontal overflow on narrow
   screens). On desktop the container is always wider than 220px, so this is
   identical to the previous 220px minimum. */
@media (min-width: 768px) {
	.stv-widget-area--footer {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
		gap: var(--stv-space-lg);
	}

	.stv-widget-area--footer .stv-widget {
		margin-bottom: 0;
	}
}

/* ============================================================
   Footer responsive hardening (v0.3.3)
   ------------------------------------------------------------
   Makes the existing footer fit within the viewport on phones and
   tablets — no redesign, no wording/colour/branding changes.
   Covers the SavoiaTV footer widget area and, defensively, the
   GeneratePress site-footer wrappers (child CSS only; no parent
   files are touched). Every rule here is a no-op on desktop except
   the mobile-only horizontal padding, so the approved desktop
   footer is unchanged.
   ============================================================ */

/* box-sizing: border-box (GeneratePress already sets this globally;
   restated here per the responsive requirement). */
.site-footer,
.site-footer *,
.stv-widget-area--footer,
.stv-widget-area--footer * {
	box-sizing: border-box;
}

/* Outer footer wrappers must never exceed the viewport width. The constrained
   inner wrappers are intentionally excluded here so their GeneratePress desktop
   max-width is preserved; they are made fluid via width:100% in the v0.3.4
   block below. */
.site-footer,
.footer-widgets,
.site-info,
.stv-widget-area--footer {
	max-width: 100%;
}

/* Content and long links/URLs wrap naturally instead of overflowing,
   and are never pinned to a single non-wrapping line. */
.site-footer,
.site-footer .inside-site-info,
.site-footer .site-info,
.stv-widget-area--footer {
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
}

/* Media in the footer scales to the available width. */
.site-footer img,
.stv-widget-area--footer img {
	max-width: 100%;
	height: auto;
}

/* Phone/tablet: comfortable horizontal padding so footer content isn't
   flush against the viewport edge. Scoped to <=768px so the desktop
   footer spacing is left exactly as approved. */
@media (max-width: 768px) {
	.stv-widget-area--footer {
		padding-left: var(--stv-space-md);
		padding-right: var(--stv-space-md);
	}
}

/* ============================================================
   Footer fluid-width fix (v0.3.4)
   ------------------------------------------------------------
   Root cause: the footer's inner flex/grid containers held their
   intrinsic (min-content) width and would not shrink with the
   viewport, because flex/grid items default to min-width:auto and
   the footer row did not wrap. That is a container-WIDTH problem,
   not a text-wrapping one, so the v0.3.3 wrapping/max-width rules
   did not release it.

   Fix: let the footer containers and their items shrink
   (min-width:0), let a flex footer row wrap, and make the
   constrained inner wrapper fluid (width:100%) while leaving its
   existing GeneratePress desktop max-width untouched (so the
   desktop maximum width is preserved and it becomes fluid only
   below that). No overflow is hidden; no parent-theme files are
   changed. Applies site-wide (footer is site-wide).
   ============================================================ */

/* Allow footer containers and their direct children to shrink below their
   content's intrinsic width — this is what releases the frozen desktop width.
   On desktop, where content already fits, this changes nothing visible. */
.site-footer,
.site-info,
.footer-widgets,
.inside-footer-widgets,
.inside-site-info,
.stv-widget-area--footer,
.site-footer > *,
.site-info > *,
.inside-site-info > *,
.footer-widgets > *,
.inside-footer-widgets > *,
.stv-widget-area--footer > * {
	min-width: 0;
}

/* If a footer wrapper is a flex row, let it wrap rather than hold a fixed
   intrinsic width. No effect when the wrapper is not display:flex, and no
   effect on desktop when the items already fit on one line. */
.site-info,
.inside-site-info,
.footer-widgets,
.inside-footer-widgets {
	flex-wrap: wrap;
}

/* Constrained inner wrappers (GeneratePress .grid-container / .inside-site-info
   / .inside-footer-widgets) become fluid below their max-width. Their existing
   desktop max-width is deliberately NOT set here, so it is preserved; width:100%
   simply lets them fill and shrink with the viewport under that cap. */
.inside-site-info,
.inside-footer-widgets,
.site-info > .grid-container,
.footer-widgets > .grid-container {
	width: 100%;
	box-sizing: border-box;
}