/*
Theme Name: Weather the Weather (Kadence Child)
Theme URI: https://weathertheweather.co.uk
Template: kadence
Author: Lisa Hatfield
Description: Bold weather-graphic child theme for weathertheweather.co.uk, built on the Kadence parent theme. Includes styling for product review pages, comparison tables, and weather-category homepage tiles.
Version: 1.0.18
Text Domain: wtw-child
*/

:root {
  --wtw-sky: #1E88E5;
  --wtw-sun: #FFB300;
  --wtw-storm: #37474F;
  --wtw-rain: #0277BD;
  --wtw-snow: #E1F5FE;
  --wtw-ink: #102A43;
  --wtw-white: #FFFFFF;
  --wtw-cta: #C43E00;
  --wtw-font-heading: 'Poppins', sans-serif;
  --wtw-font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--wtw-font-body);
  color: var(--wtw-ink);
}

h1, h2, h3, h4, .wtw-hero h1 {
  font-family: var(--wtw-font-heading);
  font-weight: 700;
}

.wtw-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Visually-hidden but screen-reader/SEO accessible text. Used on the
   hero, where the title and tagline are now baked into the banner
   image itself, so we keep real text in the markup without showing
   it twice. */
.wtw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero */
.wtw-hero {
  background: var(--wtw-storm);
  line-height: 0;
}
.wtw-hero-link {
  display: block;
}
.wtw-hero-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Quick-nav pills: deliberately small and secondary. Category
   navigation matters less on a site where most visitors already
   know what weather they're dealing with, so this is a slim
   utility strip, not a homepage centrepiece. */
.wtw-quick-nav { background: var(--wtw-white); border-bottom: 1px solid #EAF0F5; }
.wtw-quick-nav-inner {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 24px;
}
.wtw-quick-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wtw-storm);
  background: var(--wtw-snow);
  border-radius: 999px;
  padding: 7px 16px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.wtw-quick-nav-pill:hover { background: #D3ECFA; }
.wtw-quick-nav-pill i { font-size: 1rem; color: var(--wtw-sky); }

@media (max-width: 560px) {
  .wtw-hero h1 { font-size: 2.1rem; }
}

/* Featured post: the one big visual moment on the homepage, picked
   automatically to match the current season (see
   wtw_get_featured_post() in functions.php) unless a post has been
   pinned. */
.wtw-featured { padding: 32px 0 8px; background: var(--wtw-white); }
.wtw-featured-card {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 320px;
  background-color: var(--wtw-storm);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.wtw-featured-card:hover { box-shadow: 0 10px 26px rgba(16,42,67,0.28); }
.wtw-featured-card-flat { background-image: linear-gradient(135deg, var(--wtw-storm), #1565C0); }
.wtw-featured-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.wtw-featured-card:hover .wtw-featured-card-image { transform: scale(1.04); }
/* Semi-transparent dark scrim over the whole photo, not just the
   bottom edge, so the title and intro text stay readable wherever
   they fall, while the image itself is still clearly visible
   underneath. */
.wtw-featured-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,18,28,0.45) 0%, rgba(8,18,28,0.5) 45%, rgba(8,18,28,0.85) 100%);
}
.wtw-featured-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: 28px;
}
.wtw-featured-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--wtw-sun);
  color: #412402;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
/* Locked to white regardless of hover state: Kadence's own link-hover
   styling otherwise recolours nested text on hover, which made the
   title and intro text turn blue and become hard to read against the
   photo. The hover affordance here is the image zoom and shadow lift
   above, not a colour change. */
.wtw-featured-card h2,
.wtw-featured-card:hover h2,
.wtw-featured-card p,
.wtw-featured-card:hover p {
  color: var(--wtw-white) !important;
}
.wtw-featured-card h2 { font-size: 1.7rem; margin: 0 0 10px; max-width: 640px; }
.wtw-featured-card p { font-size: 0.98rem; opacity: 0.92; max-width: 560px; margin: 0 0 18px; }
.wtw-featured-card .wtw-cta-button { align-self: flex-start; margin-top: 0; }

@media (max-width: 700px) {
  .wtw-featured-card-content { min-height: 260px; padding: 20px; }
  .wtw-featured-card h2 { font-size: 1.35rem; }
}

/* Latest guides: asymmetric magazine grid. The most recent post
   (wtw-post-card-large) takes a 2x2 block, the rest fill in around
   it, so the homepage doesn't read as a flat repeating row of
   identical tiles. Every tile is a full-bleed photo with the title
   overlaid, matching the featured card's visual language. */
