/*
Theme Name:   SciFi2Go - Child
Theme URI:    https://scifi2go.com/
Description:  Brand-accurate child theme of GeneratePress for SciFi2Go. Block-based, accessibility-validated, performance-budgeted. Design system: docs/BRAND.md §7. Tokens: assets/css/brand.css.
Author:       SciFi2Go
Author URI:   https://scifi2go.com/about/
Template:     generatepress
Version:      1.9.2
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:  scifigo-child
Tags:         accessibility-ready, block-patterns, custom-colors, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   SciFi2Go child theme styles
   Depends on: assets/css/brand.css (tokens)
   Rule: never hard-code a brand value here - use var(--s2g-*)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Self-hosted Roboto variable (Latin). Covers weights 300-700 in one 43 KB file.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Roboto";
	src: url("assets/fonts/roboto-latin-variable.woff2") format("woff2-variations"),
	     url("assets/fonts/roboto-latin-variable.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Base - typography per the brand manual, exact scale
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--s2g-font);
}

body {
	font-size: var(--s2g-body);
	line-height: var(--s2g-lh-body);
	font-weight: 400;
	color: var(--s2g-text);
	background-color: var(--s2g-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

p { margin: 0 0 var(--s2g-space-6); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Headings - the manual's exact scale. Fluid below 768px so H1-H3 never
   overflow on a 360px screen. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--s2g-font);
	color: var(--s2g-text);
	margin: 0 0 var(--s2g-space-4);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1, .h1 { font-size: 2rem;     line-height: 2.375rem; font-weight: 700; }
h2, .h2 { font-size: 1.75rem;  line-height: 2.125rem; font-weight: 500; }
h3, .h3 { font-size: 1.375rem; line-height: 1.75rem;  font-weight: 500; }
h4, .h4 { font-size: 1.125rem; line-height: 1.5rem;   font-weight: 500; }
h5, .h5 { font-size: 1rem;     line-height: 1.5rem;   font-weight: 500; }
h6, .h6 { font-size: 0.875rem; line-height: 1.375rem; font-weight: 500;
          text-transform: uppercase; letter-spacing: 0.06em; }

@media (min-width: 768px) {
	h1, .h1 { font-size: var(--s2g-h1); line-height: var(--s2g-lh-h1); }
	h2, .h2 { font-size: var(--s2g-h2); line-height: var(--s2g-lh-h2); }
	h3, .h3 { font-size: var(--s2g-h3); line-height: var(--s2g-lh-h3); }
	h4, .h4 { font-size: var(--s2g-h4); line-height: var(--s2g-lh-h4); }
	h5, .h5 { font-size: var(--s2g-h5); line-height: var(--s2g-lh-h5); }
	h6, .h6 { font-size: var(--s2g-h6); line-height: var(--s2g-lh-h6); }
}

/* --------------------------------------------------------------------------
   3. Links - accessible by default (6.9:1 on white)
   -------------------------------------------------------------------------- */

a {
	color: var(--s2g-link);
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
	transition: color var(--s2g-dur) var(--s2g-ease);
}

a:hover,
a:focus { color: var(--s2g-link-hover); }

a:not([class]):not(.button):hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   4. Focus visibility - never remove, always visible
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--s2g-focus-width) solid var(--s2g-focus-ring);
	outline-offset: var(--s2g-focus-offset);
	border-radius: var(--s2g-radius-sm);
}

/* --------------------------------------------------------------------------
   5. Accessibility helpers
   -------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

.skip-link,
.s2g-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--s2g-surface-inverse); color: var(--s2g-text-inverse);
	padding: var(--s2g-space-3) var(--s2g-space-4); border-radius: 0 0 var(--s2g-radius) 0;
	text-decoration: none; font-weight: 500;
}

.skip-link:focus,
.s2g-skip:focus { left: 0; color: var(--s2g-text-inverse); }

/* --------------------------------------------------------------------------
   6. Reading measure + long-content polish
   -------------------------------------------------------------------------- */

