/*
Theme Name: Grapefruit
Theme URI: https://www.lessonsfromtheroad.com
Author: Bill Decker
Author URI: https://www.billdecker.com
Description: A custom business-with-a-wink theme for Lessons From The Road, Bill Decker's site for books, speaking, and stories from 30 years and 72 countries of international business (and a brief, failed stand-up comedy career).
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: grapefruit
*/

/* -----------------------------------------------------------
   0. Brand variables
----------------------------------------------------------- */
:root{
  --lftr-blue: #2A6FA8;
  --lftr-blue-dark: #1B4D73;
  --lftr-blue-darker: #123449;
  --lftr-blue-pale: #EAF2F8;
  --lftr-amber: #F2A93B;
  --lftr-amber-dark: #D9911F;
  --lftr-ink: #1F2937;
  --lftr-gray: #5B6673;
  --lftr-line: #E1E8EE;
  --lftr-white: #FFFFFF;
  --lftr-radius: 14px;
  --lftr-shadow: 0 10px 30px rgba(18,52,73,0.08);
  --lftr-max: 1160px;
}

/* -----------------------------------------------------------
   1. Reset-ish basics
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--lftr-ink);
  background: var(--lftr-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--lftr-blue); text-decoration: none; }
a:hover{ color: var(--lftr-blue-dark); }
h1,h2,h3,h4{
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--lftr-blue-darker);
  line-height:1.2;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2rem, 4vw, 2.9rem); font-weight:700; }
h2{ font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight:700; }
h3{ font-size: 1.3rem; font-weight:600; }
p{ margin: 0 0 1.1em; }
ul{ padding-left: 1.2em; }
.container{
  max-width: var(--lftr-max);
  margin: 0 auto;
  padding: 0 24px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight:600;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--lftr-amber); color: var(--lftr-blue-darker); }
.btn-primary:hover{ background: var(--lftr-amber-dark); color: var(--lftr-blue-darker); box-shadow: var(--lftr-shadow); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); color:#fff; }
.btn-blue{ background: var(--lftr-blue); color:#fff; }
.btn-blue:hover{ background: var(--lftr-blue-dark); color:#fff; }
.btn-ghost{ background: var(--lftr-blue-pale); color: var(--lftr-blue-dark); }
.btn-ghost:hover{ background: #dbe9f4; color: var(--lftr-blue-darker); }

/* -----------------------------------------------------------
   2. Header / Nav
----------------------------------------------------------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--lftr-line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 24px;
  max-width: var(--lftr-max);
  margin:0 auto;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ height:52px; width:auto; }
.site-branding .brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.site-branding .brand-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem; color: var(--lftr-blue-darker); }
.site-branding .brand-tagline{ font-size:.72rem; color: var(--lftr-gray); font-weight:500; letter-spacing:.02em; }

.main-nav ul{
  list-style:none; display:flex; gap: 6px; margin:0; padding:0;
}
.main-nav a{
  display:block;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--lftr-blue-darker);
  font-weight:600;
  font-size:.96rem;
}
.main-nav a:hover, .main-nav .current-menu-item > a{
  background: var(--lftr-blue-pale);
  color: var(--lftr-blue-dark);
}
.nav-toggle{ display:none; }

@media (max-width: 760px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--lftr-line);
    box-shadow: var(--lftr-shadow);
    display:none;
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; padding: 10px 20px 18px; gap:2px; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px; border:1px solid var(--lftr-line);
    background:#fff; cursor:pointer;
  }
  .site-branding .brand-tagline{ display:none; }
}

/* -----------------------------------------------------------
   3. Hero (front page)
----------------------------------------------------------- */
.hero{
  background: linear-gradient(160deg, var(--lftr-blue-darker) 0%, var(--lftr-blue-dark) 55%, var(--lftr-blue) 100%);
  color:#fff;
  padding: 76px 24px 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 0%, rgba(242,169,59,.18), transparent 45%);
  pointer-events:none;
}
.hero .hero-logo{ height:120px; width:auto; margin: 0 auto 22px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero .hero-tagline{
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #DCEAF6;
  max-width: 760px;
  margin: 0 auto 30px;
  font-weight:500;
}
.hero .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Stat strip */
.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width: 900px; margin: -46px auto 0; padding: 0 24px;
  position:relative; z-index:2;
}
.stat-card{
  background:#fff; border-radius: var(--lftr-radius); box-shadow: var(--lftr-shadow);
  padding: 22px 16px; text-align:center; border:1px solid var(--lftr-line);
}
.stat-card .stat-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.9rem; color: var(--lftr-blue); }
.stat-card .stat-label{ font-size:.85rem; color: var(--lftr-gray); font-weight:600; margin-top:4px; }
@media (max-width:700px){ .stat-strip{ grid-template-columns:1fr; } }