.wtw-latest { padding: 40px 0 72px; }
.wtw-latest h2 { font-size: 1.3rem; margin: 0 0 18px; }
.wtw-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: dense;
  gap: 14px;
}
.wtw-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--wtw-white);
  box-shadow: 0 1px 3px rgba(16,42,67,0.12);
  transition: box-shadow 0.15s ease;
}
.wtw-post-card:hover {
  box-shadow: 0 6px 16px rgba(16,42,67,0.2);
}
.wtw-post-card-large { grid-column: span 2; grid-row: span 2; }
.wtw-post-card-media {
  position: absolute;
  inset: 0;
  background: var(--wtw-snow);
  z-index: 0;
  overflow: hidden;
}
.wtw-post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.wtw-post-card:hover .wtw-post-card-media img { transform: scale(1.06); }
.wtw-post-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wtw-sky);
  font-size: 1.6rem;
}
.wtw-post-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,42,67,0) 45%, rgba(16,42,67,0.82) 100%);
}
/* Locked to white regardless of hover state, same reasoning as the
   featured card above: the zoom on the image is the hover cue, not a
   text colour change. */
.wtw-post-card h3,
.wtw-post-card:hover h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--wtw-white) !important;
}
.wtw-post-card-large h3 { font-size: 1.2rem; padding: 18px 20px; }

