/*
Theme Name: Warehouse Logistics Network
Theme URI: https://warehouselogisticsnetwork.com
Author: Warehouse Logistics Network
Description: Blueprint-inspired theme for a global warehouse/storage provider directory and quote-request marketplace. Designed as a companion to the WLN Quote Marketplace plugin.
Version: 2.0
Text Domain: wln
*/

:root{
  --sky:#EAF3FB;
  --blue:#2D6FA3;
  --blue-deep:#163F5C;
  --ink:#14212B;
  --white:#FFFFFF;
  --line:#C6DCEC;
  --accent:#E8622C;
  --muted:#5C7C93;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sky);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.01em;
}
.mono{ font-family:'IBM Plex Mono',monospace; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ---------- HEADER ---------- */
.site-header{
  background:var(--white); color:var(--blue-deep);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
.logo-mark{
  width:30px; height:30px; border:1.5px solid var(--blue); border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue); font-weight:700; font-size:12px; font-family:'IBM Plex Mono',monospace;
  flex-shrink:0; position:relative;
}
.logo-mark::after{ content:""; position:absolute; inset:4px; border:1px solid var(--line); }
.main-nav ul{ display:flex; gap:28px; list-style:none; }
.main-nav a{ font-size:13.5px; font-weight:500; color:var(--blue-deep); transition:color .15s; }
.main-nav a:hover{ color:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; font-size:13px; font-weight:600; letter-spacing:0.01em;
  cursor:pointer; border:1.5px solid transparent; border-radius:3px;
  transition:all .15s; font-family:'Inter',sans-serif;
}
.btn-amber{ background:var(--accent); color:var(--white); }
.btn-amber:hover{ background:#D1531F; }
.btn-outline{ border-color:var(--blue); color:var(--blue); background:transparent; }
.btn-outline:hover{ background:var(--blue); color:var(--white); }
@media (max-width:900px){ .main-nav{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  background:var(--sky); padding:80px 0 70px; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:36px 36px;
  opacity:0.6;
  pointer-events:none;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:end; position:relative; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent);
  letter-spacing:0.1em; text-transform:uppercase; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow .dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.hero h1{ font-size:clamp(38px,5.2vw,60px); line-height:1.02; font-weight:700; color:var(--blue-deep); margin-bottom:22px; position:relative; }
.hero h1 span{ color:var(--accent); }
.hero p{ font-size:17px; color:var(--muted); max-width:480px; margin-bottom:32px; font-weight:400; position:relative; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; position:relative; }

/* ---------- BLUEPRINT SCHEMATIC PANEL (live board) ---------- */
.board{ background:var(--white); border:1.5px solid var(--blue); border-radius:4px; overflow:hidden; position:relative; }
.board::before{
  content:"REV. A \2014 LIVE";
  position:absolute; top:0; right:0; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em;
  color:var(--white); background:var(--blue); padding:3px 8px; border-radius:0 0 0 4px;
}
.board-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px dashed var(--line);
}
.board-head .title{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--blue-deep); text-transform:uppercase; }
.board-head .live{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.board-cols{
  display:grid; grid-template-columns: 1.1fr 1.1fr 0.8fr 0.7fr; gap:0;
  padding:10px 20px 6px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:var(--muted); letter-spacing:0.06em; text-transform:uppercase;
}
.board-rows{ padding:0 20px 18px; }
.board-row{
  display:grid; grid-template-columns: 1.1fr 1.1fr 0.8fr 0.7fr; gap:0;
  padding:10px 0; border-top:1px dashed var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink);
  align-items:center;
}
.board-row .status{ font-size:10px; letter-spacing:0.05em; font-weight:600; color:var(--accent); }
.flap.flip{ animation:flipin .35s ease; }
@keyframes flipin{ 0%{opacity:0; transform:translateY(-6px);} 100%{opacity:1; transform:translateY(0);} }
@media (max-width:640px){
  .board-cols, .board-row{ grid-template-columns: 1fr 1fr 0.8fr; }
  .board-cols span:nth-child(3), .board-row span:nth-child(3){ display:none; }
}

/* ---------- STATS ---------- */
.stats{ background:var(--white); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:36px 0; }
@media (max-width:800px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:28px 0; } }
.stat{ text-align:left; padding:0 24px; border-left:1px dashed var(--line); }
.stat:first-child{ border-left:none; }
@media (max-width:800px){ .stat{ border-left:none; padding:0 16px; } }
.stat .num{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; color:var(--blue); }
.stat .label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; }

