/*
Theme Name: National Asset Management
Theme URI: https://nationalasset-management.com/
Template: kadence
Author: National Asset Management LLC
Description: Kadence child theme for National Asset Management — "Heritage Steward" design system (evergreen + brass + sand, Fraunces + Inter). Content is editable Kadence Blocks.
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: nam
*/

/* ============================================================
   Brand tokens — Heritage Steward
   ============================================================ */
:root{
  --ink:#16241C;
  --evergreen:#1C3A2E;
  --brass:#B7892E;
  --sand:#F6F3EC;
  --paper:#FDFCF9;
  --border:#E4DED0;
  --border-warm:#E0D8C6;
  --muted:#54655B;
  --muted-soft:#7A8A7F;
  --eyebrow-bg:#F3EBD8;
  --eyebrow-fg:#8A681F;

  --font-head:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); }

h1,h2,h3,.nam-stat .wp-block-heading{ font-family:var(--font-head); font-weight:500; letter-spacing:-.01em; }
h1 em, h2 em{ font-style:italic; color:var(--brass); }

/* Eyebrow pill */
.nam-eyebrow{
  display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.65rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--eyebrow-fg); background:var(--eyebrow-bg);
  padding:6px 11px; border-radius:20px;
}

/* Section label */
.nam-label{
  font-family:var(--font-body); font-weight:700; font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--eyebrow-fg);
}

/* Alternating bands */
.nam-band-sand{ background:var(--sand); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.nam-band-dark{ background:var(--evergreen); color:var(--sand); }
.nam-band-dark h2{ color:var(--sand); }
/* Plain paper band — used for the service-detail "What's included" section:
   same alignfull + border rhythm as .nam-band-sand, but on the page's own
   --paper background so it reads as a distinct third tone between the sand
   cards band and the dark closing CTA. */
.nam-band-plain{ background:var(--paper); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* Full-bleed band content constraint — "background spans the full width,
   content does not" pattern.
   Kadence ships with its own theme.json swapped out for a missing path
   (see kadence/inc/components/editor/component.php: disable_json_optionally())
   unless the site owner turns on the "theme_json_mode" theme_mod. With it
   off (the default here — confirmed via wp_theme_has_theme_json() === false
   on this install), WordPress's core group-block back-compat shim
   (wp_restore_group_inner_container(), wp-includes/block-supports/layout.php)
   wraps EVERY plain wp:group's children in a
   `.wp-block-group__inner-container` div, and the page template for this
   content ("_kad_post_layout":"fullwidth" + "_kad_post_content_style":
   "unboxed") applies no max-width of its own. Net effect: these alignfull
   bands' real content sits in a div with no width constraint and no
   padding, flush to the viewport edge. Constrain that specific, verified
   wrapper directly rather than relying on WordPress's global-styles
   constrained-layout CSS, which is inert on this install for the same
   theme_json_mode reason. Re-uses Kadence's own --global-content-width
   custom property (set outside theme.json, so unaffected by the above) for
   visual consistency with the rest of the site. */
.nam-hero > .wp-block-group__inner-container,
.nam-stats > .wp-block-group__inner-container,
.nam-band-sand > .wp-block-group__inner-container,
.nam-band-plain > .wp-block-group__inner-container,
.nam-network > .wp-block-group__inner-container,
.nam-band-dark > .wp-block-group__inner-container{
  max-width:var(--global-content-width, 1290px);
  margin-left:auto; margin-right:auto;
  padding-left:clamp(20px, 5vw, 48px); padding-right:clamp(20px, 5vw, 48px);
  box-sizing:border-box;
}

/* Trust strip — each .nam-stat is a core group block containing a heading
   (the figure, e.g. "30+") and a paragraph (the label, e.g. "Years of care").
   Selectors target the core-block elements directly rather than the old
   single-run "<b>30+</b> label" markup.
   display:flex belongs on the inner-container (see comment above), not on
   .nam-stats itself: .nam-stats's only direct child is that wrapper div, so
   flexing .nam-stats directly produces a flex row of exactly ONE item (the
   wrapper), which collapses to its content width and leaves the rest of the
   green band empty — the four stats then stack vertically inside that one
   flex item instead of sitting in a row. Confirmed via browser_evaluate
   against the live DOM. */
.nam-stats{ background:var(--evergreen); }
.nam-stats > .wp-block-group__inner-container{ display:flex; flex-wrap:wrap; }
.nam-stat{
  flex:1 1 180px; padding:18px 20px;
  border-right:1px solid rgba(183,137,46,.3);
}
.nam-stat:last-child{ border-right:0; }
.nam-stat .wp-block-heading{
  display:block; font-size:1.5rem; color:var(--brass); margin:0 0 4px; letter-spacing:0;
}
.nam-stat p{
  margin:0;
  font-family:var(--font-body); font-weight:600; font-size:.65rem;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(246,243,236,.72);
}

/* Service cards — core-block markup: a wp:group.nam-card containing a
   wp:heading (h3.wp-block-heading), a wp:paragraph (body copy), and a second
   wp:paragraph whose sole content is the "Learn more" link. */
.nam-card{
  background:var(--paper); border:1px solid var(--border-warm);
  border-radius:10px; padding:18px; height:100%;
}
.nam-card .wp-block-heading{ font-size:1rem; font-weight:600; margin:0 0 5px; }
.nam-card p{ font-size:.8rem; line-height:1.55; color:var(--muted-soft); margin:0 0 10px; }
.nam-card p:last-child{ margin-bottom:0; }
.nam-card a{
  font-family:var(--font-body); font-weight:600; font-size:.7rem; color:var(--evergreen);
  text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px;
}

/* Brass-ruled points (sustainability) — wp:group.nam-point containing a
   wp:heading (h3.wp-block-heading) and a wp:paragraph. */
.nam-point{ border-left:2px solid var(--brass); padding:2px 0 2px 14px; }
.nam-point .wp-block-heading{ font-size:.9rem; font-weight:600; margin:0 0 3px; }
.nam-point p{ font-size:.78rem; line-height:1.5; color:var(--muted-soft); margin:0; }

/* Photo slot — MUST degrade to a brand field, never a broken grey box.
   No photography exists yet; a missing image must still look deliberate. */
.nam-photo{
  background:linear-gradient(150deg,#33503F,var(--evergreen) 60%,var(--ink));
  border-radius:10px; min-height:280px;
}
.nam-photo img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }

/* Buttons */
.nam-btn .kb-button, .nam-btn a{ background:var(--evergreen); color:var(--sand); border-radius:7px; }
.nam-btn-alt .kb-button, .nam-btn-alt a{
  background:transparent; color:var(--evergreen); border:1px solid var(--border-warm); border-radius:7px;
}
/* .nam-btn-alt on the evergreen closing band ("(623) 374-5249"): the default
   rule above sets text color to --evergreen, which is invisible against an
   --evergreen background — the button rendered as an empty outlined box.
   Give the dark-band context sand text on a brass-tinted border instead,
   without touching the light-band usage (hero's "See all services"). */
.nam-band-dark .nam-btn-alt .kb-button, .nam-band-dark .nam-btn-alt a{
  color:var(--sand); border-color:var(--brass);
}

/* ============================================================
   Contact form (inc/contact-handler.php shortcode output)
   ============================================================ */
.nam-contact-form{
  display:flex; flex-direction:column; gap:0;
  max-width:640px;
}

.nam-contact-form label{
  font-family:var(--font-body); font-weight:700; font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  display:block; margin:18px 0 6px;
}

.nam-contact-form input[type="text"],
.nam-contact-form input[type="email"],
.nam-contact-form select,
.nam-contact-form textarea{
  font-family:var(--font-body); font-size:.9375rem; font-weight:400;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--border-warm); border-radius:7px;
  padding:11px 14px; width:100%; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}

.nam-contact-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2354655B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px; cursor:pointer;
}

