/*
Theme Name: The Window
Description: Theme for The Window international football podcast. Pairs with The Window Data plugin.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: the-window
*/

/* ---------- logo ---------- */
.tw-logo { display: inline-flex; flex: none; line-height: 0; }
.tw-logo img { display: block; width: auto; height: 68px; }
.tw-site-header .tw-logo img { height: clamp(56px, 6.5vw, 88px); margin-block: -.35rem; }
.tw-site-footer .tw-logo img { height: 96px; margin-bottom: .75rem; }
.tw-logo:focus-visible { outline: 3px solid var(--wp--preset--color--flare); outline-offset: 4px; border-radius: 4px; }
.wp-block-site-logo.tw-logo img { height: clamp(56px, 6.5vw, 88px); width: auto; }

/* ---------- header ---------- */
.tw-site-header { background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--chalk); }
.tw-site-header a { color: var(--wp--preset--color--chalk); text-decoration: none; }
.tw-site-header .wp-block-site-title a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.75rem; letter-spacing: .04em; text-transform: uppercase; }
.tw-site-header .wp-block-navigation a:hover { color: #4CE797; }
.tw-site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--chalk); }
.tw-site-header .wp-block-navigation__responsive-container-open svg, .tw-site-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.tw-cta .wp-block-button__link { background: var(--wp--preset--color--lime) !important; color: var(--wp--preset--color--pitch) !important; font-weight: 700; }

/* ---------- hero ---------- */
.tw-hero { background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--chalk); position: relative; overflow: hidden; }
/* the full logo, large, beside the headline on wide screens */
@media (min-width: 1100px) {
  .tw-hero::after { content: ""; position: absolute; right: max(2rem, calc((100vw - 1240px) / 2)); top: 50%; transform: translateY(-50%); width: min(420px, 31vw); aspect-ratio: 826 / 399; background: url("assets/brand/logo.webp") center / contain no-repeat; pointer-events: none; }
  .tw-hero > .alignwide { position: relative; z-index: 1; padding-right: calc(min(420px, 31vw) + 2.5rem); }
}
.tw-hero h1 { color: var(--wp--preset--color--chalk); }
.tw-hero p { color: #C9D3CC; }
.tw-hero .is-style-outline .wp-block-button__link { border-color: #4A6A5B; color: var(--wp--preset--color--chalk); }
.tw-kicker { font-family: var(--wp--preset--font-family--display); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--lime) !important; font-weight: 700; }

/* ---------- section titles ---------- */
.tw-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--wp--preset--color--pitch); padding-bottom: .4rem; }
.tw-section-head h2 { margin: 0; }
.tw-section-head a { font-weight: 600; }

/* ---------- membership cards ---------- */
.tw-tier { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1.75rem; height: 100%; }
.tw-tier--insider { background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--chalk); border-color: var(--wp--preset--color--pitch); }
.tw-tier--insider h3, .tw-tier--insider .tw-price { color: var(--wp--preset--color--chalk); }
.tw-tier ul { padding-left: 1.1rem; margin: 1rem 0 1.5rem; }
.tw-tier li { margin: .35rem 0; }
.tw-price { font-family: var(--wp--preset--font-family--display); font-size: 3rem; font-weight: 700; line-height: 1; margin: .5rem 0 0; }
.tw-price small { font-size: 1rem; font-weight: 500; opacity: .75; }

/* ---------- blog cards ---------- */
.tw-post-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 1.25rem; height: 100%; }
.tw-post-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--pitch); }
.tw-post-card .wp-block-post-terms a { font-size: .75rem; font-weight: 700; background: var(--wp--preset--color--mint); color: #1B4D37; padding: .1rem .4rem; border-radius: 3px; text-decoration: none; }

/* ---------- footer ---------- */
.tw-site-footer { background: var(--wp--preset--color--pitch); color: #C9D3CC; }
.tw-site-footer a { color: var(--wp--preset--color--chalk); }
.tw-site-footer .wp-block-site-title a { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }

/* full-bleed bands sit flush under the header */
.wp-site-blocks > header + main, .wp-site-blocks > header + * { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

/* phone menu overlay */
.tw-site-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--pitch) !important; color: var(--wp--preset--color--chalk) !important; padding: 1.25rem; }
.tw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 3rem; }
.tw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 1rem; }
.tw-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: 2.25rem; font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--chalk); }
.tw-site-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--chalk) !important; }

/* socials: icons in the header on wide screens; labelled buttons in the footer and home band */
.tw-site-header .tw-socials .wp-social-link { background: transparent !important; color: var(--wp--preset--color--chalk) !important; }
.tw-site-header .tw-socials .wp-social-link:hover { color: var(--wp--preset--color--flare) !important; }
@media (max-width: 900px) { .tw-site-header .tw-socials { display: none; } }
.tw-site-footer .tw-socials { margin-top: 1rem; }
.tw-follow { background: var(--wp--preset--color--mint); }
.tw-follow h2 { margin-bottom: 1rem; }

/* lime buttons: a hairline edge so they hold their shape on light backgrounds */
.wp-block-button:not(.is-style-outline) .wp-block-button__link { box-shadow: inset 0 0 0 1px rgba(16, 34, 27, .12); }
.wp-block-button__link:hover { filter: brightness(.95); }