@media (max-width: 900px) {
  .wtw-guides-grid { grid-template-columns: repeat(2, 1fr); }
  .wtw-post-card-large { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
  .wtw-guides-grid { grid-template-columns: 1fr; grid-auto-rows: 160px; }
  .wtw-post-card-large { grid-column: span 1; grid-row: span 2; }
}

/* Affiliate ad disclosure badge */
.wtw-ad-disclosure {
  display: inline-block;
  background: var(--wtw-storm);
  color: var(--wtw-white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

/* Review page */
.wtw-review-page .wtw-container { padding-top: 40px; padding-bottom: 64px; }
.wtw-review-header h1 { font-size: 2.2rem; margin-bottom: 8px; }
.wtw-rating-score {
  display: inline-block;
  background: var(--wtw-sun);
  color: var(--wtw-ink);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 1.1rem;
}
.wtw-review-summary-box {
  background: var(--wtw-snow);
  border-radius: 14px;
  padding: 24px;
  margin: 20px 0 32px;
}
.wtw-review-summary-box p { margin: 0 0 8px; }

.wtw-cta-button {
  display: inline-block;
  background: var(--wtw-cta);
  color: var(--wtw-white) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  margin-top: 12px;
  transition: background 0.15s ease;
}
.wtw-cta-button:hover { background: #A83300; }
.wtw-cta-bottom { margin-top: 32px; }

.wtw-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0;
}
.wtw-pros h2, .wtw-cons h2 { font-size: 1.1rem; }
.wtw-pros ul, .wtw-cons ul { padding-left: 20px; margin: 0; }
.wtw-pros li { color: #1B5E20; }
.wtw-cons li { color: #B71C1C; }

@media (max-width: 700px) {
  .wtw-pros-cons { grid-template-columns: 1fr; }
}

.wtw-verdict {
  background: var(--wtw-white);
  border-left: 4px solid var(--wtw-sky);
  padding: 16px 20px;
  margin: 24px 0;
}

/* Weather Category archive banner, uses the term's Tile image */
.wtw-category-banner {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--wtw-storm);
  padding: 32px 0;
}
.wtw-category-banner-flat { background-image: linear-gradient(135deg, #1565C0, #01579B); }
.wtw-category-banner h1 { color: var(--wtw-white); font-size: 2rem; margin: 0 0 6px; }
.wtw-category-banner-desc { color: var(--wtw-white); opacity: 0.92; margin: 0; max-width: 560px; }
.wtw-category-archive-list { padding: 32px 0 64px; }

.wtw-category-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wtw-white);
  opacity: 0.85;
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 10px;
}
.wtw-category-breadcrumb:hover { opacity: 1; text-decoration: underline; }

/* Subcategory chips (e.g. Heatwaves > At home, At work, Out & about,
   On the move). Sits just under the banner, lighter-weight than the
   homepage's quick-nav pills since it's a secondary, in-context
   refinement rather than primary navigation. */
.wtw-subcat-row { background: var(--wtw-white); border-bottom: 1px solid #EAF0F5; }
.wtw-subcat-row-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 24px;
}
.wtw-subcat-label { font-size: 0.82rem; color: #6B7A88; margin-right: 4px; }
.wtw-subcat-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wtw-storm);
  border: 1px solid #D7E4EC;
  border-radius: 999px;
  padding: 5px 14px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wtw-subcat-pill:hover { background: var(--wtw-snow); border-color: var(--wtw-sky); }

/* About page */
.wtw-about-banner {
  background: linear-gradient(135deg, #1565C0, #01579B);
  padding: 44px 0 36px;
  text-align: center;
}
.wtw-about-banner h1 { color: var(--wtw-white); font-size: 2rem; margin: 0; }
.wtw-about-page .wtw-container-narrow { padding: 40px 24px 64px; }
.wtw-about-content { font-size: 1.05rem; line-height: 1.75; }
.wtw-about-content p { margin: 0 0 1.3em; }
.wtw-about-content h2 { font-size: 1.3rem; margin: 1.4em 0 0.6em; }
.wtw-about-content img { max-width: 100%; height: auto; border-radius: 12px; }

.wtw-disclosure-box {
  margin-top: 2.4em;
  background: var(--wtw-snow);
  border-left: 4px solid var(--wtw-sky);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
}
.wtw-disclosure-box h2 { font-size: 1.1rem; margin: 0 0 12px; color: var(--wtw-storm); }
.wtw-disclosure-box p { font-size: 0.95rem; margin: 0 0 10px; color: #2E3D4A; }
.wtw-disclosure-box p:last-child { margin-bottom: 0; }

/* Legal / policy pages (Terms of Use, Privacy Policy, Cookie Policy) */
.wtw-legal-banner {
  background: linear-gradient(135deg, var(--wtw-storm), #263238);
  padding: 38px 0 30px;
}
.wtw-legal-banner h1 { color: var(--wtw-white); font-size: 1.9rem; margin: 0 0 6px; }
.wtw-legal-updated { color: var(--wtw-white); opacity: 0.75; font-size: 0.85rem; margin: 0; }
.wtw-legal-page .wtw-container-narrow { padding: 40px 24px 72px; }
.wtw-legal-content { font-size: 1rem; line-height: 1.75; color: #33475B; }
.wtw-legal-content h2 { font-size: 1.2rem; margin: 1.6em 0 0.6em; color: var(--wtw-ink); }
.wtw-legal-content p { margin: 0 0 1.2em; }
.wtw-legal-content ul, .wtw-legal-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.wtw-legal-content li { margin-bottom: 0.5em; }

/* Product Roundup: long-form article layout */
.wtw-container-narrow { max-width: 760px; }
.wtw-roundup-page .wtw-container { padding-top: 40px; padding-bottom: 64px; }
.wtw-roundup-page .wtw-page-header h1 { font-size: 2.1rem; margin: 0 0 20px; }
.wtw-roundup-hero { margin-bottom: 28px; border-radius: 14px; overflow: hidden; }
.wtw-roundup-hero img { width: 100%; height: auto; display: block; }
.wtw-roundup-content { font-size: 1.05rem; line-height: 1.75; }
.wtw-roundup-content p { margin: 0 0 1.3em; }
.wtw-roundup-content h2 { font-size: 1.4rem; margin: 1.6em 0 0.6em; }
.wtw-roundup-content img { max-width: 100%; height: auto; border-radius: 10px; }

/* Inline product callout, used via the [wtw_product] shortcode
   inside a Product Roundup article or any ordinary blog post. */
.wtw-product-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--wtw-white);
  border: 1px solid #E3ECF2;
  border-radius: 14px;
  padding: 18px;
  margin: 1.6em 0;
}
.wtw-product-card-media { flex: 0 0 160px; }
.wtw-product-card-image {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.wtw-product-card-body { flex: 1; min-width: 0; }
.wtw-product-card-name { font-family: var(--wtw-font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; }
.wtw-product-card-note { font-size: 0.95rem; margin: 0 0 10px; color: #33475B; }
.wtw-product-card-meta { font-size: 0.9rem; font-weight: 600; margin: 0 0 12px; color: var(--wtw-storm); }
.wtw-cta-small { padding: 10px 20px; font-size: 0.92rem; margin-top: 0; }

@media (max-width: 560px) {
  .wtw-product-card { flex-direction: column; }
  .wtw-product-card-media { flex: none; }
  .wtw-product-card-image { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* Comparison tables (designed to style the free TablePress plugin) */
.tablepress { border-collapse: collapse; width: 100%; }
.tablepress th {
  background: var(--wtw-storm);
  color: var(--wtw-white);
  padding: 12px;
  text-align: left;
}
.tablepress td { padding: 12px; border-bottom: 1px solid #E0E0E0; }
.tablepress tr:nth-child(even) td { background: #F7FBFF; }