.s2g-measure,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote { max-width: var(--s2g-measure); }

.entry-content > * { margin-bottom: var(--s2g-space-6); }
.entry-content > .alignwide { max-width: var(--s2g-wide-width); margin-left: auto; margin-right: auto; }
.entry-content > .alignfull { max-width: none; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
	display: inline-block;
	font-family: var(--s2g-font);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--s2g-radius);
	background-color: var(--s2g-btn-bg);
	color: var(--s2g-btn-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--s2g-dur) var(--s2g-ease),
	            border-color var(--s2g-dur) var(--s2g-ease),
	            color var(--s2g-dur) var(--s2g-ease);
}

.button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--s2g-btn-bg-hover);
	color: var(--s2g-btn-text);
	text-decoration: none;
}

.button--secondary,
.is-style-outline .wp-block-button__link {
	background-color: var(--s2g-btn-secondary-bg);
	color: var(--s2g-btn-secondary-text);
	border-color: var(--s2g-btn-secondary-border);
}

.button--secondary:hover,
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--s2g-blue-50);
	color: var(--s2g-link-hover);
}

.button--large { padding: 16px 32px; font-size: 1.125rem; }
.button--block { display: block; width: 100%; text-align: center; }

/* On dark surfaces */
.s2g-dark .button--secondary,
.s2g-dark .is-style-outline .wp-block-button__link {
	color: var(--s2g-blue-200);
	border-color: var(--s2g-blue-400);
	background-color: transparent;
}

.s2g-dark .button--secondary:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="number"], input[type="tel"], select, textarea {
	font-family: var(--s2g-font);
	font-size: 1rem;
	line-height: 1.5;
	width: 100%;
	padding: 12px 14px;
	color: var(--s2g-text);
	background-color: var(--s2g-surface);
	border: 1px solid var(--s2g-border-strong);
	border-radius: var(--s2g-radius);
	transition: border-color var(--s2g-dur) var(--s2g-ease);
}

input:focus, select:focus, textarea:focus { border-color: var(--s2g-blue-500); }

::placeholder { color: var(--s2g-navy-400); opacity: 1; }

label { display: inline-block; margin-bottom: var(--s2g-space-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   9. Surfaces
   -------------------------------------------------------------------------- */

.s2g-dark {
	background-color: var(--s2g-surface-inverse);
	color: var(--s2g-text-inverse);
}

.s2g-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--s2g-text-inverse); }
.s2g-dark a { color: var(--s2g-link-inverse); }
.s2g-dark a:hover { color: #FFFFFF; }
.s2g-dark p, .s2g-dark li { color: var(--s2g-navy-50); }
.s2g-dark .s2g-muted { color: var(--s2g-navy-300); }

.s2g-sunken { background-color: var(--s2g-surface-sunken); }

.s2g-card {
	background-color: var(--s2g-surface-raised);
	border: 1px solid var(--s2g-border);
	border-radius: var(--s2g-radius-lg);
	overflow: hidden;
	transition: border-color var(--s2g-dur) var(--s2g-ease),
	            transform var(--s2g-dur) var(--s2g-ease);
}

.s2g-card:hover { border-color: var(--s2g-blue-300); transform: translateY(-2px); }

.s2g-card__media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }
.s2g-card__body { padding: var(--s2g-space-6); }
.s2g-card__title { margin: 0 0 var(--s2g-space-2); font-size: 1.25rem; line-height: 1.4; font-weight: 500; }
.s2g-card__title a { text-decoration: none; color: var(--s2g-text); }
.s2g-card__title a:hover { color: var(--s2g-link); }

.s2g-eyebrow {
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--s2g-blue-700);
	margin-bottom: var(--s2g-space-3);
}

.s2g-dark .s2g-eyebrow { color: var(--s2g-blue-300); }

/* --------------------------------------------------------------------------
   10. Grids
   -------------------------------------------------------------------------- */

.s2g-grid { display: grid; gap: var(--s2g-space-8); }
.s2g-grid--2 { grid-template-columns: 1fr; }
.s2g-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.s2g-grid--2, .s2g-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.s2g-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   11. Content blocks
   -------------------------------------------------------------------------- */

