/*
 Theme Name: RWB Custom
 Description: Minimal custom theme (no page builders)
 Version: 2.0
 Author: You
*/

/* =========================
   DESIGN TOKENS
   ========================= */
:root{
  --brand-0:#6a22ff;   /* purple accent */
  --brand-1:#ffe58f;   /* pale yellow header background */
  --ink:#2b2b2b;       /* body text */
  --bg:#fffaf0;        /* page background */
  --muted:#f1f5f9;
  --border:#e5e7eb;
}

/* =========================
   BASE / RESETS
   ========================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 "Merriweather", Georgia, serif;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand-0); text-decoration:none }
a:hover{ text-decoration:underline }

.container{ max-width:1200px; margin:auto; padding:1.25rem }
.divider{ height:1px; background:var(--border); margin:2rem 0 }

main{ display:block }

/* Typography */
h1,h2,h3{
  font-family:"Stint Ultra Expanded","Montserrat",system-ui,sans-serif;
  color:var(--brand-0);
  line-height:1.2;
  letter-spacing:.5px;
}
.container h1,.container h2,.container h3{ margin:1.25rem 0 .5rem }
.container p{ margin:0 0 1rem }
.container ul,.container ol{ margin:0 0 1rem 1.25rem }
.container li{ margin:.35rem 0 }

/* Optional list style utility */
.checks{ list-style:none; padding:0; }

/* =========================
   HEADER (ONE ROW)
   Works whether you have:
   <header><div class="container header-inner">…</div></header>
   or direct children inside <header>.
   ========================= */
.header{
  background:var(--brand-1);
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Flex wrapper */
.header .header-inner,
.header > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap; /* one line on desktop */
}

/* Brand / logo */
.brand{ display:flex; align-items:center; gap:12px }
.custom-logo{ max-height:56px; height:auto; width:auto }
.brand .site-title,
.brand .site-name,
.brand .site-description,
.brand .tagline{ display:none }

/* Nav in the middle */
.nav{ flex:1 1 auto; margin-left:12px }
.nav ul{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0; flex-wrap:wrap;
}
.nav a{ padding:8px 0; font-weight:600; letter-spacing:.3px }
.nav .current-menu-item > a{ text-decoration:underline }

/* Contact actions right */
.actions{ margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 0 auto }
.actions a{ display:inline-flex; align-items:center; gap:.5rem }

/* =========================
   HERO / PAGE-LEDE
   ========================= */
.hero{ padding:3rem 0 }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:2rem }
@media (max-width:900px){ .split{ grid-template-columns:1fr } }

.hero h1{
  font-size:2.25rem;
  margin:.5rem 0 0;
}

.page-hero{ padding:8px 0 24px }
.page-hero.center{ text-align:center }
.page-hero h1{ margin:0; font-size:2.25rem }
.page-hero .kicker{ margin:.5rem 0 0; opacity:.8 }

/* =========================
   SERVICES GRID & CARDS
   ========================= */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:28px;
  margin:10px 0 60px;
}
@media (max-width:1000px){ .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .services-grid{ grid-template-columns: 1fr; } }

.service-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.service-card h2{
  margin:0 0 6px;
  font-size:1.35rem;
  letter-spacing:.4px;
  text-align:center;
}
.service-card p{
  margin:0;
  text-align:center;
  line-height:1.7;
}

/* circular image / placeholder */
.service-card img,
.service-card .img-placeholder{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; margin-bottom:12px; display:block;
}
.service-card .img-placeholder{ background:#e0e0e0 }

/* =========================
   FORMS (optional)
   ========================= */
.form{ display:grid; gap:1rem; max-width:720px }
.form .row{ display:grid; gap:1rem; grid-template-columns:1fr 1fr }
@media (max-width:720px){ .form .row{ grid-template-columns:1fr } }
.form input,.form textarea{
  width:100%; padding:.75rem; border:1px solid var(--border);
  border-radius:.5rem; font:inherit; background:#fff;
}
.form button{
  border:0; background:var(--brand-0); color:#fff;
  padding:.75rem 1.25rem; border-radius:.5rem; font-weight:700; cursor:pointer;
}
.form button:hover{ filter:brightness(.95) }
.notice{ padding:.75rem 1rem; border-radius:.5rem; background:var(--muted) }

/* =========================
   FOOTER (Correct Split Alignment)
   ========================= */

/* Creates the main two-column container */
.footer .footer-inner {
  display: flex;
  justify-content: space-between; /* KEY: Pushes children to opposite ends */
  align-items: center;            /* Vertically aligns the two groups */
  flex-wrap: wrap;                /* Allows groups to stack on small screens */
  gap: 2rem;                      /* Adds space if they stack */
}

/* Styles the navigation menu on the LEFT */
.footer .footer-nav {
  display: flex;        /* Makes the list items (Home, Services, etc.) a row */
  flex-wrap: wrap;
  gap: 1.5rem;          /* Space between each menu item */
  list-style: none;     /* CRITICAL: Removes bullets */
  margin: 0;            /* CRITICAL: Removes the theme's conflicting margin */
  padding: 0;           /* Removes default browser indentation */
}

/* Styles the legal/copyright info on the RIGHT */
.footer .footer-meta {
  display: flex;        /* Makes 'Legal' and 'Copyright' a row */
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;          /* Space between 'Legal' and 'Copyright' */
}

/* On mobile, stack everything cleanly and align left */
@media (max-width: 768px) {
  .footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}