/*
Theme Name: LodeStar Transport
Theme URI: https://example.com/lodestar-transport
Author: Creations Arena
Author URI: https://creationsarena.com
Description: A logistics & transport theme for LodeStar Transport — built around a wayfinding visual identity: routes, waypoints, and a guiding star. Elementor and Divi compatible.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lodestar
Update URI: false
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --ls-navy:        #0B2159;   /* brand navy, sampled from the LodeStar wordmark */
  --ls-navy-mid:     #15316F;  /* secondary navy - cards on dark bg */
  --ls-navy-line:    #24448F;  /* hairlines on dark bg */
  --ls-blue:         #2F5FA8;  /* utility blue - links, secondary buttons */
  --ls-blue-dark:    #234A87;  /* hover state */
  --ls-gold:         #F0680A;  /* brand orange, sampled from the logo star/streak */
  --ls-gold-soft:    #FF8A3D;  /* lighter orange for glows/hover */
  --ls-red:          #D91E2C;  /* brand red, sampled from the logo tail - use sparingly */
  --ls-off-white:    #F6F4EF;  /* light section background */
  --ls-white:        #FFFFFF;
  --ls-ink:          #1C2333;  /* body text on light bg */
  --ls-slate:        #5B6478;  /* muted text */
  --ls-border:        #E4E1D8; /* hairlines on light bg */

  --ls-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ls-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --ls-radius: 4px;
  --ls-container: 1180px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ls-font-body);
  color:var(--ls-ink);
  background:var(--ls-white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ls-blue); text-decoration:none; }
a:hover{ color:var(--ls-blue-dark); }
h1,h2,h3,h4,h5,h6{
  font-family:var(--ls-font-display);
  color:var(--ls-navy);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.2rem, 4vw, 3.4rem); }
h2{ font-size:clamp(1.7rem, 2.8vw, 2.4rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.2em; }
ul{ margin:0; padding:0; list-style:none; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; }

:focus-visible{
  outline:3px solid var(--ls-gold);
  outline-offset:2px;
}

.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;overflow:hidden;
}

.container{
  max-width:var(--ls-container);
  margin:0 auto;
  padding:0 24px;
}

/* Elementor / Divi compatibility: let their canvas own the width */
.elementor-page .site-main,
.et-l .site-main{
  max-width:none;
  padding:0;
}

/* =========================================================
   EYEBROW / SECTION LABEL (signature wayfinding mark)
   Uses a small star-glyph rather than numbered steps —
   these sections aren't a sequence, they're waypoints.
   ========================================================= */
.ls-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ls-font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ls-gold);
  margin-bottom:14px;
}
.ls-eyebrow::before{
  content:"";
  width:9px; height:9px;
  background:var(--ls-gold);
  clip-path:polygon(50% 0%,63% 35%,100% 50%,63% 65%,50% 100%,37% 65%,0% 50%,37% 35%);
  flex:none;
}
.ls-eyebrow.on-light{ color:var(--ls-blue); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background:var(--ls-navy);
  border-bottom:1px solid var(--ls-navy-line);
  border-top:3px solid var(--ls-red);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header-inner{ position:relative; }
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0;
}
.site-branding{ display:flex; align-items:center; gap:10px; }
.site-branding a{ display:flex; align-items:center; gap:10px; }
.site-title{
  font-family:var(--ls-font-display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--ls-white);
  margin:0;
  letter-spacing:-0.01em;
}
.site-title .star{ color:var(--ls-gold); }
.custom-logo{ width:var(--ls-logo-width-desktop, 180px); height:auto; max-height:60px; object-fit:contain; }
.site-logo-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:22px; }
.header-phone{
  display:flex; align-items:center; gap:8px;
  color:var(--ls-off-white);
  font-family:var(--ls-font-display);
  font-weight:600;
  font-size:1rem;
}
.header-phone svg{ flex:none; }
.header-phone:hover{ color:var(--ls-gold-soft); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:var(--ls-radius);
  font-family:var(--ls-font-display);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--ls-gold); color:var(--ls-navy); }
