/*
 * TravelKeeda Global Design System
 * ──────────────────────────────────────────────────────────────────
 * Paste this into: WordPress Admin → Appearance → Customize
 *                  → Additional CSS → paste here → Publish
 * ──────────────────────────────────────────────────────────────────
 */

/* ── 1. GOOGLE FONTS (Poppins + Inter) ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ── 2. BRAND COLOUR CUSTOM PROPERTIES ──────────────────────────── */
:root {
  /* Primary */
  --tk-navy:          #1C3464;
  --tk-amber:         #E8A020;
  --tk-white:         #FFFFFF;

  /* Extended */
  --tk-navy-dark:     #122244;
  --tk-navy-light:    #2B4A8A;
  --tk-amber-dark:    #C47D0A;
  --tk-amber-light:   #F5C24A;

  /* Neutrals */
  --tk-gray-900:      #1A1A2E;
  --tk-gray-700:      #374151;
  --tk-gray-500:      #6B7280;
  --tk-gray-200:      #E5E7EB;
  --tk-gray-50:       #F9FAFB;

  /* Status */
  --tk-success:       #10B981;
  --tk-warning:       #F59E0B;
  --tk-error:         #EF4444;
}

/* ── 3. TYPOGRAPHY ───────────────────────────────────────────────── */
/* Body text — Inter */
body,
.site-content,
.entry-content,
p, li, td, th,
input, textarea, select, button {
  font-family: 'Inter', sans-serif;
}

/* Headings — Poppins */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.main-title,
.widget-title,
.wp-block-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--tk-navy);
  line-height: 1.25;
}

/* Navigation — Poppins Semi-Bold */
.main-navigation,
.main-navigation a,
.nav-primary a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* ── 4. SITE-WIDE COLOUR OVERRIDES ──────────────────────────────── */
/* GeneratePress primary accent → Amber */
.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  background-color: var(--tk-amber);
  color: var(--tk-navy);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border: none;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
  background-color: var(--tk-amber-dark);
  color: var(--tk-white);
}

/* Links */
a {
  color: var(--tk-navy);
}
a:hover {
  color: var(--tk-amber);
}

/* ── 5. HEADER ───────────────────────────────────────────────────── */
/* Configure header background in: Appearance → Customize
   → Header → Background Color → set to #1C3464 (Navy)
   The CSS below adds fallback rules. */

.site-header {
  background-color: var(--tk-navy) !important;
}

.site-title,
.site-title a,
.site-description {
  color: var(--tk-white) !important;
}

.main-navigation a,
.nav-primary .main-nav a {
  color: var(--tk-white);
}

.main-navigation a:hover,
.nav-primary .main-nav a:hover {
  color: var(--tk-amber);
}

/* ── 6. FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--tk-navy-dark);
  color: var(--tk-gray-200);
}

.site-footer a {
  color: var(--tk-amber-light);
}

.site-footer a:hover {
  color: var(--tk-white);
}

/* ── 7. BODY & BACKGROUND ───────────────────────────────────────── */
body {
  color: var(--tk-gray-700);
  background-color: var(--tk-white);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 8. HEADINGS SCALE ──────────────────────────────────────────── */
h1 { font-size: clamp(2rem,   5vw, 3rem);   }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem,3vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* ── 9. SELECTION HIGHLIGHT ─────────────────────────────────────── */
::selection {
  background-color: var(--tk-amber-light);
  color: var(--tk-navy-dark);
}

/* ── 10. SCROLL BAR (WebKit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--tk-gray-50); }
::-webkit-scrollbar-thumb { background: var(--tk-navy-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tk-navy); }


/* === Homepage: Remove gap between header and hero === */
.home .site-main {
  margin-top: -24px !important;
}

.home .inside-article {
  padding-top: 0 !important;
}

/* ================================================
   HEADER REFINEMENT — Premium proportions
   ================================================ */

/* White header background */
.site-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* Navigation area: transparent */
.main-navigation,
.site-header .main-navigation,
.nav-float-right .main-navigation {
  background-color: transparent !important;
}

/* Search icon: navy on white */
.site-header .gp-icon,
.site-header .gp-icon.icon-search,
.site-header .search-toggle .gp-icon {
  color: #1C3464 !important;
}

/* Logo: natural display — no crop needed, clean logo file */
.site-header .header-image.is-logo-image {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  object-fit: unset !important;
  display: block;
}

.site-header .header-image-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* Hide site title and tagline text */
.site-header .site-description {
  display: none !important;
}

.site-header .site-title {
  display: none !important;
}

/* Header padding */
.site-header .inside-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  align-items: center;
  box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1024px) {
  .site-header .header-image.is-logo-image {
    width: 155px !important;
    max-width: 155px !important;
  }
}

