/*
Theme Name: Meridian Freight
Theme URI: https://example.com
Author: Your Company
Description: A custom freight & logistics theme built for a project-cargo, road, air and maritime freight operator. Structured around a route-manifest visual language: waybill-style tables, port-to-port routing lines, and stamped stat blocks. Ships with placeholder content — replace copy, logos and team details before launch.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: meridian-freight
*/

/* -------------------------------------------------
   Design tokens
   Palette: ink navy (primary dark), steel blue (accent),
   signal orange (single CTA accent, used sparingly),
   paper (background), graphite (body text).
------------------------------------------------- */
:root{
  --ink:        #12213B;
  --ink-2:      #1B2E4F;
  --steel:      #3E6E93;
  --steel-lt:   #EAF0F4;
  --signal:     #D9591E;
  --paper:      #F5F3EE;
  --paper-2:    #FFFFFF;
  --line:       #D8D3C7;
  --graphite:   #2A2B27;
  --graphite-60:#5B5C57;

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--paper);
  line-height:1.55;
  font-size:16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.15;
  font-weight:600;
}
h1{ font-size:clamp(2.4rem,5vw,3.6rem); }
h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; max-width:64ch; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); }

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

section{ padding:88px 0; }
@media (max-width:700px){ section{ padding:56px 0; } }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:14px 26px;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  text-decoration:none; border-radius:2px; border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--signal); color:#fff; }
.btn-primary:hover{ background:#B84A17; }
.btn-outline{ background:transparent; color:var(--paper-2); border-color:rgba(255,255,255,.5); }
.btn-outline:hover{ border-color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); }

.eyebrow-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--steel);
  background:var(--steel-lt);
  border:1px solid var(--steel);
  padding:3px 9px;
  border-radius:2px;
  margin-bottom:14px;
}