/* -----------------------------------------------------------
   4. Sections / generic content
----------------------------------------------------------- */
.section{ padding: 70px 24px; }
.section-tight{ padding: 40px 24px; }
.section-alt{ background: var(--lftr-blue-pale); }
.section-header{ text-align:center; max-width: 720px; margin: 0 auto 42px; }
.section-header .eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em;
  font-size:.75rem; font-weight:700; color: var(--lftr-amber-dark);
  background: #FCF1DC; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.entry-content{ max-width: 780px; margin: 0 auto; }
.entry-content h2{ margin-top:1.4em; }
.entry-content blockquote{
  border-left:4px solid var(--lftr-amber);
  background: var(--lftr-blue-pale);
  margin: 1.6em 0; padding: 1.1em 1.4em; border-radius: 0 10px 10px 0;
  font-style: italic; color: var(--lftr-blue-darker);
}

/* Page hero banner (About / Books / Contact / Blog) */
.page-banner{
  background: linear-gradient(135deg, var(--lftr-blue-darker), var(--lftr-blue));
  color:#fff; padding: 58px 24px 66px; text-align:center;
}
.page-banner h1{ color:#fff; margin-bottom:.25em; }
.page-banner .page-subtitle{ color:#DCEAF6; font-size:1.05rem; max-width:700px; margin:0 auto; }
.page-banner .breadcrumb-emoji{ font-size:2rem; margin-bottom:10px; }

/* -----------------------------------------------------------
   5. About page
----------------------------------------------------------- */
.about-wrap{
  display:grid; grid-template-columns: 260px 1fr; gap: 48px;
  max-width: var(--lftr-max); margin: 0 auto; padding: 60px 24px; align-items:start;
}
.about-portrait{
  background: var(--lftr-blue-pale); border-radius: var(--lftr-radius);
  padding: 30px; text-align:center; border:1px solid var(--lftr-line); position:sticky; top:110px;
}
.about-portrait img{ margin: 0 auto 16px; height:90px; }
.about-portrait .badge{
  display:inline-block; background:#fff; border:1px solid var(--lftr-line);
  border-radius:999px; padding:6px 14px; font-size:.8rem; font-weight:700; color: var(--lftr-blue-dark); margin: 4px 0;
}
@media (max-width: 860px){ .about-wrap{ grid-template-columns:1fr; } .about-portrait{ position:static; } }

/* -----------------------------------------------------------
   6. Books page
----------------------------------------------------------- */
.books-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: var(--lftr-max); margin: 0 auto; padding: 10px 24px 70px;
}
@media (max-width: 780px){ .books-grid{ grid-template-columns:1fr; } }
.book-card{
  display:flex; gap:22px; background:#fff; border:1px solid var(--lftr-line);
  border-radius: var(--lftr-radius); padding: 26px; box-shadow: var(--lftr-shadow);
}
.book-card .book-cover{
  flex: 0 0 100px; height:140px; border-radius:8px;
  background: linear-gradient(160deg, var(--lftr-blue), var(--lftr-blue-darker));
  display:flex; align-items:center; justify-content:center; color:#fff; text-align:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.85rem; padding:10px;
}
.book-card .book-body{ flex:1; }
.book-card .book-format{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color: var(--lftr-blue-dark); background: var(--lftr-blue-pale);
  padding:3px 10px; border-radius:999px; margin-bottom:8px;
}
.book-card p{ font-size:.96rem; color: var(--lftr-gray); }
.book-card .book-actions{ margin-top:14px; }
.book-note{
  max-width: var(--lftr-max); margin: 0 auto 30px; padding: 0 24px;
  text-align:center; color: var(--lftr-gray); font-size:.92rem;
}

/* -----------------------------------------------------------
   7. Contact page
----------------------------------------------------------- */
.contact-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 22px;
  max-width: var(--lftr-max); margin: 0 auto; padding: 10px 24px 70px;
}
.contact-card{
  background:#fff; border:1px solid var(--lftr-line); border-radius: var(--lftr-radius);
  padding: 30px 24px; text-align:center; box-shadow: var(--lftr-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18,52,73,.12); }