/* Mobile landscape */
@media (max-width: 768px) {
  .site-header .header-image.is-logo-image {
    width: 130px !important;
    max-width: 130px !important;
  }
  .site-header .inside-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .site-header .header-image.is-logo-image {
    width: 110px !important;
    max-width: 110px !important;
  }
}

/* ================================================
   NAV LINK COLOURS
   ================================================ */

/* Default nav links: navy */
.main-navigation .main-nav ul li a {
  color: #1C3464 !important;
}

/* Active / current page: amber */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: #E8A020 !important;
}

/* Hover state: amber */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
  color: #E8A020 !important;
}

/* ================================================
   NAV VERTICAL ALIGNMENT
   ================================================ */

/* 8 nav links (973px) + search (55px) = 1028px in the default
   1020px nav space (logo=180px). Reducing logo to 150px frees
   ~30px extra, giving ~1050px nav space — everything fits in
   one row. The header's existing align-items:center then
   centres the 60px nav row alongside the 100px logo. */

/* ================================================
   GLOBAL LAYOUT — Phase 4 Task 4.2
   Three-column desktop: Left ad rail | Content | Right ad rail
   Tablet: Single column, content expands
   Mobile: Full-width, ready for in-content ads
   Homepage excluded via body:not(.home)
   ================================================ */

/* Suppress built-in sidebar on all content pages */
body:not(.home) .widget-area {
  display: none !important;
}

/* === DESKTOP: Three-column grid === */
body:not(.home) .site-content {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  grid-template-areas: "left-rail content-area right-rail";
  column-gap: 24px;
  max-width: 1280px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: start;
  box-sizing: border-box;
}

/* Left advertisement rail — reserved for future AdSense */
body:not(.home) .site-content::before {
  content: '';
  grid-area: left-rail;
  min-height: 1px;
}

/* Right advertisement rail — reserved for future AdSense */
body:not(.home) .site-content::after {
  content: '';
  grid-area: right-rail;
  min-height: 1px;
}

/* Centre content column */
body:not(.home) .content-area {
  grid-area: content-area;
  min-width: 0;
}