/* Quick facts / comparison tables */
.s2g-facts { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.s2g-facts th, .s2g-facts td {
	padding: var(--s2g-space-3) var(--s2g-space-4);
	text-align: left;
	border-bottom: 1px solid var(--s2g-border);
	vertical-align: top;
}
.s2g-facts th { width: 38%; font-weight: 500; color: var(--s2g-text-secondary); }
.s2g-facts tr:last-child th, .s2g-facts tr:last-child td { border-bottom: 0; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--s2g-space-3); border: 1px solid var(--s2g-border); text-align: left; }
thead th { background-color: var(--s2g-surface-sunken); font-weight: 500; }

/* Disclosure strip */
.s2g-disclosure {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--s2g-text-secondary);
	background-color: var(--s2g-surface-sunken);
	border-left: 3px solid var(--s2g-blue-300);
	border-radius: var(--s2g-radius-sm);
	padding: var(--s2g-space-3) var(--s2g-space-4);
}

/* Callouts */
.s2g-note {
	border-left: 3px solid var(--s2g-blue-400);
	background-color: var(--s2g-blue-50);
	padding: var(--s2g-space-4) var(--s2g-space-6);
	border-radius: var(--s2g-radius-sm);
}
.s2g-note--success { border-color: var(--s2g-success); background-color: var(--s2g-success-bg); }
.s2g-note--warning { border-color: var(--s2g-warning); background-color: var(--s2g-warning-bg); }
.s2g-note--danger  { border-color: var(--s2g-danger);  background-color: var(--s2g-danger-bg); }

/* Blockquote */
blockquote,
.wp-block-quote {
	margin: var(--s2g-space-8) 0;
	padding: var(--s2g-space-4) 0 var(--s2g-space-4) var(--s2g-space-6);
	border-left: 3px solid var(--s2g-violet-400);
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--s2g-text);
	font-style: normal;
}
blockquote cite, .wp-block-quote cite {
	display: block;
	margin-top: var(--s2g-space-3);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--s2g-text-muted);
}

code, kbd, pre, samp { font-family: var(--s2g-font-mono); font-size: 0.9em; }
code { background: var(--s2g-navy-50); padding: 0.15em 0.35em; border-radius: var(--s2g-radius-sm); }
pre {
	background: var(--s2g-navy-600);
	color: var(--s2g-navy-50);
	padding: var(--s2g-space-6);
	border-radius: var(--s2g-radius);
	overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

hr { border: 0; border-top: 1px solid var(--s2g-border); margin: var(--s2g-space-12) 0; }

img, video { max-width: 100%; height: auto; }
figure { margin: 0 0 var(--s2g-space-6); }
figcaption {
	font-size: 0.875rem;
	color: var(--s2g-text-muted);
	margin-top: var(--s2g-space-2);
	text-align: left;
}

/* --------------------------------------------------------------------------
   12. Article header / meta
   -------------------------------------------------------------------------- */

.s2g-article-header { margin-bottom: var(--s2g-space-8); }
.s2g-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2g-space-2) var(--s2g-space-4);
	align-items: center;
	font-size: 0.875rem;
	color: var(--s2g-text-muted);
	margin-bottom: var(--s2g-space-4);
}
.s2g-meta a { color: var(--s2g-text-secondary); }

.s2g-hero-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--s2g-radius-lg);
	margin-bottom: var(--s2g-space-8);
	display: block;
}

/* --------------------------------------------------------------------------
   13. Affiliate CTA
   -------------------------------------------------------------------------- */

.s2g-buy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2g-space-3);
	margin: var(--s2g-space-8) 0;
}
.s2g-buy .button { flex: 1 1 auto; min-width: 140px; text-align: center; }

/* --------------------------------------------------------------------------
   14. Newsletter
   -------------------------------------------------------------------------- */

