/*
Theme Name: Roam The States
Theme URI: https://roamthestates.com
Author: Roam The States
Author URI: https://roamthestates.com
Description: Editorial road-trip theme for Roam The States. Cinematic imagery, warm neutral ground, dark navy type and a restrained copper accent, built around a custom "Road" content type for Route 66, the Pacific Coast Highway, the Blue Ridge Parkway and the Overseas Highway.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: roam-the-states
*/

/* ==========================================================================
   Roam The States — shared stylesheet
   Editorial, cinematic, uncluttered. Warm neutral ground, dark navy type,
   restrained copper accent. Built as a premium road-trip magazine, not a
   booking portal.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  --bg:            #F4EEE3;
  --bg-alt:        #EAE0CD;
  --surface:       #FFFDF9;
  --navy:          #1E2A38;
  --navy-soft:     #48576A;
  --copper:        #AD6A3E;
  --copper-deep:   #8A5230;
  --line:          rgba(30,42,56,0.14);
  --line-strong:   rgba(30,42,56,0.28);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --content-width: 1160px;
  --measure: 66ch;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1.2em; }
.wrap{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px){
  .wrap{ padding: 0 20px; }
  body{ font-size: 16px; }
}

/* -------------------------------- Header ------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(244,238,227,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content: space-between;
  height: 76px;
}
.wordmark{
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration:none;
  color: var(--navy);
}
.wordmark span{ color: var(--copper); }
.main-nav{ display:flex; gap: 34px; }
.main-nav a{
  text-decoration:none;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a:hover, .main-nav a.active{
  color: var(--navy);
  border-color: var(--copper);
}

/* -------------------------------- Footer ------------------------------- */
.site-footer{
  background: var(--navy);
  color: #E7E0D2;
  margin-top: 120px;
}
.site-footer .wrap{
  padding-top: 56px; padding-bottom: 40px;
  display:flex; flex-wrap:wrap; gap: 32px;
  align-items:flex-start; justify-content: space-between;
}
.footer-brand .wordmark{ color: #F4EEE3; }
.footer-brand .wordmark span{ color: #D89B71; }
.footer-tag{
  color: #AEB9C6; font-size: 14.5px; margin-top: 10px; max-width: 34ch;
}
.footer-links{ display:flex; gap: 28px; flex-wrap:wrap; }
.footer-links a{
  text-decoration:none; color:#CBD2DA; font-size: 14.5px;
}
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-bottom .wrap{
  padding: 18px 32px; font-size: 13px; color:#8D97A4;
  display:flex; justify-content: space-between; flex-wrap:wrap; gap:8px;
}

/* --------------------------- Buttons / links ---------------------------- */
.btn{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  text-decoration:none;
  padding: 14px 30px;
  border-radius: 2px;
  background: var(--copper);
  color: #FFF9F2;
  transition: background .15s ease;
}
.btn:hover{ background: var(--copper-deep); }
.text-link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight: 600; font-size: 15px; text-decoration:none;
  color: var(--navy);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.text-link:hover{ color: var(--copper-deep); border-color: var(--copper-deep); }

/* ---------------------------------- Hero -------------------------------- */
.hero{ position:relative; color: #FBF7EF; }
.hero .photo-frame{ height: 62vh; min-height: 420px; }
.hero-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding: 56px 32px 52px;
}
.hero-copy .wrap{ padding:0; }
.hero-eyebrow{
  font-size: 14.5px; color:#E9D6C0; margin-bottom: 10px; font-weight:500;
}
.hero h1{ font-size: clamp(36px, 5.4vw, 62px); color:#fff; max-width: 14ch; }
.hero-sub{
  font-size: 18px; color:#EFE7D8; max-width: 52ch; margin: 14px 0 26px;
}
.hero-actions{ display:flex; align-items:center; gap: 24px; flex-wrap:wrap; }

/* small hero used on interior pages (road pages, about, roads overview) */
.hero.hero--road .photo-frame{ height: 48vh; min-height: 340px; }

/* ------------------------------ Photo frame ------------------------------
   Placeholder component standing in for the licensed Pexels photography.
   Preserves the specified aspect ratio and carries the sourcing note from
   the copy deck so production can swap in the real asset directly. */
.photo-frame{
  position:relative;
  width:100%;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(30,42,56,0.06) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #DCD0B7 0%, #C9B98F 55%, #B7A379 100%);
  display:flex; align-items:center; justify-content:center;
}
.photo-frame.ratio-cinema{ aspect-ratio: 21 / 9; }
.photo-frame.ratio-wide{   aspect-ratio: 16 / 9; }
.photo-frame.ratio-card{   aspect-ratio: 4 / 3; }
.photo-frame.ratio-map{    aspect-ratio: 3 / 2; }

/* ---------------------------- Image sizing --------------------------------
   Best-practice fill behaviour for any real photo placed inside a
   .photo-frame: always cover the fixed-aspect box, crop instead of
   stretch, and never distort regardless of the source image's native
   dimensions. Explicit width/height/object-fit takes precedence over
   any width/height attributes WordPress adds to the <img> tag. */
.photo-frame > img,
.photo-frame .rts-fill-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Prioritise the top of the frame when cropping — useful for hero shots
   and graphics (skylines, signage, map titles) rather than cutting the
   subject out of the middle. */
.rts-fill-image--top{ object-position: center top; }
.photo-frame .mark{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: rgba(30,42,56,0.55);
  text-align:center; padding: 0 24px;
}
.photo-frame .mark svg{ width:34px; height:34px; opacity:.8; }
.photo-frame .mark .label{
  font-family: var(--serif); font-size: 15px; font-style:italic;
  max-width: 30ch;
}
.hero .photo-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(20,28,38,0.82) 0%, rgba(20,28,38,0.28) 46%, rgba(20,28,38,0.05) 72%);
}
figure.figure{ margin:0; }
figcaption.credit{
  font-size: 13px; color: var(--navy-soft); margin-top: 10px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
figcaption.credit a{ color: var(--copper-deep); text-decoration:none; border-bottom:1px solid currentColor; }

/* --------------------------------- Sections ------------------------------ */
.section{ padding: 96px 0; }
.section.tight{ padding: 64px 0; }
.section-heading{ max-width: 52ch; margin-bottom: 44px; }
.section-heading h2{ font-size: clamp(26px, 3vw, 36px); }
.section-heading p{ color: var(--navy-soft); font-size: 17px; margin-top:12px; }
.eyebrow-plain{
  color: var(--copper-deep); font-weight:600; font-size: 14px; margin-bottom: 8px;
}
.lede{ font-size: 20px; line-height:1.65; color: var(--navy-soft); max-width: var(--measure); }
.prose{ max-width: var(--measure); }
.prose p{ color: var(--navy-soft); }

/* -------------------------------- Road cards ------------------------------ */
.road-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px;
}
@media (max-width: 760px){ .road-grid{ grid-template-columns: 1fr; } }
.road-card{ text-decoration:none; color:inherit; display:block; }
.road-card h3{ font-size: 24px; margin: 20px 0 8px; }
.road-card p{ color: var(--navy-soft); font-size: 15.5px; margin-bottom: 12px; }
.road-card .text-link{ font-size: 14.5px; }

/* ------------------------------ Highlights row ---------------------------- */
.highlight-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
@media (max-width: 860px){ .highlight-grid{ grid-template-columns: 1fr; } }
.highlight h4{ font-size: 19px; margin: 18px 0 6px; }
.highlight p{ color: var(--navy-soft); font-size: 15px; }

/* -------------------------------- Facts list ------------------------------ */
.fact-list{ list-style:none; margin: 28px 0 0; padding:0; max-width: var(--measure); }
.fact-list li{
  display:flex; gap:14px; padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.fact-list li:last-child{ border-bottom: 1px solid var(--line); }
.fact-list .fk{ color: var(--copper-deep); font-weight:600; min-width: 148px; }
.fact-list .fv{ color: var(--navy-soft); }

/* -------------------------------- Panels ---------------------------------- */
.panel{
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  padding: 44px;
  border-radius: 3px;
}
.panel h3{ font-size: 24px; }
.panel p{ color: var(--navy-soft); max-width: 58ch; }
.badge{
  display:inline-block; font-size: 12.5px; font-weight:700; letter-spacing:0.03em;
  color: var(--copper-deep); background: rgba(173,106,62,0.12);
  padding: 6px 12px; border-radius: 2px; margin-top: 8px;
}

/* Disabled widget mock — represents the future hotel-comparison tool  */
.widget-mock{
  margin-top: 28px; display:flex; flex-wrap:wrap; gap: 10px;
}
.widget-mock .field{
  flex: 1 1 150px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 12px 14px; font-size: 13.5px; color: var(--navy-soft);
  opacity: .65;
}
.widget-mock .go{
  flex: 0 0 auto;
  background: var(--line-strong); color: var(--surface);
  border:none; padding: 12px 22px; font-size: 13.5px; font-weight:600;
  opacity:.65; cursor: not-allowed;
}

/* -------------------------------- Pull quote ------------------------------ */
.story{ max-width: var(--measure); }
.story p{ color: var(--navy-soft); }
.story p:first-of-type::first-letter{
  font-family: var(--serif); font-size: 64px; float:left; line-height:0.8;
  padding: 8px 8px 0 0; color: var(--copper); font-weight:500;
}

/* -------------------------------- Map section ------------------------------ */
.map-labels{
  display:flex; gap: 10px 22px; flex-wrap:wrap; margin-top: 18px;
}
.map-labels span{
  font-size: 14px; color: var(--navy-soft);
  padding-left: 16px; position:relative;
}
.map-labels span::before{
  content:""; position:absolute; left:0; top:6px;
  width:8px; height:8px; border-radius:50%; background: var(--copper);
}

/* -------------------------------- Legal pages ------------------------------ */
.notice-banner{
  background: #EFE2CC; border:1px solid var(--line-strong);
  padding: 18px 22px; font-size: 14.5px; color: var(--navy-soft);
  margin-bottom: 48px; max-width: var(--measure);
}
.legal h2{ font-size: 21px; margin-top: 44px; }
.legal p, .legal li{ color: var(--navy-soft); font-size: 15.5px; }
.legal .fillin{
  background: rgba(173,106,62,0.12); color: var(--copper-deep);
  font-family: 'Public Sans', monospace; font-size: 14px;
  padding: 1px 6px; border-radius:2px;
}

/* -------------------------------- Checklist -------------------------------- */
.checklist{ list-style:none; margin:0; padding:0; max-width: var(--measure); }
.checklist li{
  display:flex; gap:12px; padding: 10px 0; border-top:1px solid var(--line);
  font-size:15px; color: var(--navy-soft);
}
.checklist li:last-child{ border-bottom:1px solid var(--line); }
.checklist li::before{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-top:2px;
  border:1.5px solid var(--line-strong);
}

/* ------------------------------ Two column layout --------------------------- */
.two-col{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

/* ============================ WordPress-specific ========================= */

/* Nav menus rendered via wp_nav_menu() reuse the static markup's look */
.main-nav ul, .footer-links ul{ list-style:none; margin:0; padding:0; display:flex; }
.main-nav ul{ gap:34px; }
.footer-links ul{ gap:28px; flex-wrap:wrap; }
.main-nav li, .footer-links li{ margin:0; }
.main-nav a{ display:inline-block; }
.main-nav li.current-menu-item > a,
.main-nav li.current_page_item > a{ color:var(--navy); border-color:var(--copper); }

/* Admin bar offset for the sticky header while logged in */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }

/* Basic Gutenberg / core block support inside the_content() */
.entry-content, .prose{ }
.entry-content > *:last-child{ margin-bottom:0; }
.entry-content img{ height:auto; }
.entry-content .alignwide{ max-width: calc(var(--measure) + 200px); }
.entry-content .alignfull{ max-width:100vw; }
.entry-content figcaption{ font-size:13px; color:var(--navy-soft); margin-top:6px; }
.entry-content blockquote{
  border-left:2px solid var(--copper); margin:24px 0; padding-left:20px;
  font-family:var(--serif); font-style:italic; font-size:19px; color:var(--navy);
}
.entry-content ul, .entry-content ol{ color:var(--navy-soft); padding-left:1.2em; }
.entry-content a{ color:var(--copper-deep); }

/* Screen-reader text (used for skip link / form labels) */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:12px 18px; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }