/*
Theme Name: 4ward Media Group
Theme URI: https://4wardmediagroup.com
Author: 4ward Media Group LLC
Author URI: https://4wardmediagroup.com
Description: A clean, single-page theme for 4ward Media Group LLC, an independent media production company. Front page with hero, "what we make", and contact sections. Colors and identity are drawn from the 4ward logo. No third-party plugins required.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fourward-media
*/

/* ============================================================
   Design tokens  (colors sampled directly from the 4ward logo)
   ============================================================ */
:root{
  --ink:        #23231E;   /* near-black charcoal, from the WARD wordmark */
  --ink-soft:   #4a4a42;
  --accent:     #D87838;   /* the orange of the "4" */
  --accent-deep:#B75F27;
  --paper:      #FBFAF7;   /* clean, barely-warm light background */
  --paper-2:    #F2EFE8;   /* section tint */
  --line:       #E4E0D6;
  --white:      #ffffff;

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-display: "Archivo", system-ui, "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
}

/* ============================================================
   Reset-ish base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.04;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.01em;
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:.01em;
  padding:.85rem 1.4rem;
  border-radius:2px;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateX(3px); }
.btn--primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* ============================================================
   Site header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper); /* fallback */
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:96px;
}
.site-brand{ display:flex; align-items:center; }
.site-brand img,
.custom-logo{ height:58px; width:auto; }
.site-brand .custom-logo-link{ display:block; }

.main-nav ul{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; align-items:center; }
.main-nav a{
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--ink); letter-spacing:.01em;
}
.main-nav a:hover{ color:var(--accent-deep); text-decoration:none; }
.nav-cta a{
  border:2px solid var(--ink); border-radius:2px; padding:.45rem .9rem;
}
.nav-cta a:hover{ background:var(--ink); color:var(--paper); }

.nav-toggle{ display:none; }

/* ============================================================
   Hero  —  forward-motion motif
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero .container{
  padding-block: clamp(64px, 12vw, 132px) clamp(56px, 10vw, 108px);
  position:relative; z-index:2;
}
.hero-inner{ max-width:20ch; } /* keep headline lines short + punchy */
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  max-width:none;
}
.hero-lead{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 0 2rem;
  line-height:1.55;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Angled "forward" bars, echoing the slash inside the logo's 4 */
.hero-motif{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  overflow:hidden;
}
.hero-motif span{
  position:absolute; top:-20%; height:140%; width:clamp(26px,4vw,60px);
  background:var(--accent);
  transform:skewX(-18deg);
  opacity:.14;
}
.hero-motif span:nth-child(1){ right:6%;  background:var(--accent); opacity:.16; }
.hero-motif span:nth-child(2){ right:11%; background:var(--ink);    opacity:.08; }
.hero-motif span:nth-child(3){ right:0%;  background:var(--accent); opacity:.10; width:clamp(16px,2.4vw,34px); }

/* ============================================================
   Sections
   ============================================================ */
section{ scroll-margin-top:110px; }
.section-pad{ padding-block:clamp(56px,9vw,104px); }
.section-tint{ background:var(--paper-2); border-block:1px solid var(--line); }

.section-head{ max-width:56ch; margin-bottom:clamp(2rem,5vw,3.2rem); }
.section-head h2{ font-size:clamp(1.9rem,4.4vw,3rem); }
.section-head p{ color:var(--ink-soft); font-size:1.1rem; margin:.4rem 0 0; }

/* What we make — asymmetric, not identical SaaS cards */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2rem);
}
.work-item{
  padding-top:1.4rem;
  border-top:3px solid var(--ink);
}
.work-item:first-child{ border-top-color:var(--accent); }
.work-item h3{ font-size:1.4rem; margin-bottom:.35rem; }
.work-item p{ margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.55; }

/* Sponsorship — the page's bold, dark moment */
.section-ink{ background:var(--ink); color:#e8e5db; }
.section-ink .section-head h2{ color:#fff; }
.section-ink .section-head p{ color:#b9b5a9; }
.sponsor-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2rem); margin-bottom:clamp(2rem,5vw,3rem);
}
.sponsor-item{ padding-top:1.2rem; border-top:3px solid var(--accent); }
.sponsor-item h3{ color:#fff; font-size:1.25rem; margin-bottom:.35rem; }
.sponsor-item p{ margin:0; color:#b9b5a9; font-size:1.02rem; line-height:1.55; }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--accent:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* Positioning statement */
.statement p{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.18;
  letter-spacing:-.01em;
  max-width:22ch;
  margin:0;
}
.statement .accent{ color:var(--accent-deep); }

/* Contact */
.contact-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,4rem);
  align-items:center;
}
.contact-lines{ list-style:none; margin:1.4rem 0 0; padding:0; }
.contact-lines li{ margin:0 0 .6rem; font-size:1.15rem; }
.contact-lines .label{
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  color:var(--ink-soft); display:block; letter-spacing:.02em;
}
.contact-lines a{ color:var(--ink); }
.contact-lines a:hover{ color:var(--accent-deep); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink); color:#d8d5cc;
  padding-block:2.4rem;
}
.site-footer .container{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
}
.site-footer .foot-brand{ font-family:var(--font-display); font-weight:700; color:var(--white); letter-spacing:.01em; }
.site-footer a{ color:#e9c9ac; }
.site-footer small{ color:#9a968c; font-size:.92rem; }

/* ============================================================
   Fallback page/post content (index.php)
   ============================================================ */
.page-body{ padding-block:clamp(48px,8vw,88px); }
.page-body .entry{ max-width:70ch; margin-inline:auto; }
.page-body h1{ font-size:clamp(2rem,5vw,3rem); margin-bottom:1rem; }
.page-body p{ margin:0 0 1.1rem; }

/* ============================================================
   Load animation (one deliberate reveal)
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateX(-14px); animation:slideIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .reveal.d1{ animation-delay:.06s; }
  .reveal.d2{ animation-delay:.16s; }
  .reveal.d3{ animation-delay:.26s; }
  @keyframes slideIn{ to{ opacity:1; transform:none; } }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .work-grid,
  .sponsor-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .contact-wrap{ grid-template-columns:1fr; }
  .main-nav{
    position:fixed; inset:96px 0 auto 0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 1.4rem;
    transform:translateY(-140%); transition:transform .25s ease;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .main-nav.open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px;
    background:none; border:0; padding:8px; cursor:pointer;
  }
  .nav-toggle span{ width:26px; height:2.5px; background:var(--ink); display:block; }
}

@media (max-width:480px){
  .site-brand img,
  .custom-logo{ height:46px; }
}