/*
Theme Name: NAMCSS
Theme URI: https://namcss.com
Author: IndigoChilli
Author URI: https://indigochilli.com
Description: Custom theme for the National Association of Masonic Clay Shooting Societies. Navy, heritage gold and clay accents derived from the association's emblem. Content is powered by the NAMCSS Core plugin.
Version: 0.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: namcss
*/

/* ==========================================================================
   CRITICAL STYLESHEET
   Only what the first paint needs: tokens, base, header, hero, layout,
   buttons, footer shell. Everything else lives in assets/css/deferred.css
   (loaded non-blocking).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — from the NAMCSS emblem & brand board
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --navy:       #1e2a47;   /* emblem field blue */
  --navy-deep:  #24345e;   /* header/footer ground (brightened) */
  --gold:       #b08d4f;   /* heritage gold */
  --gold-soft:  #cfb578;   /* gold for text on navy */
  --cream:      #f8f4eb;   /* warm page background */
  --cream-deep: #efe7d6;   /* alternate section band */
  --clay:       #d96f2e;   /* clay-target orange, sparing accent */
  --ink:        #272a33;   /* body text */
  --muted:      #6a6d76;
  --line:       #ded5c2;   /* hairline borders */
  --white:      #ffffff;

  /* Type */
  --font-heading: Georgia, 'Times New Roman', Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1140px;
  --radius: 4px;
  --space: 1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.22;
  margin: 0 0 .55em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 2px; }
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space);
}

.section { padding-block: 3rem; }
.section--alt { background: var(--cream-deep); }

/* Heading accent — short gold rule, echoing the emblem's rope ring */
.section h1:first-child::after,
.page-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: .35em;
  background: var(--gold);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button,
button,
input[type="submit"] {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: .65em 1.6em;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--navy-deep);
  border-bottom: 3px solid var(--gold);
  position: relative;
  z-index: 2;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding-block: 1rem;
  flex-wrap: wrap;
}

.site-branding a {
  color: var(--gold-soft);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: .06em;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  color: var(--cream);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .03em;
  padding: .45em .7em;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--gold-soft); }

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}

.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--gold-soft);
    color: var(--gold-soft);
  }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; padding-bottom: .75rem; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { border-bottom: 0; padding: .6em .25em; }
}

/* Header crest logo — oversized, breaks below the header line */
.site-logo{ display:inline-block; line-height:0; position:relative; z-index:3; }
.site-logo img{
  height:108px; width:auto; display:block;
  margin-bottom:-46px;            /* overhang below the header bar */
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
@media (max-width:880px){
  .site-logo img{ height:76px; margin-bottom:-26px; }
}

/* --------------------------------------------------------------------------
   Hero (front page)
   -------------------------------------------------------------------------- */
.hero {
  /* Photo with a deep navy wash: keeps text readable and on-palette.
     Gradient fallback paints first, so a slow image never flashes white. */
  background:
    linear-gradient(180deg, rgba(20, 29, 51, .92) 0%, rgba(30, 42, 71, .78) 55%, rgba(20, 29, 51, .9) 100%),
    var(--navy-deep) url('assets/images/hero.avif') center 30% / cover no-repeat;
  color: var(--cream);
  text-align: center;
  padding-block: 5.5rem 5rem;
}

.hero h1 {
  color: var(--cream);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  letter-spacing: .02em;
}

.hero h1::after { content: none; }

.hero p {
  max-width: 44em;
  margin-inline: auto;
  font-size: 1.1rem;
  color: #e8e2d2;
}

.hero-values {
  font-family: var(--font-heading);
  color: var(--gold-soft) !important;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .95rem !important;
  margin-top: 1.4rem;
}

.hero .button { margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   Footer shell
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
  color: var(--cream);
  margin-top: 3.5rem;
  padding-block: 2.5rem;
  font-size: .95rem;
}

.site-footer a { color: var(--gold-soft); }

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
  flex-wrap: wrap;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: 2.5rem;
}
.site-footer li { margin-bottom: .3rem; break-inside: avoid; }

/* Footer emblem + brand block */
.footer-brand{ display:flex; align-items:center; gap:1.1rem; }
.footer-emblem{ width:auto; height:110px; flex:0 0 auto; }
@media (max-width:600px){ .footer-emblem{ height:88px; } }