.s2g-newsletter {
	background: linear-gradient(135deg, var(--s2g-logo-from) 0%, var(--s2g-logo-to) 100%);
	color: #FFFFFF;
	border-radius: var(--s2g-radius-lg);
	padding: var(--s2g-space-12) var(--s2g-space-8);
	text-align: center;
}
.s2g-newsletter h2, .s2g-newsletter h3 { color: #FFFFFF; }
.s2g-newsletter p { color: rgba(255, 255, 255, 0.92); max-width: 52ch; margin-left: auto; margin-right: auto; }
.s2g-newsletter .button { background-color: #FFFFFF; color: var(--s2g-navy-600); }
.s2g-newsletter .button:hover { background-color: var(--s2g-navy-50); color: var(--s2g-navy-700); }
.s2g-newsletter small { display: block; margin-top: var(--s2g-space-3); color: rgba(255, 255, 255, 0.85); }

/* The band's signup form is laid out in assets/css/newsletter.css. There used to
   be a `display: flex` here, written for a plain <input><button> pair; once the
   Brevo form arrived it wrapped the field, the consent line and the submit
   button into one squeezed row. Removed rather than overridden so the two files
   cannot disagree again. */

/* --------------------------------------------------------------------------
   15. Breadcrumbs
   -------------------------------------------------------------------------- */

.s2g-breadcrumbs {
	font-size: 0.875rem;
	color: var(--s2g-text-muted);
	margin-bottom: var(--s2g-space-6);
}
.s2g-breadcrumbs a { color: var(--s2g-text-secondary); text-decoration: none; }
.s2g-breadcrumbs a:hover { color: var(--s2g-link); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.s2g-faq details {
	border-bottom: 1px solid var(--s2g-border);
	padding: var(--s2g-space-4) 0;
}
.s2g-faq summary {
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--s2g-space-4);
	align-items: flex-start;
}
.s2g-faq summary::-webkit-details-marker { display: none; }
.s2g-faq summary::after { content: "+"; font-weight: 400; color: var(--s2g-blue-600); font-size: 1.25rem; line-height: 1; }
.s2g-faq details[open] summary::after { content: "\2013"; }
.s2g-faq details > *:not(summary) { margin-top: var(--s2g-space-3); }

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */

.s2g-text-center { text-align: center; }
.s2g-mx-auto { margin-left: auto; margin-right: auto; }
.s2g-muted { color: var(--s2g-text-muted); }
.s2g-stack > * + * { margin-top: var(--s2g-space-4); }
.s2g-hidden { display: none !important; }

@media (max-width: 767px) { .s2g-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .s2g-hide-desktop { display: none !important; } }

/* --------------------------------------------------------------------------
   18. Hero
   -------------------------------------------------------------------------- */

.s2g-hero {
	position: relative;
	background-color: var(--s2g-navy-600);
	color: var(--s2g-text-inverse);
	padding: var(--s2g-space-16) 0;
	overflow: hidden;
}
.s2g-hero > * { position: relative; z-index: 1; }
.s2g-hero h1 { color: #FFFFFF; max-width: 20ch; margin-left: auto; margin-right: auto; }
.s2g-hero p { color: var(--s2g-navy-100); font-size: 1.125rem; line-height: 1.7; max-width: 56ch; margin-left: auto; margin-right: auto; }
.s2g-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	object-fit: cover; width: 100%; height: 100%; opacity: 0.45;
}

@media (min-width: 768px) { .s2g-hero { padding: var(--s2g-space-24) 0; } }

/* --------------------------------------------------------------------------
   19. Hub header
   -------------------------------------------------------------------------- */

.s2g-hub-header { margin-bottom: var(--s2g-space-12); }
.s2g-hub-header h1 { margin-bottom: var(--s2g-space-3); }
.s2g-hub-header p { font-size: 1.125rem; line-height: 1.7; color: var(--s2g-text-secondary); max-width: 62ch; }

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
	.s2g-newsletter, .s2g-buy, .s2g-hero__bg { display: none !important; }
	body { color: #000; background: #FFF; }
	a { color: #000; text-decoration: underline; }
}