/* ---------- Header ---------- */
.site-header{ background:var(--ink); color:#fff; position:sticky; top:0; z-index:50; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:14px; padding-bottom:14px; }
.site-branding{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-branding .brand-mark{
  width:38px;height:38px; border:2px solid var(--signal); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; color:#fff; font-size:1.1rem;
}
.site-branding .brand-name{ font-family:var(--font-head); font-size:1.25rem; color:#fff; font-weight:600; letter-spacing:.01em; }
.site-branding .brand-tag{ display:block; font-family:var(--font-mono); font-size:.65rem; color:var(--steel-lt); opacity:.7; margin-top:-2px; }

.primary-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.primary-nav a{ text-decoration:none; color:#fff; font-size:.95rem; font-weight:500; }
.primary-nav a:hover{ color:var(--signal); }
.primary-nav .sub-menu{ display:none; }

.header-cta{ display:flex; align-items:center; gap:18px; }
.header-cta .phone{ font-family:var(--font-mono); font-size:.85rem; color:var(--steel-lt); text-decoration:none; }

.menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.4); color:#fff; padding:8px 10px; border-radius:2px; }
@media (max-width:900px){
  .primary-nav{ display:none; width:100%; order:3; }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:0; border-top:1px solid rgba(255,255,255,.15); }
  .primary-nav li{ border-bottom:1px solid rgba(255,255,255,.1); }
  .primary-nav a{ display:block; padding:14px 0; }
  .site-header .container{ flex-wrap:wrap; }
  .menu-toggle{ display:block; }
  .header-cta .phone{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:100px 0 120px;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end; }
.hero h1{ color:#fff; max-width:14ch; }
.hero .lede{ color:var(--steel-lt); max-width:46ch; font-size:1.05rem; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-route{ align-self:stretch; }
.hero-route svg{ width:100%; height:auto; }
@media (max-width:860px){ .hero .container{ grid-template-columns:1fr; } }

/* ---------- Manifest strip (stats) ---------- */
.manifest-strip{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.manifest-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); }
.manifest-item{ padding:32px 24px; border-left:1px dashed var(--line); text-align:left; }
.manifest-item:first-child{ border-left:none; }
.manifest-item .num{ font-family:var(--font-head); font-size:2.2rem; color:var(--ink); display:block; }
.manifest-item .label{ font-family:var(--font-mono); font-size:.72rem; color:var(--graphite-60); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:700px){ .manifest-strip .container{ grid-template-columns:1fr 1fr; } .manifest-item:nth-child(3){ border-left:none; } }

/* ---------- About ---------- */
.about-section .container{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; }
.about-section .about-figure{ background:var(--steel-lt); border:1px solid var(--line); padding:28px; font-family:var(--font-mono); font-size:.8rem; color:var(--ink); }
.about-figure .waybill-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); }
.about-figure .waybill-row:last-child{ border-bottom:none; }
@media (max-width:860px){ .about-section .container{ grid-template-columns:1fr; } }

/* ---------- Services ---------- */
.services-section{ background:var(--paper); }
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
.service-card{ background:var(--paper-2); padding:36px; }
.service-card .route-code{ font-family:var(--font-mono); font-size:.75rem; color:var(--signal); display:block; margin-bottom:10px; }
.service-card h3{ margin-bottom:10px; }
.service-card a.more{ font-size:.9rem; font-weight:600; color:var(--steel); text-decoration:none; }
@media (max-width:700px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- Team ---------- */
.team-section{ background:var(--ink); color:#fff; }
.team-section h2{ color:#fff; }
.team-section .section-intro{ color:var(--steel-lt); }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-top:36px; }
.team-card{ background:var(--ink-2); border:1px solid rgba(255,255,255,.12); padding:20px; }
.team-card .badge-id{ font-family:var(--font-mono); font-size:.68rem; color:var(--signal); display:block; margin-bottom:10px; }
.team-card .photo{ width:100%; aspect-ratio:4/3; background:rgba(255,255,255,.08); margin-bottom:14px; overflow:hidden; }
.team-card h3{ color:#fff; font-size:1.05rem; margin-bottom:2px; }
.team-card .role{ color:var(--steel-lt); font-size:.85rem; opacity:.8; }

/* ---------- Enquiry / contact form ---------- */
.enquiry-section .container{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; }
.enquiry-perks{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.enquiry-perks li{ font-family:var(--font-mono); font-size:.85rem; padding-left:22px; position:relative; }
.enquiry-perks li::before{ content:"—"; position:absolute; left:0; color:var(--signal); }
.enquiry-form{ background:var(--paper-2); border:1px solid var(--line); padding:36px; }
.enquiry-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.enquiry-form label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
.enquiry-form input, .enquiry-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--font-body); font-size:.95rem; border-radius:2px; margin-bottom:16px;
}
.enquiry-form textarea{ min-height:120px; resize:vertical; }
.form-status{ font-family:var(--font-mono); font-size:.85rem; margin-top:8px; }
.form-status.success{ color:#2E7D32; }
.form-status.error{ color:#B3261E; }
@media (max-width:860px){ .enquiry-section .container{ grid-template-columns:1fr; } .enquiry-form .form-row{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.testimonials-section{ background:var(--steel-lt); }
.testimonial-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.testimonial-card{ background:var(--paper-2); border:1px solid var(--line); padding:28px; position:relative; }
.testimonial-card .quote-mark{ font-family:var(--font-head); font-size:2.4rem; color:var(--signal); line-height:1; display:block; margin-bottom:6px; }
.testimonial-card .name{ font-weight:600; color:var(--ink); margin-top:14px; }
.testimonial-card .role{ font-size:.82rem; color:var(--graphite-60); }
@media (max-width:900px){ .testimonial-track{ grid-template-columns:1fr; } }

/* ---------- Partners marquee ---------- */
.partners-strip{ background:var(--ink); overflow:hidden; padding:32px 0; }
.marquee{ display:flex; gap:64px; white-space:nowrap; animation:scroll 26s linear infinite; }
.marquee span{ font-family:var(--font-mono); color:rgba(255,255,255,.5); font-size:1rem; letter-spacing:.05em; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; overflow-x:auto; } }

/* ---------- News ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px; }
.news-card{ background:var(--paper-2); border:1px solid var(--line); }
.news-card .thumb{ aspect-ratio:16/10; background:var(--steel-lt); }
.news-card .body{ padding:22px; }
.news-card .date{ font-family:var(--font-mono); font-size:.72rem; color:var(--signal); }
.news-card h3{ font-size:1.05rem; margin:8px 0; }
.news-card .excerpt{ font-size:.9rem; color:var(--graphite-60); }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--steel-lt); padding-top:64px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid h4{ color:#fff; font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-grid a{ text-decoration:none; color:var(--steel-lt); font-size:.9rem; }
.footer-grid a:hover{ color:var(--signal); }
.footer-bottom{ display:flex; justify-content:space-between; padding:22px 0; font-size:.8rem; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:10px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Inner pages ---------- */
.page-hero{ background:var(--ink); color:#fff; padding:64px 0; }
.page-hero h1{ color:#fff; margin:0; }
.page-hero .breadcrumb{ font-family:var(--font-mono); font-size:.75rem; color:var(--steel-lt); opacity:.7; }
.page-content{ padding:72px 0; }
.page-content .container{ max-width:820px; }