/*
Theme Name: GardenESL
Theme URI: https://inkwellesl.com
Author: Steve O
Author URI: mailto:steve@inkwellesl.com
Description: Minimal, BoldGrid-friendly full-width theme for Inkwell ESL. Lets BoldGrid handle layout, blocks, and animations while providing a clean, accessible shell.
Version: 1.0.0
Text Domain: gardenesl
Tags: full-width, accessibility-ready, custom-colors
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ------------------------------
   1) CSS TOKENS (brand colors, spacing)
--------------------------------- */
:root {
  --inkwell-navy: #284469;      /* primary */
  --inkwell-green: #4B8B1C;     /* secondary */
  --inkwell-ink: #0F172A;       /* body text */
  --inkwell-cream: #FAF7F2;     /* soft background */
  --inkwell-accent: #F2B84B;    /* optional highlight */
  --inkwell-muted: #475569;     /* subtle text */
  --container-max: 1200px;
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --focus: 0 0 0 3px rgba(75,139,28,.35); /* green focus ring */
}

/* ------------------------------
   2) BASE / RESET (keep skinny)
--------------------------------- */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  color: var(--inkwell-ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--inkwell-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }
h1,h2,h3,h4,h5 { color: var(--inkwell-navy); line-height: 1.25; margin: 0 0 .75rem; }

/* Focus styles for a11y */
:where(a, button, [role="button"], input, select, textarea):focus {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

/* ------------------------------
   3) LAYOUT HELPERS
--------------------------------- */
.site-wrap { width: 100%; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
.alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.alignwide { max-width: min(1400px, 92vw); margin-left: auto; margin-right: auto; }

/* WordPress editor alignments (for blocks BoldGrid might output) */
.wp-block-image .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-block-image .alignleft, .alignleft { float: left; margin: .5rem 1rem .5rem 0; }
.wp-block-image .alignright, .alignright { float: right; margin: .5rem 0 .5rem 1rem; }

/* Clearfix utility */
.clearfix::after { content: ""; display: table; clear: both; }

/* ------------------------------
   4) HEADER / NAV (minimal; BoldGrid styles on top)
--------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
}
.brand a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--inkwell-navy); font-weight: 700;
}
.tagline { font-size: .9rem; color: var(--inkwell-green); }

.menu-toggle { display: none; background: transparent; border: 0; font-size: 1rem; }
.primary-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.primary-nav .menu > li > a { padding: .5rem .25rem; border-radius: 6px; }
.primary-nav .menu > li > a:hover { background: rgba(40,68,105,.08); text-decoration: none; }

/* Dropdown basics (WordPress outputs .sub-menu) */
.primary-nav .sub-menu {
  position: absolute; display: none;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .5rem; box-shadow: var(--shadow);
}
.primary-nav li { position: relative; }
.primary-nav li:hover > .sub-menu { display: block; }
.primary-nav .sub-menu li a { display: block; padding: .4rem .6rem; white-space: nowrap; }

/* Mobile */
@media (max-width: 960px) {
  .menu-toggle { display: inline-block; }
  .primary-nav { display: none; }
  .primary-nav.is-open { display: block; }
  .primary-nav .menu { flex-direction: column; gap: .25rem; }
  .primary-nav .sub-menu { position: static; display: none; box-shadow: none; border: 0; padding: 0; }
  .primary-nav li:hover > .sub-menu { display: none; } /* tap opens via BoldGrid or JS */
}

/* ------------------------------
   5) SECTIONS (home shells you’ll fill with BoldGrid)
--------------------------------- */
.section-intro { padding: 4rem 0; }
.section-why { padding: 4rem 0; background: var(--inkwell-cream); }
.section-cta  { padding: 4rem 0; text-align: center; }

.cta-band {
  background: var(--inkwell-navy); color: #fff;
  text-align: center; padding: 2rem 1rem;
}
.cta-band a {
  color: #fff; border: 2px solid #fff; padding: .6rem 1rem;
  border-radius: .5rem; display: inline-block;
}

/* ------------------------------
   6) BUTTONS / UTILITIES
--------------------------------- */
.btn {
  display: inline-block; padding: .75rem 1.25rem;
  border-radius: .5rem; background: var(--inkwell-green); color: #fff;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }

.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem;
}

/* Spacing helpers */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.pt-0{padding-top:0}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}
.pb-0{padding-bottom:0}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}

/* ------------------------------
   7) FOOTER
--------------------------------- */
.site-footer { color: var(--inkwell-muted); }

/* ------------------------------
   8) PRINT (kept tiny)
--------------------------------- */
@media print {
  .site-header, .site-footer, nav, .menu-toggle { display: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; }
}