/*
 * The Weather Station Experts: layout and components beyond theme.json.
 * Colours are the TWSE design system's: storm #1d3a5c, night #0b1622, dusk #1a2c40, slate #4b5a6b,
 * mist #dbe9ec, sky-light #b8def5, cloud #81aed0 (decorative only), gold #ffda6b.
 */

:root {
	--twse-storm: #1d3a5c;
	--twse-night: #0b1622;
	--twse-dusk: #1a2c40;
	--twse-slate: #4b5a6b;
	--twse-mist: #dbe9ec;
	--twse-sky-light: #b8def5;
	--twse-cloud: #81aed0;
	--twse-gold: #ffda6b;
	--twse-wide: 1200px;
}

/* Header, main and footer sit flush: the bands meet without a white strip between them. */
.wp-site-blocks > * { margin-block-start: 0; }

:where(a, button, input, summary):focus-visible { outline: 2px solid var(--twse-storm); outline-offset: 2px; }

/* ---------- Masthead: the daylight sky band ---------- */
.twse-masthead {
	background: var(--twse-sky-light);
	border-bottom: 1px solid var(--twse-cloud);
	padding-top: 20px;
	padding-bottom: 20px;
}
.twse-masthead__inner { gap: 16px 32px; align-items: center; }
.twse-brand { gap: 16px; align-items: center; }
.twse-brand .wp-block-site-logo img { width: 72px; height: auto; }
.twse-brand__text { gap: 2px; min-width: 0; }
@media (max-width: 599px) {
	.twse-masthead__inner { flex-wrap: nowrap !important; }
	.twse-brand { gap: 12px; min-width: 0; }
	.twse-brand .wp-block-site-logo img { width: 52px; }
	.twse-brand .wp-block-site-title { font-size: 18px !important; line-height: 1.2; }
	.twse-brand .wp-block-site-tagline { font-size: 13px; line-height: 1.3; }
}
.twse-brand .wp-block-site-title,
.twse-brand .wp-block-site-tagline { margin: 0; }

/* Plain text links; the current page and hover get a storm underline. */
.twse-nav .wp-block-navigation__container { gap: 4px 12px; }
.twse-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	box-sizing: border-box;
	border-bottom: 3px solid transparent;
	color: var(--twse-night);
}
.twse-nav .wp-block-navigation-item__content:hover,
.twse-nav .current-menu-item > .wp-block-navigation-item__content,
.twse-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--twse-storm);
	border-bottom-color: var(--twse-storm);
}
.twse-nav .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--twse-mist) !important;
	border-radius: 8px;
	padding: 8px;
}
.twse-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 40px; border-bottom: 0; }
/* Phone menu button: a rounded square. */
.twse-nav .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--twse-storm);
	border: 1px solid var(--twse-storm);
	border-radius: 8px;
}
@media (max-width: 599px) {
	.twse-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
}
.twse-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--twse-sky-light) !important;
	color: var(--twse-night) !important;
}
.twse-nav .is-menu-open .wp-block-navigation-item__content { font-size: 20px; }

/* ---------- Title band on posts and pages ---------- */
.twse-titleband {
	background: var(--twse-sky-light);
	padding-top: 32px;
	padding-bottom: 40px;
	margin-top: 0;
}
.twse-titleband__inner > * { margin: 0; }
.twse-titleband__inner > * + * { margin-top: 16px; }
.twse-eyebrow,
.twse-eyebrow a {
	font: 700 13px/18px Lato, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: .01em;
	color: var(--twse-storm);
	text-decoration: none;
}
.twse-eyebrow a:hover { text-decoration: underline; }
.twse-title { max-width: 900px; }
/* The subtitle plugin's "<br><span>…</span>" becomes the dek under the headline. */
.twse-title br { display: none; }
.twse-title span {
	display: block;
	margin-top: 14px;
	font-family: Lato, "Helvetica Neue", Arial, sans-serif;
	font-size: 21px !important;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--twse-night) !important;
}
.twse-byline { gap: 8px 20px; align-items: center; font-size: 15px; }
.twse-byline .wp-block-post-author { align-items: center; }
.twse-byline .wp-block-post-author__avatar { margin-right: 10px; }
.twse-byline .wp-block-post-author__avatar img { border-radius: 9999px; border: 2px solid var(--twse-storm); width: 40px; height: 40px; }
.twse-byline .wp-block-post-author__byline { display: inline; margin-right: 4px; font-size: 15px; }
.twse-byline .wp-block-post-author__content { display: flex; align-items: baseline; flex-wrap: wrap; }
.twse-byline .wp-block-post-author__name { font-weight: 700; }
.twse-updated::before { content: "Updated "; }

