/*
Theme Name: Trucking Company
Theme URI: https://example.com/themes/trucking-company
Author: Your Name
Author URI: https://example.com
Description: A modern, geometric, asymmetrical, bento-grid WordPress theme for Rocket Trucking Company. Responsive, fast, and accessible with masonry/Bento layouts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trucking-company
Tags: blog, grid-layout, bento, masonry, responsive, accessibility-ready, custom-colors, custom-logo, custom-menu, sticky-header
*/

:root{
  --tc-bg: #0b0f14;
  --tc-surface: #121823;
  --tc-elev: #1b2432;
  --tc-primary: #2aa5f9;
  --tc-accent: #ff6b6b;
  --tc-accent-2:#8e7cff;
  --tc-muted: #93a3b8;
  --tc-text: #e8eef7;
  --tc-text-dim: #c5d0df;
  --tc-success:#2ec27e;
  --tc-warning:#f5a524;
  --tc-danger:#ef4444;
  --tc-grad-1: linear-gradient(135deg, rgba(42,165,249,.25), rgba(142,124,255,.15));
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 20px 60px rgba(0,0,0,.45);
  --container: clamp(980px, 86vw, 1300px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--tc-text);
  background: radial-gradient(1600px 800px at 80% -20%, rgba(42,165,249,.08), transparent 60%),
              radial-gradient(1400px 700px at -10% 120%, rgba(142,124,255,.08), transparent 60%),
              var(--tc-bg);
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:var(--tc-primary);text-decoration:none}
a:hover{text-decoration:underline}
.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.container{width:var(--container);max-width:100%;margin-inline:auto;padding-inline:clamp(16px,3vw,24px)}
.grid{display:grid;gap:clamp(14px,2.2vw,24px)}
.flex{display:flex;gap:clamp(10px,1.6vw,18px);align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.1rem;border-radius:calc(var(--radius-xl) - .25rem);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); color:var(--tc-text);
  box-shadow:var(--shadow-1); transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none}
.btn-primary{background:linear-gradient(135deg, var(--tc-primary), var(--tc-accent-2)); color:#081018}
.badge{
  display:inline-block;padding:.35rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
  font-size:.75rem; color:var(--tc-text-dim); letter-spacing:.02em
}
.badge--date{background:rgba(42,165,249,.12);border-color:rgba(42,165,249,.25)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(18,24,35,.85), rgba(18,24,35,.65));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:grid;grid-template-columns:1fr auto auto; align-items:center; gap:16px; width:var(--container); margin:0 auto; padding:12px 20px}
.site-title{
  font-family:Poppins, Inter, system-ui, sans-serif; font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.1rem, 2.2vw, 1.5rem); line-height:1;
  display:flex; gap:.6rem; align-items:center
}
.site-title .geo{
  width:26px;height:26px;border-radius:8px;
  background:conic-gradient(from 210deg, var(--tc-primary), var(--tc-accent-2), var(--tc-primary));
  clip-path:polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  filter:saturate(1.2) contrast(1.2)
}
.primary-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.primary-nav a{padding:.5rem .6rem; border-radius:10px; display:inline-block}
.primary-nav a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.menu-toggle{display:none; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--tc-text); padding:.55rem .75rem; border-radius:10px}
@media (max-width: 900px){
  .header-inner{grid-template-columns:auto 1fr auto}
  .primary-nav{position:fixed; inset:64px 0 auto 0; background:rgba(12,16,22,.98); border-top:1px solid rgba(255,255,255,.08); transform:translateY(-120%); transition:transform .35s ease; padding:18px; }
  .primary-nav.open{transform:translateY(0)}
  .primary-nav ul{flex-direction:column; gap:10px}
  .menu-toggle{display:inline-flex}
}