.nam-contact-form textarea{ min-height:140px; resize:vertical; line-height:1.6; }

.nam-contact-form input::placeholder,
.nam-contact-form textarea::placeholder{ color:var(--muted-soft); }

/* Focus state — never removed, always replaced: a visible brass ring that
   meets contrast against both the paper field background and the sand page
   background, for keyboard users. */
.nam-contact-form input[type="text"]:focus-visible,
.nam-contact-form input[type="email"]:focus-visible,
.nam-contact-form select:focus-visible,
.nam-contact-form textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:1px;
  border-color:var(--brass);
}

/* Submit button — matches the site's primary .nam-btn treatment
   (evergreen bg, sand text, 7px radius) so it doesn't look foreign. */
.nam-btn-submit{
  display:inline-block; font-family:var(--font-body); font-weight:700;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sand); background:var(--evergreen);
  border:1px solid var(--evergreen); border-radius:7px;
  padding:13px 26px; margin-top:22px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.nam-btn-submit:hover{ background:var(--ink); border-color:var(--ink); }
.nam-btn-submit:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* Status notes — ok vs err must be unmistakable without relying on colour
   alone: distinct icon glyph, distinct left border, distinct font-weight on
   the icon, in addition to the colour difference. */
.nam-form-note{
  font-family:var(--font-body); font-size:.9rem; line-height:1.6;
  padding:14px 18px 14px 44px; margin:0 0 18px;
  border-radius:7px; position:relative; border:1px solid transparent;
}
.nam-form-note::before{
  position:absolute; left:16px; top:14px;
  font-family:var(--font-body); font-weight:900; font-size:1rem; line-height:1.6;
}
.nam-form-note--ok{
  background:#EAF1EC; border-color:#B9D3C2; border-left:4px solid var(--evergreen);
  color:#1A3226;
}
.nam-form-note--ok::before{ content:"\2713"; color:var(--evergreen); }

.nam-form-note--err{
  background:#FBEDEA; border-color:#E9BDB2; border-left:4px solid #A3402C;
  color:#5C2417;
}
.nam-form-note--err::before{ content:"\26A0"; color:#A3402C; }

.nam-form-note a{ color:inherit; text-decoration:underline; }