.contact-card .contact-icon{
  width:56px; height:56px; border-radius:50%; background: var(--lftr-blue-pale);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  font-size:1.5rem;
}
.contact-card h3{ margin-bottom:.3em; }
.contact-card p{ color: var(--lftr-gray); font-size:.92rem; }
.contact-card a.btn{ margin-top:10px; }

/* -----------------------------------------------------------
   8. Blog (archive + single)
----------------------------------------------------------- */
.blog-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
  max-width: var(--lftr-max); margin: 0 auto; padding: 10px 24px 40px;
}
@media (max-width: 780px){ .blog-grid{ grid-template-columns:1fr; } }
.post-card{
  background:#fff; border:1px solid var(--lftr-line); border-radius: var(--lftr-radius);
  padding: 26px; box-shadow: var(--lftr-shadow); display:flex; flex-direction:column;
}
.post-card .post-meta{ font-size:.78rem; color: var(--lftr-gray); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.post-card h2{ font-size:1.2rem; margin-bottom:.4em; }
.post-card h2 a{ color: var(--lftr-blue-darker); }
.post-card p{ color: var(--lftr-gray); font-size:.95rem; flex:1; }
.post-card .read-more{ font-weight:700; font-size:.9rem; }

.pagination{ text-align:center; padding: 20px 24px 60px; }
.pagination a, .pagination span{
  display:inline-block; margin:0 4px; padding:9px 15px; border-radius:8px;
  border:1px solid var(--lftr-line); font-weight:600; color: var(--lftr-blue-dark);
}
.pagination .current{ background: var(--lftr-blue); color:#fff; border-color: var(--lftr-blue); }

.single-post-wrap{ max-width: 800px; margin:0 auto; padding: 50px 24px 80px; }
.single-post-wrap .post-meta{ color: var(--lftr-gray); font-size:.85rem; margin-bottom: 22px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.post-nav{
  display:flex; justify-content:space-between; gap:20px; max-width:800px; margin: 40px auto 0; padding: 24px 24px 0; border-top:1px solid var(--lftr-line);
}
.post-nav a{ font-weight:600; }
.back-to-blog{ display:block; text-align:center; margin: 10px auto 0; font-weight:700; }

/* -----------------------------------------------------------
   9. Footer
----------------------------------------------------------- */
.site-footer{
  background: var(--lftr-blue-darker); color: #CFE0EC; padding: 50px 24px 26px;
}
.footer-inner{
  max-width: var(--lftr-max); margin:0 auto;
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px;
}
@media (max-width: 700px){ .footer-inner{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.site-footer a{ color:#CFE0EC; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:8px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ height:44px; }
.footer-brand span{ font-family:'Poppins',sans-serif; font-weight:700; color:#fff; }
.footer-bottom{
  max-width: var(--lftr-max); margin: 34px auto 0; padding-top:22px;
  border-top: 1px solid rgba(255,255,255,.12); font-size:.82rem; color:#9FB7C7;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* -----------------------------------------------------------
   10. 404
----------------------------------------------------------- */
.error-404{ text-align:center; padding: 100px 24px; max-width:640px; margin:0 auto; }
.error-404 .error-code{ font-family:'Poppins',sans-serif; font-weight:700; font-size:5rem; color: var(--lftr-blue-pale); -webkit-text-stroke: 2px var(--lftr-blue); }

/* Utility */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
  height:1px; width:1px; overflow:hidden; position:absolute!important; word-wrap:normal!important;
}