/* === TABLET (769px – 1100px): Ad rails collapse, content expands === */
@media (max-width: 1100px) {
  body:not(.home) .site-content {
    display: block !important;
    max-width: 780px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* === MOBILE (max 768px): Full-width, ready for in-content ads === */
@media (max-width: 768px) {
  body:not(.home) .site-content {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ================================================================
 * Block 6: Destination Template Visual Redesign
 * Premium travel-publication styling for the Master Destination
 * Template (tk-* classNames). CSS-only, no plugins, no JS.
 * Brand palette: Navy #1C3464 / Amber #E8A020 (with safe var()
 * fallbacks in case --tk-navy / --tk-amber are renamed later).
 * ================================================================ */

/* ---- 6.1 Local design tokens (fallback-safe) ------------------ */
.tk-hero, .tk-prose, .tk-card-grid, .tk-card, .tk-feature-panel,
.tk-affiliate-box, .tk-itinerary-card, .tk-faq-list, .tk-related-block,
.tk-resources-block, .tk-final-cta, .tk-page-meta {
  --tkx-navy: var(--tk-navy, #1C3464);
  --tkx-amber: var(--tk-amber, #E8A020);
  --tkx-ink: #2b2f36;
  --tkx-muted: #6b7280;
  --tkx-line: #e7e7ec;
  --tkx-surface: #ffffff;
  --tkx-surface-soft: #f7f8fb;
  --tkx-radius: 14px;
  --tkx-shadow: 0 2px 10px rgba(28, 52, 100, 0.06);
  --tkx-shadow-hover: 0 10px 28px rgba(28, 52, 100, 0.12);
}

/* ---- 6.2 Typography hierarchy ---------------------------------- */
.entry-content h1 {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tkx-navy, #1C3464);
}

.entry-content h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tkx-navy, #1C3464);
  margin-top: 3.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--tkx-line, #e7e7ec);
  position: relative;
}

.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: var(--tkx-amber, #E8A020);
}

.entry-content h3 {
  font-size: 1.18rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--tkx-navy, #1C3464);
}

.entry-content p {
  color: var(--tkx-ink, #2b2f36);
  line-height: 1.75;
  font-size: 1.04rem;
}

.entry-content ul, .entry-content ol {
  line-height: 1.75;
}

/* ---- 6.3 Hero section ------------------------------------------ */
.tk-hero {
  background: linear-gradient(160deg, var(--tkx-navy, #1C3464) 0%, #28447f 100%);
  border-radius: var(--tkx-radius);
  padding: 3.25rem 2.5rem;
  margin-bottom: 2.75rem;
  color: #ffffff;
}

.tk-hero h1 {
  color: #ffffff !important;
  margin-top: 0;
  margin-bottom: 0.9rem;
}

.tk-hero p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 1.18rem;
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .tk-hero { padding: 2.25rem 1.5rem; }
}

/* ---- 6.4 Intro prose -------------------------------------------- */
.tk-prose p {
  font-size: 1.08rem;
  max-width: 75ch;
}

/* ---- 6.5 Card grids ----------------------------------------------*/
.tk-card-grid {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.tk-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tk-card-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .tk-card-grid--3,
  .tk-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tk-card-grid--3,
  .tk-card-grid--4 { grid-template-columns: 1fr; }
}

/* ---- 6.6 Card base ----------------------------------------------*/
.tk-card {
  background: var(--tkx-surface, #fff);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-radius: var(--tkx-radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--tkx-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tk-card:hover {
  box-shadow: var(--tkx-shadow-hover);
  transform: translateY(-2px);
}

.tk-card h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.08rem;
}

.tk-card p {
  font-size: 0.98rem;
  margin-bottom: 0;
  color: var(--tkx-muted, #6b7280);
}

.tk-card p:first-of-type { margin-top: 0; }

/* ---- 6.7 Best Time to Visit (season cards) ----------------------*/
.tk-season-card--peak h3::before { content: "\2600\FE0F  "; }
.tk-season-card--shoulder h3::before { content: "\1F342  "; }
.tk-season-card--off h3::before { content: "\1F327\FE0F  "; }

.tk-season-card--peak { border-top: 3px solid var(--tkx-amber, #E8A020); }
.tk-season-card--shoulder { border-top: 3px solid #8aa4d1; }
.tk-season-card--off { border-top: 3px solid #c7ccd6; }

/* ---- 6.8 Visa Information cards ----------------------------------*/
.tk-visa-card h3::before { content: "\1F6C2  "; }
.tk-visa-card { background: var(--tkx-surface-soft, #f7f8fb); }

/* ---- 6.9 How to Reach / Getting Around (transport cards) ---------*/
.tk-transport-card--air h3::before { content: "\2708\FE0F  "; }
.tk-transport-card--land h3::before { content: "\1F686  "; }
.tk-transport-card--sea h3::before { content: "\26F4\FE0F  "; }
.tk-transport-card--public h3::before { content: "\1F68C  "; }
.tk-transport-card--taxi h3::before { content: "\1F695  "; }
.tk-transport-card--rental h3::before { content: "\1F6F5  "; }

/* ---- 6.10 Where to Stay cards -------------------------------------*/
.tk-stay-card--areas h3::before { content: "\1F4CD  "; }
.tk-stay-card--who h3::before { content: "\1F465  "; }
.tk-stay-card--types h3::before { content: "\1F3E8  "; }

/* ---- 6.11 Top Things To Do panel ----------------------------------*/
.tk-feature-panel {
  background: var(--tkx-surface-soft, #f7f8fb);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-radius: var(--tkx-radius);
  padding: 2rem 2.25rem;
  margin: 1.5rem 0 2.5rem;
}

.tk-feature-panel h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tk-feature-panel > .wp-block-group,
.tk-feature-panel .tk-card {
  background: var(--tkx-surface, #fff);
}

/* ---- 6.12 Budget section -------------------------------------------*/
.tk-budget-card {
  text-align: center;
  position: relative;
}

.tk-budget-card--budget h3::before { content: "\1F4B5  "; }
.tk-budget-card--mid h3::before { content: "\1F4B3  "; }
.tk-budget-card--luxury h3::before { content: "\1F48E  "; }

.tk-budget-card--featured {
  border: 2px solid var(--tkx-amber, #E8A020);
  box-shadow: var(--tkx-shadow-hover);
  transform: scale(1.02);
}

.tk-budget-card--featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tkx-amber, #E8A020);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.tk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

@media (max-width: 700px) {
  .tk-two-col { grid-template-columns: 1fr; }
}

.tk-budget-info-card {
  background: var(--tkx-surface-soft, #f7f8fb);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-radius: var(--tkx-radius);
  padding: 1.5rem 1.6rem;
}

/* ---- 6.13 Connectivity cards -----------------------------------------*/
.tk-connect-card--sim h3::before { content: "\1F4F6  "; }
.tk-connect-card--esim h3::before { content: "\1F4F1  "; }
.tk-connect-card--wifi h3::before { content: "\1F4E1  "; }

.tk-affiliate-box--nested {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
}

/* ---- 6.14 Packing Essentials cards ------------------------------------*/
.tk-pack-card--documents h3::before { content: "\1F6C2  "; }
.tk-pack-card--clothing h3::before { content: "\1F455  "; }
.tk-pack-card--health h3::before { content: "\1F48A  "; }
.tk-pack-card--tech h3::before { content: "\1F50C  "; }

/* ---- 6.15 Affiliate callout boxes -------------------------------------*/
.tk-affiliate-box {
  background: linear-gradient(135deg, #fff7ea 0%, #fff 100%);
  border: 1px solid #f1d9a8;
  border-left: 4px solid var(--tkx-amber, #E8A020);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2.5rem;
}

.tk-affiliate-box p { margin-bottom: 0.75rem; }
.tk-affiliate-box p:last-child { margin-bottom: 0; }

.tk-affiliate-box .wp-block-button__link,
.tk-affiliate-box a.wp-block-button__link {
  background-color: var(--tkx-navy, #1C3464);
  border-radius: 8px;
}

/* ---- 6.16 Suggested Itinerary big card --------------------------------*/
.tk-itinerary-card {
  background: var(--tkx-surface, #fff);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--tkx-shadow);
  margin: 1.5rem 0 2.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tk-itinerary-card:hover {
  box-shadow: var(--tkx-shadow-hover);
  transform: translateY(-2px);
}

.tk-itinerary-card > * {
  padding-left: 2rem;
  padding-right: 2rem;
}

.tk-itinerary-card > *:first-child { padding-top: 2rem; }
.tk-itinerary-card > *:last-child { padding-bottom: 2rem; }

.tk-itinerary-card img {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  border-radius: 0;
  display: block;
}

.tk-itinerary-card figure,
.tk-itinerary-card .wp-block-image {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin: 0 0 1.5rem 0;
}

.tk-itinerary-card h2,
.tk-itinerary-card h3 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.tk-itinerary-card .wp-block-button__link {
  background-color: var(--tkx-amber, #E8A020);
  color: #1C3464;
  font-weight: 600;
  border-radius: 8px;
}

/* ---- 6.17 FAQ section --------------------------------------------------*/
.tk-faq-list {
  margin: 1.5rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tk-faq-item {
  background: var(--tkx-surface, #fff);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-left: 4px solid var(--tkx-navy, #1C3464);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.tk-faq-item h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.04rem;
  display: flex;
  gap: 0.5rem;
}

.tk-faq-item h3::before { content: "Q."; color: var(--tkx-amber, #E8A020); font-weight: 700; }

.tk-faq-item p {
  margin-bottom: 0;
  color: var(--tkx-muted, #6b7280);
}

/* ---- 6.18 Related guides + Official resources --------------------------*/
.tk-related-block,
.tk-resources-block {
  background: var(--tkx-surface-soft, #f7f8fb);
  border: 1px solid var(--tkx-line, #e7e7ec);
  border-radius: var(--tkx-radius);
  padding: 1.75rem 2rem;
  margin: 1.5rem 0 2.5rem;
}

.tk-related-block h2,
.tk-resources-block h2 {
  margin-top: 0;
}

.tk-related-block ul,
.tk-resources-block ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.tk-related-block li,
.tk-resources-block li {
  margin-bottom: 0.5rem;
}

.tk-resources-block a,
.tk-related-block a {
  color: var(--tkx-navy, #1C3464);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tkx-amber, #E8A020);
}

.tk-resources-block a:hover,
.tk-related-block a:hover {
  color: var(--tkx-amber, #E8A020);
}

/* ---- 6.19 Final CTA -----------------------------------------------------*/
.tk-final-cta {
  background: linear-gradient(160deg, var(--tkx-navy, #1C3464) 0%, #28447f 100%);
  border-radius: var(--tkx-radius);
  padding: 3rem 2.5rem;
  margin: 3rem 0 2.5rem;
  text-align: center;
}

.tk-final-cta h2 {
  color: #ffffff;
  border-bottom: none;
  margin-top: 0;
}

.tk-final-cta h2::after { display: none; }

.tk-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 60ch;
  margin: 0 auto 1.75rem;
}

.tk-final-cta .wp-block-buttons {
  justify-content: center;
  gap: 1rem;
}

.tk-final-cta .wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--tkx-amber, #E8A020);
  color: var(--tkx-navy, #1C3464);
  font-weight: 700;
  border-radius: 8px;
  padding: 0.85rem 1.6rem;
}

.tk-final-cta .wp-block-button.is-style-outline .wp-block-button__link {
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.8rem 1.55rem;
}

.tk-final-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 600px) {
  .tk-final-cta { padding: 2.25rem 1.5rem; }
  .tk-final-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
}

/* ---- 6.20 Page meta footer ------------------------------------------------*/
.tk-page-meta {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tkx-line, #e7e7ec);
}

.tk-page-meta p {
  font-size: 0.85rem;
  color: var(--tkx-muted, #6b7280);
}

/* ==========================================================
   6.21 FIX: WordPress Group block inner-container unwrap
   WordPress/GeneratePress auto-wraps Group block InnerBlocks in
   .wp-block-group__inner-container, which breaks direct-child
   grid/flex selectors. This neutralizes that wrapper for layout
   purposes on grid/flex containers, and fixes itinerary card padding.
   ========================================================== */
.tk-card-grid > .wp-block-group__inner-container,
.tk-two-col > .wp-block-group__inner-container,
.tk-faq-list > .wp-block-group__inner-container {
  display: contents;
}

.tk-itinerary-card > .wp-block-group__inner-container {
  display: block;
  padding: 2rem;
}
.tk-itinerary-card > .wp-block-group__inner-container > *:first-child {
  margin-top: 0;
}
.tk-itinerary-card > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}
.tk-itinerary-card figure,
.tk-itinerary-card .wp-block-image {
  margin: -2rem -2rem 1.5rem -2rem;
}
.tk-itinerary-card figure img,
.tk-itinerary-card .wp-block-image img {
  border-radius: var(--tkx-radius, 12px) var(--tkx-radius, 12px) 0 0;
  display: block;
  width: 100%;
}
.tk-itinerary-card > * {
  padding-left: 0;
  padding-right: 0;
}
.tk-itinerary-card > *:first-child,
.tk-itinerary-card > *:last-child {
  padding-top: 0;
  padding-bottom: 0;
}


/* 6.22 FIX: override accidental zero top/bottom padding from
   legacy first-child/last-child rule re-included in 6.21 patch
   (it now matches the real inner-container, same specificity,
   later source order, so it was winning the cascade). Use a
   doubled-class selector for unambiguous higher specificity. */
.tk-itinerary-card > .wp-block-group__inner-container.wp-block-group__inner-container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}


/* ================================================================
 * 6.23 FIX: rem -> px unit correction
 * Root cause: the site's pre-existing html{font-size:28px} (a
 * site-wide GeneratePress typography setting, not part of this
 * redesign) scales every rem value 1.75x. All Block 6 rules were
 * authored assuming the standard 16px root, so font sizes and
 * spacing were rendering 75% larger than intended, causing
 * placeholder text to wrap into very tall cards and grid "stretch"
 * to leave large blank gaps in shorter neighboring cards.
 * Fix: redeclare every affected property in fixed px (intended
 * value = original rem * 16), reusing the exact same selectors so
 * normal cascade order (this block loads last) wins outright, with
 * no dependency on html font-size.
 * ================================================================ */

.entry-content h1 {
  font-size: clamp(33.6px, 25.6px + 2vw, 49.6px);
}
.entry-content h2 {
  font-size: clamp(24px, 20.8px + 0.8vw, 32px);
  margin-top: 52px;
  margin-bottom: 20px;
  padding-bottom: 10.4px;
}
.entry-content h3 {
  font-size: 18.88px;
}
.entry-content p {
  line-height: 1.75;
  font-size: 16.64px;
}

.tk-hero {
  padding: 52px 40px;
  margin-bottom: 44px;
}
.tk-hero h1 {
  margin-bottom: 14.4px;
}
.tk-hero p {
  font-size: 18.88px;
}
@media (max-width: 600px) {
  .tk-hero { padding: 36px 24px; }
}

.tk-prose p {
  font-size: 17.28px;
}

.tk-card-grid {
  gap: 24px;
  margin: 24px 0 40px;
}

.tk-card {
  padding: 25.6px 24px;
}
.tk-card h3 {
  margin-bottom: 9.6px;
  font-size: 17.28px;
}
.tk-card p {
  font-size: 15.68px;
}

.tk-feature-panel {
  padding: 32px 36px;
  margin: 24px 0 40px;
}
.tk-feature-panel h3 {
  gap: 8px;
}

.tk-budget-card--featured::before {
  font-size: 10.88px;
  padding: 4px 12px;
}
.tk-two-col {
  gap: 24px;
  margin: 24px 0 40px;
}
.tk-budget-info-card {
  padding: 24px 25.6px;
}

.tk-affiliate-box--nested {
  margin-top: 17.6px;
  padding: 16px 17.6px;
}

.tk-affiliate-box {
  padding: 24px 28px;
  margin: 24px 0 40px;
}
.tk-affiliate-box p { margin-bottom: 12px; }

.tk-itinerary-card {
  margin: 24px 0 40px;
}

.tk-itinerary-card > .wp-block-group__inner-container.wp-block-group__inner-container {
  padding: 32px;
}
.tk-itinerary-card figure,
.tk-itinerary-card .wp-block-image {
  margin: -32px -32px 24px -32px;
}

.tk-faq-list {
  margin: 24px 0 40px;
  gap: 16px;
}
.tk-faq-item {
  padding: 20px 24px;
}
.tk-faq-item h3 {
  margin-bottom: 8px;
  font-size: 16.64px;
  gap: 8px;
}

.tk-related-block,
.tk-resources-block {
  padding: 28px 32px;
  margin: 24px 0 40px;
}
.tk-related-block ul,
.tk-resources-block ul {
  padding-left: 19.2px;
}
.tk-related-block li,
.tk-resources-block li {
  margin-bottom: 8px;
}

.tk-final-cta {
  padding: 48px 40px;
  margin: 48px 0 40px;
}
.tk-final-cta p {
  margin: 0 auto 28px;
}
.tk-final-cta .wp-block-buttons {
  gap: 16px;
}
.tk-final-cta .wp-block-button.is-style-fill .wp-block-button__link {
  padding: 13.6px 25.6px;
}
.tk-final-cta .wp-block-button.is-style-outline .wp-block-button__link {
  padding: 12.8px 24.8px;
}
@media (max-width: 600px) {
  .tk-final-cta { padding: 36px 24px; }
}

.tk-page-meta {
  margin-top: 48px;
  padding-top: 24px;
}
.tk-page-meta p {
  font-size: 13.6px;
}