/* ---------- SECTION GENERIC ---------- */
section.pad{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head .eyebrow{ color:var(--accent); }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); font-weight:600; color:var(--blue-deep); }
.section-head p{ color:var(--muted); margin-top:14px; font-size:16px; }

/* ---------- HOW IT WORKS ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:800px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--white); border:1px solid var(--line); border-radius:4px; padding:32px 28px; }
.step .num{ font-family:'IBM Plex Mono',monospace; color:var(--blue); font-size:12px; margin-bottom:16px; display:inline-block; border:1px solid var(--blue); border-radius:20px; padding:3px 10px; }
.step h3{ font-size:19px; font-weight:600; margin-bottom:10px; color:var(--blue-deep); text-transform:none; letter-spacing:0; }
.step p{ color:var(--muted); font-size:14.5px; }

/* ---------- DIRECTORY ---------- */
.directory{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.directory .section-head h2{ color:var(--blue-deep); }
.directory .section-head p{ color:var(--muted); }
.directory .section-head .eyebrow{ color:var(--accent); }
.region-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:800px){ .region-grid{ grid-template-columns:repeat(2,1fr); } }
.region-card{
  background:var(--sky); border:1px solid var(--line); border-radius:4px;
  padding:20px 18px; display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s, transform .15s;
}
.region-card:hover{ border-color:var(--blue); transform:translateY(-2px); }
.region-card .code{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); }
.region-card .name{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600; color:var(--blue-deep); text-transform:none; }
.region-card .count{ font-size:12px; color:var(--muted); }

/* ---------- CTA SPLIT ---------- */
.cta-split{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:800px){ .cta-split{ grid-template-columns:1fr; } }
.cta-panel{ padding:64px 48px; }
@media (max-width:640px){ .cta-panel{ padding:48px 24px; } }
.cta-panel.dark{ background:var(--blue-deep); color:var(--white); }
.cta-panel.amber{ background:var(--white); color:var(--ink); border:1px solid var(--line); }
.cta-panel .tag{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; margin-bottom:14px; }
.cta-panel.amber .tag{ color:var(--blue); opacity:1; }
.cta-panel h3{ font-size:27px; font-weight:600; margin-bottom:14px; }
.cta-panel.amber h3{ color:var(--blue-deep); }
.cta-panel p{ font-size:15px; margin-bottom:26px; max-width:400px; opacity:0.9; }
.cta-panel.amber p{ color:var(--muted); opacity:1; }
.cta-panel.dark .btn-amber{ background:var(--accent); color:var(--white); }
.cta-panel.amber .btn-dark{ display:inline-flex; align-items:center; justify-content:center; padding:11px 22px; font-size:13px; font-weight:600; border-radius:3px; border:1.5px solid var(--blue); color:var(--blue); background:transparent; transition:all .15s; }
.cta-panel.amber .btn-dark:hover{ background:var(--blue); color:var(--white); }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--blue-deep); color:#AFC9DA; padding:56px 0 28px; border-top:none; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:44px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:var(--white); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px; font-family:'IBM Plex Mono',monospace; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-grid a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:10px; }

/* ---------- GENERIC PAGE / ARCHIVE CONTENT (directory, blog, single) ---------- */
.content-wrap{ padding:64px 0; max-width:820px; margin:0 auto; }
.content-wrap h1{ font-size:32px; margin-bottom:24px; color:var(--blue-deep); }
.content-wrap p{ margin-bottom:16px; color:var(--ink); font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; }