/* ---------- Article: reading column and side rail ---------- */
.twse-article {
	display: flex;
	gap: 56px;
	justify-content: space-between;
	align-items: flex-start;
	max-width: calc(var(--twse-wide) + 48px);
	margin: 0 auto !important;
	padding: 40px var(--wp--style--root--padding-right, 24px) 64px var(--wp--style--root--padding-left, 24px);
	box-sizing: border-box;
}
.twse-article__body { flex: 1 1 0; min-width: 0; max-width: 760px; }
.twse-main--page .twse-article__body { max-width: 820px; }
.twse-featured { margin: 0 0 28px; }
.twse-featured img { display: block; width: 100%; height: auto; border-radius: 8px; }
.twse-prose > h2 { margin-top: 48px; }
.twse-prose > h3 { margin-top: 32px; }
.twse-prose table { border-collapse: collapse; width: 100%; }
.twse-prose th, .twse-prose td { border-bottom: 1px solid var(--twse-mist); padding: 10px 8px; text-align: left; }
.twse-rail { width: 300px; flex: none; position: sticky; top: 24px; margin: 0 !important; }
.twse-rail:not(:has(.twse-toc)) { display: none; }
.twse-toc { border: 1px solid var(--twse-mist); border-radius: 8px; padding: 20px; }
.twse-toc__title { margin: 0 0 10px; font: 700 17px/22px Raleway, "Helvetica Neue", Arial, sans-serif; color: var(--twse-night); }
.twse-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; }
@media (max-width: 960px) {
	.twse-article { flex-direction: column; gap: 0; }
	.twse-rail { display: none; }
}

/* Editor's notes: the "Note" block style. */
.is-style-twse-note {
	background: var(--twse-mist);
	border-radius: 8px;
	padding: 20px 24px;
	font-size: 16px;
	line-height: 26px;
}

/* Outline buttons: white with a storm frame. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: #fff;
	color: var(--twse-storm);
	border: 2px solid var(--twse-storm);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--twse-mist); color: var(--twse-night); }

/* ---------- Homepage ---------- */
.twse-main--home { padding-top: 0; padding-bottom: 0; }
.twse-hero {
	background: var(--twse-sky-light);
	padding-top: 40px;
	padding-bottom: 72px;
	margin-top: 0 !important;
}
.twse-hero__inner { display: flex; gap: 48px; align-items: center; }
.twse-hero__copy { flex: 1 1 0; min-width: 0; }
.twse-hero__copy > * { margin: 0; }
.twse-hero__copy > * + * { margin-top: 20px; }
.twse-hero__title { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.1; }
.twse-hero__lead { font-size: 20px; line-height: 1.6; max-width: 620px; }
.twse-picks-card {
	width: 400px;
	flex: none;
	background: #fff;
	border: 3px solid var(--twse-storm);
	border-radius: 8px;
	padding: 24px;
	box-sizing: border-box;
}
.twse-picks-card > * { margin: 0; }
.twse-picks-card__title { font-size: 20px; line-height: 26px; }
.twse-picks-card__list { list-style: none; counter-reset: pick; padding: 0; margin: 8px 0 12px !important; }
.twse-picks-card__list li {
	counter-increment: pick;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--twse-mist);
	margin: 0;
}
.twse-picks-card__list li:last-child { border-bottom: 0; }
.twse-picks-card__list li::before {
	content: counter(pick);
	width: 20px;
	font: 800 22px/26px Raleway, "Helvetica Neue", Arial, sans-serif;
	color: var(--twse-storm);
}
.twse-pick-name { flex: 1; font-weight: 700; }
.twse-picks-card__more a { font-weight: 700; }
.twse-rate {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 2px 10px;
	border-radius: 4px;
	background: var(--twse-gold);
	color: var(--twse-storm);
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
}
.twse-rate small { font-weight: 400; font-size: 13px; }
.twse-home-content { padding-top: 56px; padding-bottom: 56px; }
/* Latest reviews / guides lists become white cards with a thin border. */
.twse-home-content .wp-block-post-template > li {
	border: 1px solid var(--twse-mist);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	padding-bottom: 16px;
}
.twse-home-content .wp-block-post-template > li > :not(.wp-block-post-featured-image) { padding-left: 20px; padding-right: 20px; }
.twse-home-content .wp-block-post-template .wp-block-post-title { font-size: 20px; line-height: 26px; }
.wp-block-post-template .wp-block-post-title br,
.wp-block-post-template .wp-block-post-title span { display: none; } /* subtitle dek: only under a post's own headline */
.twse-home-content .wp-block-post-template .wp-block-post-featured-image img { border-radius: 0; }
@media (max-width: 900px) {
	.twse-hero__inner { flex-direction: column; align-items: stretch; gap: 32px; }
	.twse-picks-card { width: auto; }
}