/* Hero */
.hero{position:relative; overflow:hidden; min-height:56svh; display:grid; align-items:center; isolation:isolate;
  background: var(--tc-surface);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero--image{background-size:cover;background-position:center; background-attachment:fixed;}
.hero .layer{position:absolute; inset:auto; pointer-events:none; opacity:.9; mix-blend:screen;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));}
.hero .layer.l1{ top:-10%; right:-8%; width:38vmin; height:38vmin; border-radius:22px; background:var(--tc-grad-1); transform:rotate(8deg)}
.hero .layer.l2{ bottom:-14%; left:-12%; width:48vmin; height:48vmin; border-radius:36px; background:radial-gradient(circle at 30% 30%, rgba(255,107,107,.18), rgba(255,107,107,0) 60%); transform:rotate(-6deg)}
.hero .layer.l3{ top:12%; left:6%; width:22vmin; height:22vmin; border-radius:18px; background:radial-gradient(circle at 40% 40%, rgba(42,165,249,.18), rgba(42,165,249,0) 70%)}
.hero .headline{
  position:relative; z-index:2; padding: clamp(16px, 3vw, 28px);
  max-width:min(720px, 92%); border-radius:var(--radius-2xl);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-1);
}
.hero .headline h1{font-family:Poppins, Inter, system-ui, sans-serif; font-size:clamp(2rem, 6vw, 3.1rem); line-height:1.1; margin:.2rem 0 1rem}
.hero .headline p{color:var(--tc-text-dim); margin:.4rem 0 1rem}

/* Bento / Masonry */
.bento{gap:clamp(12px,2vw,18px); grid-template-columns:repeat(12, 1fr)}
.bento .cell{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-2xl); padding:clamp(14px,2.2vw,22px); box-shadow:var(--shadow-1)}
.bento .cell--tall{grid-row:end span 2}
.bento .cell--wide{grid-column:span 6}
.bento .cell--half{grid-column:span 6}
.bento .cell--third{grid-column:span 4}
.bento .cell--full{grid-column:1 / -1}
@media (max-width: 1100px){ .bento{grid-template-columns:repeat(8,1fr)} .bento .cell--third{grid-column:span 4} }
@media (max-width: 800px){ .bento{grid-template-columns:repeat(4,1fr)} .bento .cell--half,.bento .cell--third{grid-column:1/ -1} }

.masonry-grid{ margin-inline:auto; }
.masonry-sizer{ width: 32%; }
.masonry-item{ margin-bottom:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-1) }
.masonry-item .card-media{ aspect-ratio: 16 / 9; position:relative; overflow:hidden }
.masonry-item .card-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform .45s ease; clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%) }
.masonry-item:hover .card-media img{ transform:scale(1.08) translateY(-2%); }
.masonry-item .card-body{ padding:14px 14px 18px }
.masonry-item h3{ margin:6px 0 4px; font-size:1.05rem; line-height:1.3 }
.masonry-item p{ margin:6px 0 8px; color:var(--tc-text-dim) }
@media (max-width:1100px){ .masonry-sizer{ width: 48% } }
@media (max-width:700px){ .masonry-sizer{ width: 100% } }

/* Single */
.post-hero{ position:relative; isolation:isolate; min-height:44svh; display:grid; align-items:end; padding-bottom:20px; background:var(--tc-surface); border-bottom:1px solid rgba(255,255,255,.08) }
.post-hero .media{position:absolute; inset:0; overflow:hidden; opacity:.85}
.post-hero .media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.9); transform:scale(1.02)}
.post-hero .title-wrap{ position:relative; z-index:2; width:var(--container); max-width:100%; margin-inline:auto; padding-inline: clamp(16px,3vw,24px) }
.post-hero .title-badge{ display:inline-block; transform:translateY(18px) rotate(-2deg); padding:14px 18px; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:20px; box-shadow:var(--shadow-2) }
.post-hero h1{ margin:.2rem 0 .3rem; font-family:Poppins, Inter, system-ui, sans-serif; font-size: clamp(1.8rem, 5.2vw, 3rem) }

