/*
Theme Name: Side by Side
Description: A calm, fast, ad-free block theme for practical friendship guides. Built from site-design.md: warm off-white background, high-contrast text, one reading column, and reusable boxes for quick answers, "is this normal?" sections, professional-help notes and expert quotes.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sidebyside
*/

/* Hub accent: teal by default (Parents). functions.php adds a body class per hub. */
:root { --sbs-hub: var(--wp--preset--color--accent); }
body.sbs-hub-boys-friendship { --sbs-hub: var(--wp--preset--color--accent-boys); }
body.sbs-hub-boy-girl-friendship { --sbs-hub: var(--wp--preset--color--accent-boygirl); }

/* Accessibility: a clear focus ring everywhere, and respect for reduced motion. */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
img { height: auto; max-width: 100%; }

/* Page rhythm. */
.sbs-main { padding-top: 1.5rem; padding-bottom: 3rem; }

/* Header and navigation: comfortable tap targets. */
.sbs-header { border-bottom: 1px solid var(--wp--preset--color--border); padding-top: 0.75rem; padding-bottom: 0.75rem; }
.sbs-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.sbs-header .wp-block-navigation-item__content { padding: 0.5rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center; }
.sbs-header .wp-block-navigation__container { row-gap: 0; column-gap: 1rem; }
@media (max-width: 600px) {
	.sbs-header .wp-block-navigation,
	.sbs-header .wp-block-navigation__container { justify-content: flex-start; }
}

/* Breadcrumbs and hub label. */
.sbs-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.sbs-breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--wp--preset--color--muted); }
.sbs-breadcrumbs a { color: var(--wp--preset--color--muted); }

/* Byline row under the title. */
.sbs-byline { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); gap: 0.25rem 1rem; }
.sbs-byline .wp-block-post-author-name::before { content: "By "; }
.sbs-byline .wp-block-post-date::before { content: "Published "; }
.sbs-byline a { color: var(--wp--preset--color--muted); }

/* The answer-first box: placed by the writer at the top of every article (pattern "Quick answer"). */
.sbs-quick-answer {
	background: var(--wp--preset--color--callout);
	border-left: 4px solid var(--sbs-hub);
	border-radius: 6px;
	padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}
.sbs-box-label { font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sbs-hub); margin: 0; }

/* "Is this normal?" and "When to talk to a professional" sections. */
.sbs-normal-box { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 1.25rem 1.5rem; }
.sbs-help-box { background: var(--wp--preset--color--help); border-left: 4px solid var(--wp--preset--color--accent-boygirl); border-radius: 6px; padding: 1.25rem 1.5rem; }
.sbs-normal-box > .wp-block-heading:first-child,
.sbs-help-box > .wp-block-heading:first-child { margin-top: 0; }

/* Expert quotes: short quote, then who said it and where. */
.sbs-expert-quote { border-left: 4px solid var(--sbs-hub); padding-left: 1.25rem; margin-left: 0; }
.sbs-expert-quote cite { display: block; margin-top: 0.5rem; font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--muted); }

/* Sources, review line, updated line. */
.sbs-sources { font-size: var(--wp--preset--font-size--small); }
.sbs-review-line { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* Related reading and author box. */
.sbs-related { border-top: 1px solid var(--wp--preset--color--border); padding-top: 1.5rem; }
.sbs-related ul { padding-left: 1.25rem; }
.sbs-author-box { border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 1.25rem 1.5rem; background: var(--wp--preset--color--surface); }

/* Homepage hub doors. */
.sbs-door { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-top: 6px solid var(--wp--preset--color--accent); border-radius: 6px; padding: 1.25rem 1.5rem; height: 100%; }
.sbs-door--boys { border-top-color: var(--wp--preset--color--accent-boys); }
.sbs-door--boygirl { border-top-color: var(--wp--preset--color--accent-boygirl); }
.sbs-door .wp-block-heading { margin-top: 0; }

/* Hub article list. */
.sbs-hub-articles { list-style: none; padding: 0; }
.sbs-hub-articles li { padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.sbs-hub-articles a { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 700; }
.sbs-hub-articles p { margin: 0.25rem 0 0; color: var(--wp--preset--color--muted); }

/* Tables: readable on phones. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.wp-block-table thead { background: var(--wp--preset--color--callout); }

/* Footer. */
.sbs-footer { border-top: 1px solid var(--wp--preset--color--border); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); padding-top: 2rem; padding-bottom: 2rem; }
.sbs-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.sbs-footer a { color: var(--wp--preset--color--contrast); }