/* Newsletter band (the Klaviyo form) */
.twse-newsletter-band { background: var(--twse-mist); padding-top: 56px; padding-bottom: 56px; margin-top: 0 !important; }
.twse-newsletter-band .twse-newsletter { margin: 0 auto !important; max-width: 760px; }

/* ---------- Footer: the dark footer, in night blue ---------- */
.twse-footer {
	background: var(--twse-night);
	color: var(--twse-mist);
	padding-top: 56px;
	padding-bottom: 32px;
	margin-top: 0 !important;
	font-size: 15px;
	line-height: 24px;
}
.twse-footer p { margin: 0; }
.twse-footer a { color: var(--twse-mist); text-decoration: none; }
.twse-footer a:hover { color: #fff; text-decoration: underline; }
.twse-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.twse-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.twse-footer__name { gap: 12px; align-items: center; }
.twse-footer .wp-block-site-logo img { width: 48px; height: auto; }
.twse-footer .wp-block-site-title { margin: 0; font-size: 18px; }
.twse-footer .wp-block-site-title a { color: #fff; }
.twse-footer__cw a { color: var(--twse-gold); font-weight: 700; }
.twse-footer__col { display: flex; flex-direction: column; gap: 10px; }
.twse-footer__head { font: 700 15px/20px Raleway, "Helvetica Neue", Arial, sans-serif; color: #fff; }
.twse-footer__base {
	margin-top: 40px !important;
	padding-top: 20px;
	border-top: 1px solid var(--twse-dusk);
	font-size: 13px;
	line-height: 20px;
	gap: 8px 16px;
}
@media (max-width: 900px) { .twse-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .twse-footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Affiliate Boxes in TWSE colours (accent, text and background are set in its settings) ---------- */
.cab { border-radius: 8px; font-family: Lato, "Helvetica Neue", Arial, sans-serif; }
.cab :where(h2, h3, h4),
.cab .cab__rank { font-family: Raleway, "Helvetica Neue", Arial, sans-serif; }
.cab .cab__rank { color: var(--twse-storm); font-weight: 800; }
.cab .cab__badge,
.cab.cab--atmospheric .cab__badge {
	background: var(--twse-gold);
	border-color: var(--twse-gold);
	color: var(--twse-storm);
	font: 700 13px/18px Lato, "Helvetica Neue", Arial, sans-serif;
	border-radius: 4px;
}
.cab .cab__rating strong {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: 2px 10px;
	border-radius: 4px;
	background: var(--twse-gold);
	color: var(--twse-storm);
	font-size: 15px;
}
.cab .cab__media { border-radius: 8px; border: 1px solid var(--twse-mist); }
.cab .cab__button { border-radius: 8px; font: 700 15px/1.3 Lato, "Helvetica Neue", Arial, sans-serif; }
.cab .cab__offer + .cab__offer .cab__button { border-color: var(--twse-storm); color: var(--twse-storm); }
.cab .cab__offer-facts { font-family: inherit; }