.btn-gold:hover{ background:var(--ls-gold-soft); color:var(--ls-navy); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.3); color:var(--ls-white); }
.btn-outline:hover{ border-color:var(--ls-gold); color:var(--ls-gold-soft); }
.btn-blue{ background:var(--ls-blue); color:var(--ls-white); }
.btn-blue:hover{ background:var(--ls-blue-dark); color:var(--ls-white); }

/* Primary nav */
.main-navigation{ display:flex; }
.main-navigation ul{ display:flex; align-items:center; gap:28px; }
.main-navigation a{
  color:var(--ls-off-white);
  font-size:.95rem;
  font-weight:500;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{
  color:var(--ls-white);
  border-bottom-color:var(--ls-gold);
}
.main-navigation ul ul{
  position:absolute;
  flex-direction:column;
  background:var(--ls-navy-mid);
  border:1px solid var(--ls-navy-line);
  padding:8px;
  min-width:200px;
  margin-top:12px;
  border-radius:var(--ls-radius);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
.main-navigation li{ position:relative; }
.main-navigation li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.main-navigation ul ul a{ padding:8px 12px; border-bottom:none; border-radius:3px; }
.main-navigation ul ul a:hover{ background:var(--ls-navy); }

.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--ls-navy-line);
  border-radius:var(--ls-radius);
  padding:9px 11px;
  color:var(--ls-white);
}

/* =========================================================
   HERO — the route line + lodestar marker
   ========================================================= */
.ls-hero{
  position:relative;
  background:var(--ls-navy);
  color:var(--ls-white);
  overflow:hidden;
  padding:88px 0 64px;
}
.ls-hero.has-bg-image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.ls-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(120deg, rgba(11,33,89,.92) 0%, rgba(11,33,89,.78) 45%, rgba(11,33,89,.55) 100%);
}
.ls-hero-route{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
}
.ls-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.ls-hero-copy p.lead{
  color:#C7CEDD;
  font-size:1.1rem;
  max-width:46ch;
}
.ls-hero-cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

.ls-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:56px;
  border-top:1px solid var(--ls-navy-line);
  padding-top:32px;
}
.ls-hero-stats .stat{ padding-right:24px; }
.ls-hero-stats .stat + .stat{ border-left:1px solid var(--ls-navy-line); padding-left:24px; }
.ls-hero-stats .stat-num{
  font-family:var(--ls-font-display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;
  color:var(--ls-gold);
  display:block;
  line-height:1;
  margin-bottom:6px;
}
.ls-hero-stats .stat-label{
  font-size:.85rem;
  color:#9AA5BD;
}

.ls-hero-card{
  background:var(--ls-navy-mid);
  border:1px solid var(--ls-navy-line);
  border-radius:8px;
  padding:28px;
  position:relative;
  z-index:2;
}
.ls-hero-card h3{ color:var(--ls-white); margin-bottom:8px; }
.ls-hero-card p{ color:#AEB6C9; font-size:.95rem; }
.route-waypoint{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-top:1px solid var(--ls-navy-line);
}
.route-waypoint:first-of-type{ border-top:none; }
.route-waypoint .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--ls-blue);
  margin-top:6px; flex:none;
}
.route-waypoint.is-star .dot{
  background:var(--ls-gold);
  box-shadow:0 0 0 4px rgba(212,162,78,.18);
}
.route-waypoint strong{ color:var(--ls-white); display:block; font-size:.92rem; }
.route-waypoint span{ color:#9AA5BD; font-size:.85rem; }

/* =========================================================
   SECTION LAYOUT
   ========================================================= */
.ls-section{ padding:80px 0; }
.ls-section.on-light{ background:var(--ls-off-white); }
.ls-section.on-navy{ background:var(--ls-navy); color:var(--ls-white); }
.ls-section.on-navy h2{ color:var(--ls-white); }
.ls-section-head{ max-width:640px; margin-bottom:44px; }
.ls-section-head p{ color:var(--ls-slate); font-size:1.05rem; }
.ls-section.on-navy .ls-section-head p{ color:#AEB6C9; }

/* Services grid */
.ls-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.ls-service-card{
  background:var(--ls-white);
  border:1px solid var(--ls-border);
  border-radius:8px;
  padding:30px 26px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ls-service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(11,24,48,.08);
  border-color:var(--ls-gold);
}
.ls-service-card .icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ls-navy);
  border-radius:8px;
  color:var(--ls-gold);
  margin-bottom:18px;
}
.ls-service-card h3{ margin-bottom:8px; }
.ls-service-card p{ color:var(--ls-slate); font-size:.95rem; margin-bottom:14px; }
.ls-service-card a{ font-size:.9rem; font-weight:600; }

