/*
Theme Name:   Two For The Road
Theme URI:    https://example.com/two-for-the-road
Author:       Two For The Road
Author URI:   https://example.com
Description:  A vintage travel-poster styled theme for Two For The Road, a walking history TV series. Fully customisable colours, hero content, social links and footer via the Customizer, plus a News section and a "Gary's Artifacts" custom post type for historical (and comical) finds. Pages ship blank and ready for your own content.
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  two-for-the-road
Tags:         custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready

Two For The Road WordPress Theme
Built for a walking history series following presenters Gary and Steve.
*/

/* =====================================================
   1. DEFAULT PALETTE (overridden per-site via Customizer,
      see inc/customizer.php — these are just the fallbacks
      so the theme looks right before anyone touches a setting)
   ===================================================== */
:root{
  --tftr-forest:#1f4d38;
  --tftr-forest-dark:#143528;
  --tftr-forest-light:#2f6b4a;
  --tftr-cream:#f4ecd6;
  --tftr-cream-dark:#ead8ad;
  --tftr-paper:#faf4e6;
  --tftr-rust:#c1502e;
  --tftr-rust-dark:#9c3d22;
  --tftr-gold:#d9a441;
  --tftr-navy:#1c2b39;
  --tftr-ink:#2a2016;
  --tftr-radius:6px;
  --tftr-shadow:0 10px 30px rgba(28,43,57,0.15);
}

/* =====================================================
   2. RESET / BASE
   ===================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lora', Georgia, serif;
  background:var(--tftr-cream);
  color:var(--tftr-ink);
  line-height:1.65;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--tftr-rust); text-decoration:none;}
a:hover{text-decoration:underline;}
ul.menu, ul.menu ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4,.display{
  font-family:'Anton','Oswald',sans-serif;
  letter-spacing:0.5px;
  text-transform:uppercase;
  line-height:1.08;
  margin:0 0 0.5em 0;
  color:var(--tftr-forest-dark);
}
.nav-font{font-family:'Oswald', sans-serif;}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}
.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--tftr-rust); color:#fff; padding:12px 20px;
}
.skip-link:focus{left:12px; top:12px;}

/* =====================================================
   3. HEADER / NAVIGATION
   ===================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--tftr-forest-dark);
  border-bottom:4px solid var(--tftr-gold);
  box-shadow:var(--tftr-shadow);
}
.nav-wrap{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
}
.site-branding{display:flex; align-items:center; gap:10px; color:var(--tftr-cream);}
.site-branding img.custom-logo{max-height:56px; width:auto;}
.mile-marker{
  width:38px; height:38px; border-radius:50%;
  background:var(--tftr-rust); border:3px solid var(--tftr-cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:1.1rem; color:var(--tftr-cream);
  flex:none;
}
.site-title{
  font-family:'Anton', sans-serif; font-size:1.2rem; letter-spacing:1px;
  color:var(--tftr-cream); margin:0; text-transform:uppercase; line-height:1.15;
}
.site-title a{color:var(--tftr-cream);}
.site-title a:hover{text-decoration:none; color:var(--tftr-gold);}
.site-description{
  font-family:'Oswald',sans-serif; font-size:0.7rem; color:var(--tftr-gold);
  text-transform:uppercase; letter-spacing:1px; margin:0;
}
.main-navigation ul{display:flex; gap:6px; flex-wrap:wrap;}
.main-navigation a{
  font-family:'Oswald', sans-serif; font-size:0.92rem; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--tftr-cream);
  padding:10px 14px; border-radius:4px; display:inline-block;
  transition:background .2s ease, color .2s ease;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{
  background:var(--tftr-rust); color:#fff; text-decoration:none;
}
.menu-toggle{
  display:none; background:none; border:2px solid var(--tftr-cream);
  color:var(--tftr-cream); font-family:'Oswald',sans-serif;
  padding:6px 10px; border-radius:4px; cursor:pointer;
}

/* =====================================================
   4. HERO (front page)
   ===================================================== */
