/*
Theme Name: Hotel Blogs (MTC)
Theme URI: https://hotel-blogs.com
Author: Marketing The Change
Author URI: https://marketingthechange.com
Description: Independent hospitality-industry magazine. Editorial Cream + Deep Navy + Brass. Fraunces display, Inter body, JetBrains Mono for prices and rubric scores. Monocle / FT Weekend masthead treatment. Wirecutter-shape review vertical. Sister brand to Marketing The Change and Hotel Website Designers. UK English editorial default. No em dashes.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Tested up to: 6.6
License: Proprietary
Text Domain: hotel-blogs-mtc
Tags: block-theme, editorial, magazine, one-column, custom-colors, custom-logo, editor-style, wide-blocks, block-styles
*/

/* ---------------------------------------------------------
   Root tokens the theme.json cannot express as cleanly.
   --------------------------------------------------------- */

:root {
  --hb-shadow-card: 0 2px 8px rgba(14, 35, 64, 0.06);
  --hb-shadow-card-hover: 0 6px 24px rgba(14, 35, 64, 0.10);
  --hb-radius-button: 4px;
  --hb-radius-card: 4px;
  --hb-radius-pill: 999px;
  --hb-max-comparison: 1400px;
  --hb-transition: 200ms ease-out;
}

html { scroll-behavior: smooth; }
body {
  background-color: #F4EEDF;
  color: #141821;
  font-feature-settings: "ss01", "cv11";
}

/* Skip link (a11y) */
.skip-link:focus {
  background: #0E2340;
  color: #F4EEDF;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  outline: 2px solid #B58A3C;
  outline-offset: 2px;
}

/* Fraunces optical-size hint for display headings */
h1, h2 { font-variation-settings: 'opsz' 96; letter-spacing: -0.005em; }
h3, h4, h5 { font-variation-settings: 'opsz' 48; }

/* ---------------------------------------------------------
   Buttons: 4px radius, Deep Navy fill, Cream text.
   --------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button,
button.wp-block-search__button {
  border-radius: var(--hb-radius-button) !important;
  font-weight: 600;
  padding: 12px 22px;
  min-height: 44px;
  transition: background-color var(--hb-transition), box-shadow var(--hb-transition);
}
.wp-block-button.is-style-hb-primary .wp-block-button__link {
  background-color: #0E2340;
  color: #F4EEDF;
}
.wp-block-button.is-style-hb-primary .wp-block-button__link:hover,
.wp-block-button.is-style-hb-primary .wp-block-button__link:focus {
  background-color: #8E6A2A;
  outline: 2px solid #B58A3C;
  outline-offset: 3px;
}
.wp-block-button.is-style-hb-secondary .wp-block-button__link {
  background-color: transparent;
  color: #0E2340;
  border: 1px solid #0E2340;
  font-weight: 500;
}
.wp-block-button.is-style-hb-secondary .wp-block-button__link:hover {
  background-color: #0E2340;
  color: #F4EEDF;
}

/* Affiliate CTA button variant */
.wp-block-button.is-style-hb-affiliate .wp-block-button__link {
  background-color: #0E2340;
  color: #F4EEDF;
  padding-left: 18px;
}

/* ---------------------------------------------------------
   Eyebrows, labels, pills.
   --------------------------------------------------------- */