/* Two-col feature */
.ls-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.ls-feature-media{
  background:var(--ls-navy-mid);
  border-radius:8px;
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ls-feature ul.checklist li{
  display:flex; gap:10px; padding:8px 0;
  color:var(--ls-ink); font-size:.98rem;
}
.ls-feature ul.checklist svg{ flex:none; color:var(--ls-blue); margin-top:3px; }

/* CTA banner */
.ls-cta-banner{
  background:linear-gradient(135deg, var(--ls-navy) 0%, var(--ls-navy-mid) 100%);
  border-radius:10px;
  padding:56px;
  text-align:center;
  color:var(--ls-white);
  position:relative;
  overflow:hidden;
}
.ls-cta-banner h2{ color:var(--ls-white); margin-bottom:10px; }
.ls-cta-banner p{ color:#C7CEDD; max-width:52ch; margin:0 auto 26px; }
.ls-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ls-navy); color:#AEB6C9; padding-top:64px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--ls-navy-line);
}
.footer-brand .site-title{ margin-bottom:12px; }
.footer-brand p{ font-size:.92rem; max-width:34ch; }
.footer-col h4{
  color:var(--ls-white);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.footer-col ul li{ padding:6px 0; }
.footer-col a{ color:#AEB6C9; font-size:.92rem; }
.footer-col a:hover{ color:var(--ls-gold-soft); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-size:.85rem; color:#7C87A0;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom a{ color:#7C87A0; }
.footer-bottom a:hover{ color:var(--ls-gold-soft); }

/* =========================================================
   BLOG / PAGE / SINGLE
   ========================================================= */
.site-main{ padding:64px 0; min-height:40vh; }
.page-header{ margin-bottom:40px; }
.page-header .page-title{ margin-bottom:6px; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content h2{ margin-top:1.4em; }
.entry-content a{ text-decoration:underline; }
.entry-meta{ color:var(--ls-slate); font-size:.88rem; margin-bottom:18px; }

.post-list{ display:grid; gap:32px; }
.post-card{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  padding-bottom:32px; border-bottom:1px solid var(--ls-border);
}
.post-card .thumb{ border-radius:8px; overflow:hidden; background:var(--ls-off-white); aspect-ratio:4/3; }
.post-card h2{ font-size:1.3rem; margin-bottom:6px; }
.post-card h2 a{ color:var(--ls-navy); }

.pagination{ display:flex; gap:8px; margin-top:40px; }
.pagination a, .pagination span{
  padding:8px 14px; border:1px solid var(--ls-border); border-radius:var(--ls-radius);
  font-size:.9rem; color:var(--ls-ink);
}
.pagination .current{ background:var(--ls-navy); color:var(--ls-white); border-color:var(--ls-navy); }

.comment-list{ margin:0 0 32px; }
.comment-list .comment{ padding:20px 0; border-top:1px solid var(--ls-border); }
.comment-form input, .comment-form textarea{
  width:100%; padding:11px 14px; border:1px solid var(--ls-border); border-radius:var(--ls-radius);
  margin-bottom:14px;
}
.comment-form textarea{ min-height:120px; }

.widget{ margin-bottom:36px; }
.widget-title{ font-size:1rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }

/* 404 */
.error-404{ text-align:center; padding:100px 0; }
.error-404 h1{ font-size:5rem; color:var(--ls-gold); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .main-navigation{ display:none; }
  .has-mobile-logo .site-logo-desktop{ display:none; }
  .site-logo-mobile{ display:block; width:var(--ls-logo-width-mobile, 130px); }
  .main-navigation.is-open{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ls-navy); border-top:1px solid var(--ls-navy-line);
    padding:16px 24px;
  }
  .main-navigation.is-open ul{ flex-direction:column; align-items:flex-start; gap:4px; }
  .main-navigation.is-open ul ul{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; margin-top:4px; }
  .menu-toggle{ display:inline-flex; }
  .ls-hero-inner{ grid-template-columns:1fr; }
  .ls-hero-stats{ grid-template-columns:1fr; gap:16px; }
  .ls-hero-stats .stat + .stat{ border-left:none; border-top:1px solid var(--ls-navy-line); padding-left:0; padding-top:16px; }
  .ls-services-grid{ grid-template-columns:1fr 1fr; }
  .ls-feature{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .post-card{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .ls-services-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .ls-cta-banner{ padding:36px 22px; }
  .header-phone span.phone-text{ display:none; }
}

/* =========================================================
   QUOTE / BOOKING FORM
   ========================================================= */
.ls-quote-form-wrap,
.ls-form-wrap{
  background:var(--ls-navy);
  border-radius:10px;
  padding:44px;
  position:relative;
  overflow:hidden;
}
.ls-quote-form-head,
.ls-form-head{ max-width:560px; margin-bottom:28px; }
.ls-quote-form-head h3,
.ls-form-head h3{ color:var(--ls-white); margin-bottom:8px; }
.ls-quote-form-head p,
.ls-form-head p{ color:#AEB6C9; font-size:.95rem; margin-bottom:0; }

.ls-quote-form-grid,
.ls-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 20px;
  margin-bottom:24px;
}
.ls-field{ display:flex; flex-direction:column; gap:6px; }
.ls-field-full{ grid-column:1 / -1; }
.ls-field label{
  color:#C7CEDD;
  font-size:.85rem;
  font-weight:500;
}
.ls-field label .req{ color:var(--ls-gold); }
.ls-field input,
.ls-field select,
.ls-field textarea{
  background:var(--ls-navy-mid);
  border:1px solid var(--ls-navy-line);
  border-radius:var(--ls-radius);
  color:var(--ls-white);
  padding:11px 14px;
  font-size:.95rem;
  font-family:var(--ls-font-body);
}
.ls-field input:focus,
.ls-field select:focus,
.ls-field textarea:focus{
  border-color:var(--ls-gold);
  outline:none;
}
.ls-field textarea{ resize:vertical; min-height:100px; }
.ls-field select{ appearance:auto; }

/* Honeypot — visually hidden, still reachable by simple bots but not by real users */
.ls-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.ls-quote-submit,
.ls-form-submit{ width:100%; justify-content:center; }
.ls-quote-submit:disabled,
.ls-form-submit:disabled{ opacity:.7; cursor:progress; transform:none; }

.ls-quote-form-response,
.ls-form-response{
  margin-top:16px;
  font-size:.92rem;
  min-height:1.2em;
}
.ls-quote-form-response.is-success,
.ls-form-response.is-success{ color:var(--ls-gold-soft); }
.ls-quote-form-response.is-error,
.ls-form-response.is-error{ color:#FF9B9B; }

@media (max-width:640px){
  .ls-quote-form-wrap,
  .ls-form-wrap{ padding:28px 22px; }
  .ls-quote-form-grid,
  .ls-form-grid{ grid-template-columns:1fr; }
}

/* Native WP login form (wp_login_form) styled to match */
#loginform p{ margin-bottom:14px; }
#loginform label{ color:#C7CEDD; font-size:.85rem; font-weight:500; display:block; margin-bottom:6px; }
#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"]{
  width:100%;
  background:var(--ls-navy-mid);
  border:1px solid var(--ls-navy-line);
  border-radius:var(--ls-radius);
  color:var(--ls-white);
  padding:11px 14px;
  font-size:.95rem;
}
#loginform .login-remember label{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
#loginform .login-remember input{ width:auto; }
#loginform .login-submit input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:12px 22px; border-radius:var(--ls-radius);
  font-family:var(--ls-font-display); font-weight:600; font-size:.92rem;
  background:var(--ls-gold); color:var(--ls-navy); border:none; cursor:pointer;
}
#loginform .login-submit input[type="submit"]:hover{ background:var(--ls-gold-soft); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .ls-service-card{ transition:none; }
}