.hero{
  position:relative;
  background-color:var(--tftr-cream);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tftr-forest-light) 35%, var(--tftr-cream)) 0%, var(--tftr-cream) 55%);
  overflow:hidden;
  padding:64px 0 0 0;
  border-bottom:6px solid var(--tftr-forest-dark);
}
.hero-inner{max-width:1100px; margin:0 auto; padding:0 24px 40px 24px; text-align:center;}
.eyebrow{
  display:inline-block; font-family:'Oswald',sans-serif; letter-spacing:3px;
  text-transform:uppercase; color:var(--tftr-rust); font-size:0.85rem;
  background:var(--tftr-paper); border:1px solid var(--tftr-rust);
  padding:6px 16px; border-radius:100px; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.6rem, 8vw, 5.2rem);
  color:var(--tftr-forest-dark);
  text-shadow:4px 4px 0 var(--tftr-rust);
  margin-bottom:10px;
}
.hero-tagline{
  font-family:'Oswald', sans-serif; font-size:clamp(1.1rem,2.6vw,1.5rem);
  color:var(--tftr-forest); text-transform:uppercase; letter-spacing:2px;
  margin-bottom:26px;
}
.hero-lede{max-width:640px; margin:0 auto 30px auto; font-size:1.08rem;}
.btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.road-illustration{width:100%; display:block; margin-top:10px;}

/* =====================================================
   5. BUTTONS / CHIPS
   ===================================================== */
.btn{
  font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:1px;
  font-size:0.95rem; padding:14px 28px; border-radius:4px; display:inline-block;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--tftr-shadow); text-decoration:none;}