.hb-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B58A3C;
  margin-bottom: 12px;
  font-variation-settings: 'opsz' 14;
}
.hb-eyebrow--slate { color: #5C6373; }

.hb-since {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #B58A3C;
  font-variation-settings: 'opsz' 14;
}

.hb-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--hb-radius-pill);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.hb-pill--featured { background: #B58A3C; color: #081832; }
.hb-pill--sponsored { background: #A34A2C; color: #F4EEDF; }
.hb-pill--pillar { background: #FBF7EC; color: #0E2340; border: 1px solid #D8D1BE; }

.hb-affiliate-chip {
  display: inline-block;
  background: #FBF7EC;
  color: #5C6373;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  border: 1px solid #D8D1BE;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------
   Masthead (site header) rule.
   --------------------------------------------------------- */

.hb-masthead-rule {
  border: 0;
  border-top: 3px solid #B58A3C;
  margin: 0;
  padding: 0;
}
.hb-masthead-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #B58A3C;
  font-variation-settings: 'opsz' 14;
}

/* ---------------------------------------------------------
   Cards.
   --------------------------------------------------------- */

.hb-card {
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
  border-radius: var(--hb-radius-card);
  padding: 32px;
  box-shadow: var(--hb-shadow-card);
  transition: box-shadow var(--hb-transition);
}
.hb-card:hover { box-shadow: var(--hb-shadow-card-hover); }

.hb-card--cornerstone {
  background: #FBF7EC;
  border: 2px solid #B58A3C;
  border-radius: var(--hb-radius-card);
  padding: 32px;
}

.hb-card--news {
  background: #F4EEDF;
  border: 1px solid #D8D1BE;
  border-radius: var(--hb-radius-card);
  padding: 24px;
}

/* ---------------------------------------------------------
   Rubric summary card (top of vendor review page).
   --------------------------------------------------------- */

.hb-rubric-card {
  background: #0E2340;
  color: #F4EEDF;
  border-radius: var(--hb-radius-card);
  padding: 48px;
}
.hb-rubric-card h2, .hb-rubric-card h3 { color: #F4EEDF; }

.hb-rubric-bar {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: 16px;
  align-items: center;
  margin: 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.hb-rubric-bar__label { color: #F4EEDF; }
.hb-rubric-bar__track {
  height: 8px;
  background: rgba(244,238,223,0.18);
  border-radius: 999px;
  overflow: hidden;
}
.hb-rubric-bar__fill {
  height: 100%;
  background: #B58A3C;
  border-radius: 999px;
}
.hb-rubric-bar__score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  text-align: right;
  color: #F4EEDF;
}
.hb-rubric-score-badge {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: #F4EEDF;
}
.hb-rubric-score-badge__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: #B58A3C;
  margin-left: 4px;
}

/* ---------------------------------------------------------
   Comparison table (wide breakpoint).
   --------------------------------------------------------- */

.hb-comparison {
  max-width: var(--hb-max-comparison);
  margin-inline: auto;
  overflow-x: auto;
}
.hb-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
}
.hb-comparison th,
.hb-comparison td {
  padding: 14px 16px;
  border-bottom: 1px solid #D8D1BE;
  text-align: left;
  vertical-align: top;
}
.hb-comparison thead th {
  background: #0E2340;
  color: #F4EEDF;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 15px;
  text-align: left;
}
.hb-comparison td.hb-num,
.hb-comparison th.hb-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  text-align: right;
}
.hb-comparison tbody tr:nth-child(even) { background: #F4EEDF; }

/* ---------------------------------------------------------
   Byline strip, contributor bio.
   --------------------------------------------------------- */

.hb-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #5C6373;
  margin: 16px 0;
}
.hb-byline img,
.hb-byline .hb-byline__portrait {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: #D8D1BE;
  border: 1px solid #D8D1BE;
}
.hb-byline__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: #141821;
  border-bottom: 1px solid #B58A3C;
  text-decoration: none;
}
.hb-byline__meta { color: #5C6373; }

.hb-contributor-bio {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 32px;
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
  border-left: 3px solid #B58A3C;
  border-radius: var(--hb-radius-card);
  margin: 48px 0;
}
.hb-contributor-bio__portrait {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  background: #D8D1BE;
  border: 1px solid #D8D1BE;
}
.hb-contributor-bio__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: #141821;
  margin: 0 0 8px 0;
}
.hb-contributor-bio__meta {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #5C6373;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------
   Refresh cadence stamp, methodology inline.
   --------------------------------------------------------- */

.hb-refresh-stamp {
  display: inline-block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #5C6373;
  border-top: 1px solid #D8D1BE;
  border-bottom: 1px solid #D8D1BE;
  padding: 8px 0;
  margin: 16px 0;
}

.hb-methodology-inline {
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
  border-left: 3px solid #B58A3C;
  padding: 20px 24px;
  border-radius: 4px;
  font-size: 15px;
  color: #141821;
  margin: 32px 0;
}
.hb-methodology-inline a { color: #0E2340; border-bottom: 1px solid #B58A3C; }

/* ---------------------------------------------------------
   Trust strip (masthead 4 tiles).
   --------------------------------------------------------- */

.hb-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid #D8D1BE;
  border-bottom: 1px solid #D8D1BE;
}
.hb-trust-strip__tile { font-family: 'Inter', sans-serif; }
.hb-trust-strip__tile .hb-eyebrow { color: #B58A3C; margin-bottom: 4px; }
.hb-trust-strip__tile .hb-num { font-family: 'JetBrains Mono', monospace; color: #0E2340; }
@media (max-width: 782px) { .hb-trust-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ---------------------------------------------------------
   Pillar strip (5 tiles).
   --------------------------------------------------------- */

.hb-pillar-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.hb-pillar-strip__tile {
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
  border-radius: 4px;
  padding: 24px;
  text-decoration: none;
  color: #141821;
  transition: border-color var(--hb-transition), box-shadow var(--hb-transition);
}
.hb-pillar-strip__tile:hover {
  border-color: #B58A3C;
  box-shadow: var(--hb-shadow-card-hover);
}
.hb-pillar-strip__tile h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #0E2340;
  margin: 8px 0;
}
@media (max-width: 1024px) { .hb-pillar-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------
   Feature story card (masthead lead story).
   --------------------------------------------------------- */

.hb-feature-story {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid #D8D1BE;
  border-bottom: 1px solid #D8D1BE;
}
.hb-feature-story h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  margin: 8px 0;
}
@media (max-width: 782px) {
  .hb-feature-story { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------------------------------------------------------
   Editorial team band + methodology + advertise bands.
   --------------------------------------------------------- */

.hb-editorial-team {
  background: #FBF7EC;
  border-top: 1px solid #D8D1BE;
  border-bottom: 1px solid #D8D1BE;
  padding: 64px 0;
}
.hb-editorial-team__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.hb-editorial-team__member {
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.hb-editorial-team__portrait {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  background: #D8D1BE;
  border: 1px solid #D8D1BE;
  margin: 0 auto 12px auto;
}
.hb-editorial-team__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #141821;
  margin: 0;
}
.hb-editorial-team__role {
  font-size: 13px;
  color: #5C6373;
}

/* ---------------------------------------------------------
   Newsletter band (Weekly Check-In).
   --------------------------------------------------------- */

.hb-newsletter-band {
  background: #0E2340;
  color: #F4EEDF;
  border-top: 3px solid #B58A3C;
  padding: 64px;
  border-radius: 4px;
  margin: 48px auto;
}
.hb-newsletter-band h2 { color: #F4EEDF; }
.hb-newsletter-band__sub {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #F4EEDF;
  opacity: 0.9;
}
.hb-newsletter-band input[type="email"],
.hb-newsletter-band input[type="text"] {
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid #D8D1BE;
  background: #FBF7EC;
  color: #141821;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  min-width: 220px;
}

/* ---------------------------------------------------------
   Sister-brand footer block (Ink Navy).
   --------------------------------------------------------- */

.hb-sister-band {
  background: #081832;
  color: #F4EEDF;
  padding: 32px 40px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
.hb-sister-band a {
  color: #F4EEDF;
  border-bottom: 1px solid #B58A3C;
  text-decoration: none;
}
.hb-sister-band a:hover { color: #B58A3C; }

/* ---------------------------------------------------------
   Pillar hub hero (Deep Navy band).
   --------------------------------------------------------- */

.hb-pillar-hub-hero {
  background: #0E2340;
  color: #F4EEDF;
  padding: 96px 0;
  border-bottom: 3px solid #B58A3C;
}
.hb-pillar-hub-hero h1 { color: #F4EEDF; }
.hb-pillar-hub-hero .hb-eyebrow { color: #B58A3C; }
.hb-pillar-hub-hero .hb-byline__name { color: #F4EEDF; }
.hb-pillar-hub-hero .hb-byline__meta { color: #D8D1BE; }

/* ---------------------------------------------------------
   Correction log entry.
   --------------------------------------------------------- */

.hb-correction {
  background: #FBF7EC;
  border: 1px solid #D8D1BE;
  border-left: 3px solid #C79438;
  padding: 20px 24px;
  border-radius: 4px;
  margin: 16px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}
.hb-correction__date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #5C6373;
}

/* ---------------------------------------------------------
   Pull quote (Fraunces italic optical 48).
   --------------------------------------------------------- */

.hb-pullquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.35;
  color: #141821;
  border-left: 3px solid #B58A3C;
  padding-left: 32px;
  margin: 48px 0;
  font-variation-settings: 'opsz' 48;
}

/* ---------------------------------------------------------
   Mono for prices, KPIs, numerics.
   --------------------------------------------------------- */

.hb-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #141821;
}

/* ---------------------------------------------------------
   Focus states + reduced motion.
   --------------------------------------------------------- */

:focus-visible { outline: 2px solid #B58A3C; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}