.article-wrap{ display:grid; grid-template-columns: 1.4fr .6fr; gap:28px; width:var(--container); max-width:100%; margin: clamp(18px, 3.2vw, 28px) auto; padding-inline: clamp(16px,3vw,24px) }
.article-content{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius-2xl); padding: clamp(16px, 2.2vw, 26px); box-shadow:var(--shadow-1) }
.article-content h2, .article-content h3{ font-family:Poppins, Inter, system-ui, sans-serif; line-height:1.2 }
.article-content h2{ font-size: clamp(1.4rem, 3.2vw, 1.8rem) }
.article-content h3{ font-size: clamp(1.2rem, 2.6vw, 1.4rem) }
.article-content p{ color:var(--tc-text-dim) }
.article-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:.4rem 0 1rem }
.cat-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05) }
.cat-badge .dot{ width:8px; height:8px; border-radius:999px; background:var(--tc-accent) }
.sidebar{ position:relative }
.sidebar .side-title{ margin:.4rem 0 1rem; font-weight:700; letter-spacing:.03em }
.sidebar .masonry-item h4{ font-size: 1rem; margin:8px 0 6px }
.sidebar .masonry-item .excerpt{ color:var(--tc-text-dim); font-size:.9rem }

.nav-asym{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin: 18px 0; }
.nav-asym a{ display:block; padding:16px; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); box-shadow:var(--shadow-1) }
.nav-asym a:hover{ transform:translateY(-2px); text-decoration:none }
.nav-asym .prev{ transform: rotate(-1deg) }
.nav-asym .next{ transform: rotate(1deg) }
@media (max-width:1000px){ .article-wrap{ grid-template-columns:1fr } }

/* Page */
.page-hero{ position:relative; min-height:40svh; display:grid; align-items:end; padding: 22px 0; background:var(--tc-surface); overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08) }
.page-hero .media{ position:absolute; inset:0; opacity:.85 }
.page-hero .media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.9) }
.page-hero .title{ position:relative; z-index:2; width:var(--container); max-width:100%; margin-inline:auto; padding-inline: clamp(16px,3vw,24px) }
.page-hero .title h1{ display:inline-block; padding:10px 14px; border-radius:18px; transform: rotate(-2deg); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-1) }

.timeline{ display:grid; gap:18px; position:relative }
.timeline::before{ content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:linear-gradient(var(--tc-primary), transparent) }
.timeline .entry{ position:relative; padding-left:44px }
.timeline .entry::before{ content:""; position:absolute; left:11px; top:10px; width:14px; height:14px; border-radius:999px; background:var(--tc-primary); box-shadow:0 0 0 4px rgba(42,165,249,.18) }
.timeline .entry .block{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:14px 16px; }

/* Footer */
.site-footer{ margin-top: clamp(24px, 4vw, 42px); background:linear-gradient(180deg, rgba(18,24,35,.8), rgba(18,24,35,.95)); border-top:1px solid rgba(255,255,255,.08) }
.footer-inner{ width:var(--container); max-width:100%; margin:0 auto; padding: clamp(20px, 3vw, 30px) }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:18px }
.footer-grid .cell{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:16px }
.footer-grid .logo-geo{ width:40px; height:40px; border-radius:12px; background:conic-gradient(from 210deg, var(--tc-primary), var(--tc-accent-2), var(--tc-primary)); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.footer-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-nav a{ display:inline-block; padding:.42rem .55rem; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
.footer-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.12); color:var(--tc-text-dim) }
.soc{ display:flex; gap:10px }
.soc a{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08) }

:focus-visible{ outline:2px solid var(--tc-primary); outline-offset:3px; border-radius:8px }
[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.hidden{ display:none !important }

.geo-divider{ height:12px; background:linear-gradient(90deg, rgba(255,255,255,.08) 20%, transparent 20% 40%, rgba(255,255,255,.08) 40% 60%, transparent 60% 80%, rgba(255,255,255,.08) 80%); mask:linear-gradient(#000, #000) }
.diag{ clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.card-geo{ border-radius: var(--radius-2xl); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-1) }
.text-dim{ color:var(--tc-text-dim) }
.max-w-prose{ max-width: 68ch }
.mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem } .mt-4{ margin-top:1rem } .mt-6{ margin-top:1.4rem }
.mb-1{ margin-bottom:.25rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:.75rem } .mb-4{ margin-bottom:1rem } .mb-6{ margin-bottom:1.4rem }
.p-2{ padding:.5rem } .p-3{ padding:.75rem } .p-4{ padding:1rem } .p-6{ padding:1.4rem }

@media print{
  .menu-toggle, .primary-nav, .soc, .hero .layer{ display:none !important }
  a[href]:after{ content:" (" attr(href) ")" }
}