.btn-primary{background:var(--tftr-rust); color:#fff; border-color:var(--tftr-rust-dark);}
.btn-primary:hover{color:#fff;}
.btn-outline{background:transparent; color:var(--tftr-forest-dark); border-color:var(--tftr-forest-dark);}
.chip{
  font-family:'Oswald',sans-serif; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.5px; background:var(--tftr-forest); color:#fff;
  padding:3px 10px; border-radius:100px; display:inline-block;
}
.chip.chip-rust{background:var(--tftr-rust);}

/* =====================================================
   6. PAGE HEADER BAND (inner pages)
   ===================================================== */
.page-header-band{
  background:var(--tftr-forest-dark);
  color:var(--tftr-cream);
  padding:56px 0;
  text-align:center;
  border-bottom:6px solid var(--tftr-gold);
}
.page-header-band .kicker{
  font-family:'Oswald',sans-serif; color:var(--tftr-gold); letter-spacing:2px;
  text-transform:uppercase; font-size:0.85rem; display:block; margin-bottom:10px;
}
.page-header-band h1{color:var(--tftr-cream); margin-bottom:0;}
.page-header-band .page-description{
  max-width:640px; margin:14px auto 0 auto; color:#dfe9df; font-family:'Lora',serif;
}

/* =====================================================
   7. CONTENT / EDITOR STYLES
   ===================================================== */
.site-content{padding:56px 0 72px 0;}
.entry-content{max-width:760px; margin:0 auto;}
.entry-content.wide{max-width:1100px;}
.entry-content > *:first-child{margin-top:0;}
.entry-content p{margin:0 0 1.2em 0;}
.entry-content h2{font-size:1.8rem; margin-top:1.6em;}
.entry-content h3{font-size:1.3rem; margin-top:1.4em;}
.entry-content blockquote{
  border-left:4px solid var(--tftr-gold); padding:10px 18px; margin:1.6em 0;
  font-style:italic; color:var(--tftr-forest-dark); background:var(--tftr-paper);
  border-radius:0 var(--tftr-radius) var(--tftr-radius) 0;
}
.entry-content img{border-radius:var(--tftr-radius);}
.entry-content .alignwide{max-width:1000px; margin-left:auto; margin-right:auto;}
.entry-content .alignfull{max-width:none; width:100vw; margin-left:calc(50% - 50vw);}
.entry-content figcaption{font-family:'Oswald',sans-serif; font-size:0.8rem; color:#4a4030; text-align:center; margin-top:6px;}
.entry-content .wp-block-button__link{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px;
  background:var(--tftr-rust); border-radius:4px;
}
.no-content-notice{
  max-width:640px; margin:0 auto; text-align:center; padding:30px;
  background:var(--tftr-paper); border:1px dashed var(--tftr-rust); border-radius:var(--tftr-radius);
  font-family:'Oswald',sans-serif; font-size:0.9rem; color:var(--tftr-rust);
}

/* =====================================================
   8. CARDS — used by News loop & Artifacts loop
   ===================================================== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:26px;
}
.card{
  background:var(--tftr-paper);
  border-radius:var(--tftr-radius);
  overflow:hidden;
  box-shadow:var(--tftr-shadow);
  display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-4px);}
.card-thumb{
  height:160px; background:var(--tftr-forest-light);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-thumb img{width:100%; height:100%; object-fit:cover;}
.card-thumb .placeholder-icon{width:56px; height:56px; opacity:0.85;}
.card-body{padding:20px 22px 24px 22px; flex:1; display:flex; flex-direction:column;}
.card .card-tag{
  font-family:'Oswald',sans-serif; font-size:0.75rem; letter-spacing:1px;
  color:var(--tftr-rust); text-transform:uppercase; margin-bottom:6px;
}
.card h2, .card h3{font-size:1.15rem; margin:0 0 8px 0;}
.card h2 a, .card h3 a{color:var(--tftr-forest-dark);}
.card p{font-size:0.94rem; color:#4a4030; margin:0; flex:1;}
.card .card-read-more{
  margin-top:14px; font-family:'Oswald',sans-serif; font-size:0.8rem;
  text-transform:uppercase; letter-spacing:1px; color:var(--tftr-rust);
}

/* =====================================================
   9. SAMPLE / DEMO NOTES
   ===================================================== */
.sample-note{
  text-align:center; font-family:'Oswald',sans-serif; font-size:0.85rem;
  color:var(--tftr-rust); background:var(--tftr-paper); border:1px dashed var(--tftr-rust);
  padding:10px 16px; border-radius:6px; max-width:560px; margin:0 auto 34px auto;
}

/* =====================================================
   10. PAGINATION
   ===================================================== */
.pagination{
  display:flex; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap;
}
.pagination a, .pagination span{
  font-family:'Oswald',sans-serif; font-size:0.85rem;
  padding:8px 16px; border-radius:4px; background:var(--tftr-paper);
  border:1px solid var(--tftr-cream-dark); color:var(--tftr-forest-dark);
}
.pagination .current{background:var(--tftr-rust); color:#fff; border-color:var(--tftr-rust-dark);}

/* =====================================================
   11. SINGLE POST / ARTIFACT META
   ===================================================== */
.entry-header{max-width:760px; margin:0 auto 30px auto; text-align:left;}
.entry-meta{
  font-family:'Oswald',sans-serif; font-size:0.8rem; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--tftr-rust); margin-bottom:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.entry-title{font-size:clamp(1.8rem,4vw,2.6rem);}
.entry-thumb{max-width:1100px; margin:0 auto 40px auto; border-radius:var(--tftr-radius); overflow:hidden; box-shadow:var(--tftr-shadow);}
.entry-footer{max-width:760px; margin:40px auto 0 auto; padding-top:20px; border-top:1px solid var(--tftr-cream-dark); font-family:'Oswald',sans-serif; font-size:0.85rem;}

/* =====================================================
   12. FOOTER
   ===================================================== */
.site-footer{background:var(--tftr-navy); color:#c9d3da; padding:44px 0 26px 0; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:28px;}
.footer-widget h4, .footer-grid h4{
  font-family:'Oswald',sans-serif; color:#fff; text-transform:uppercase;
  letter-spacing:1px; font-size:0.9rem; margin-bottom:14px;
}
.footer-widget p, .footer-grid p, .footer-grid a, .footer-widget a{
  font-size:0.88rem; color:#aab6bd; display:block; margin-bottom:8px;
}
.footer-grid a:hover, .footer-widget a:hover{color:#fff;}
.footer-widget ul{list-style:none; margin:0; padding:0;}
.socials{display:flex; gap:14px; margin-top:6px;}
.socials a{
  width:40px; height:40px; border-radius:50%; background:var(--tftr-forest);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:0.85rem; margin-bottom:0;
}
.socials a:hover{background:var(--tftr-rust); color:#fff;}
.footer-bottom{
  text-align:center; font-family:'Oswald',sans-serif; font-size:0.78rem;
  color:#7f8b92; border-top:1px solid #2b3d4a; padding-top:20px;
}

/* =====================================================
   13. RESPONSIVE
   ===================================================== */
@media (max-width:800px){
  .card-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .main-navigation{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--tftr-forest-dark); border-bottom:4px solid var(--tftr-gold);
  }
  .main-navigation.is-open{display:block;}
  .main-navigation ul{flex-direction:column; padding:10px 24px 18px 24px;}
  .menu-toggle{display:inline-block;}
  .nav-wrap{position:relative;}
}