/*
Theme Name: New Age Electric
Theme URI: https://newageelectricllc.com/
Description: Lightweight child theme of Twenty Twenty-Five for New Age Electric LLC.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Text Domain: newage-electric
*/

/* ---------- base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.na-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8125rem !important; }

/* ---------- header ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.na-topbar { font-size: .875rem; }
.na-topbar a { color: inherit; text-decoration: none; font-weight: 700; }
.na-topbar .na-dot { color: var(--wp--preset--color--accent); }
.na-header { box-shadow: 0 1px 0 rgba(11,37,69,.08), 0 6px 18px rgba(11,37,69,.06); }
.na-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--wp--preset--color--navy); }
.na-brand img { width: 40px; height: auto; }
.na-brand span { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.05; }
.na-brand small { display:block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--wp--preset--color--muted); }
.na-header .wp-block-navigation a { font-weight: 600; text-decoration: none; }
.na-header .wp-block-navigation a:hover { color: var(--wp--preset--color--navy-2); text-decoration: underline; text-underline-offset: 4px; }
.na-call .wp-block-button__link { white-space: nowrap; }
@media (max-width: 781px) {
  .na-topbar .na-hide-sm { display: none; }
  .na-brand small { display:none; }
  .na-header .na-call { display: none; }
}

/* ---------- buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 2px; }
.na-btn-ghost .wp-block-button__link { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.85) !important; }
.na-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.12) !important; }
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* ---------- hero ---------- */
.na-hero { min-height: min(78vh, 680px) !important; }
.na-hero h1 { max-width: 17ch; text-wrap: balance; }
.na-hero .na-lede { max-width: 58ch; }
.na-chips { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.na-chips li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .85rem; font-size: .875rem; font-weight: 600; }
.na-chips.is-light li { background: var(--wp--preset--color--base); border-color: rgba(11,37,69,.15); color: var(--wp--preset--color--navy); }
.na-chips li::before { content: "\26A1\FE0E"; color: var(--wp--preset--color--accent); margin-right: .35rem; }
.na-chips.is-light li::before { color: var(--wp--preset--color--accent-dark); }

/* ---------- trust strip ---------- */
.na-trust > .wp-block-column { border-left: 4px solid var(--wp--preset--color--accent); padding-left: 1rem; }
.na-trust h3 { margin: 0 0 .25rem; }
.na-trust p { margin: 0; color: var(--wp--preset--color--muted); }

/* ---------- cards ---------- */
.na-cards { display:grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.na-card { background: var(--wp--preset--color--base); border: 1px solid rgba(11,37,69,.1); border-radius: 14px; padding: 1.5rem 1.4rem !important; position: relative; transition: box-shadow .2s ease, transform .2s ease; box-sizing: border-box; }
.na-card:hover { box-shadow: 0 14px 30px rgba(11,37,69,.12); transform: translateY(-2px); }
.na-card .na-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--accent); display:grid; place-items:center; margin-bottom: .9rem; }
.na-card .na-icon svg { width: 24px; height: 24px; }
.na-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.na-card p, .na-card ul { color: var(--wp--preset--color--muted); font-size: .975rem; margin: 0; }
.na-card ul { padding-left: 1.1rem; }
.na-card li { margin: .2rem 0; }
.na-card.is-emergency { background: var(--wp--preset--color--navy); color:#fff; border-color: transparent; }
.na-card.is-emergency .na-icon { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--navy); }
.na-card.is-emergency h3, .na-card.is-emergency p { color: #fff; }
.na-card.is-emergency a { color: var(--wp--preset--color--accent); font-weight: 700; }

/* ---------- photos ---------- */
.na-photo img, .na-gallery img { border-radius: 12px; }
.na-gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px),1fr)); gap: 1rem; }
.na-gallery figure { margin:0; position:relative; overflow:hidden; border-radius:12px; aspect-ratio: 4/3; background: var(--wp--preset--color--base-2); }
.na-gallery img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.na-gallery figure:hover img { transform: scale(1.04); }
.na-gallery figcaption { position:absolute; inset:auto 0 0 0; padding: 1.6rem .9rem .7rem; color:#fff; font-size:.875rem; font-weight:600; background: linear-gradient(transparent, rgba(6,20,38,.85)); }
.na-gallery.is-full figure { aspect-ratio: auto; }
.na-gallery.is-full img { height: auto; aspect-ratio: 4/3; }

/* ---------- area / info cards ---------- */
.na-info { background: var(--wp--preset--color--base); border-radius: 14px; padding: 1.75rem !important; border: 1px solid rgba(11,37,69,.1); }
.na-info dl { display:grid; grid-template-columns: max-content 1fr; gap:.55rem 1.25rem; margin:0; }
.na-info dt { font-weight: 700; color: var(--wp--preset--color--navy); }
.na-info dd { margin:0; }
.na-info a { font-weight: 700; }

/* ---------- page hero ---------- */
.na-pagehead h1 { margin: 0; }
.na-pagehead p { max-width: 62ch; }

/* ---------- form ---------- */
.na-form { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.na-form .na-full { grid-column: 1 / -1; }
.na-form label { display:block; font-weight: 700; font-size: .9375rem; margin-bottom: .35rem; color: var(--wp--preset--color--navy); }
.na-form .na-opt { font-weight: 500; color: var(--wp--preset--color--muted); }
.na-form input, .na-form select, .na-form textarea { width:100%; box-sizing:border-box; font: inherit; font-size: 1rem; padding: .75rem .85rem; border: 1.5px solid #c5ccd6; border-radius: 10px; background: #fff; color: var(--wp--preset--color--contrast); }
.na-form input:focus, .na-form select:focus, .na-form textarea:focus { border-color: var(--wp--preset--color--navy-2); }
.na-form textarea { min-height: 140px; resize: vertical; }
.na-form button { font: inherit; font-weight: 800; font-size: 1.05rem; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); border: 0; border-radius: 10px; padding: .95rem 1.6rem; cursor:pointer; }
.na-form button:hover { background: var(--wp--preset--color--accent-dark); color:#fff; }
.na-form .na-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.na-form .na-note { font-size: .875rem; color: var(--wp--preset--color--muted); margin: 0; }
.na-alert { border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.25rem; font-weight: 600; }
.na-alert.is-ok { background: #e7f6ec; color: #14532d; border: 1px solid #a7dcb9; }
.na-alert.is-err { background: #fdecec; color: #7f1d1d; border: 1px solid #f3b4b4; }
@media (max-width: 640px) { .na-form { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.na-footer a { color: #fff; text-decoration: none; }
.na-footer a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.na-footer .na-brand { color:#fff; }
.na-footer .na-brand small { color: #b8c4d4; }
.na-footer address { font-style: normal; line-height: 1.7; }
.na-footer ul { list-style:none; padding:0; margin:0; line-height: 2; }

/* ---------- mobile call bar ---------- */
.na-callbar { display:none; }
@media (max-width: 781px) {
  .na-callbar { display:grid; grid-template-columns: 1fr 1fr; position: fixed; left:0; right:0; bottom:0; z-index: 200; box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
  .na-callbar a { display:flex; align-items:center; justify-content:center; gap:.45rem; padding: .95rem .5rem; font-weight: 800; text-decoration:none; font-size: 1rem; }
  .na-callbar .is-call { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
  .na-callbar .is-quote { background: var(--wp--preset--color--navy); color: #fff; }
  body { padding-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.na-callbar svg { width: 20px; height: 20px; }
.na-pagehead .wp-block-post-excerpt__more-text { display:none; }
.na-svc { scroll-margin-top: 120px; }
.na-photo img, .na-gallery img, .na-card img { max-width: 100%; height: auto; display: block; }
.na-gallery:not(.is-full) img { height: 100%; }
.wp-block-paragraph + .wp-block-html > .na-chips, p + .na-chips, .na-chips.is-light { margin-top: 1.1rem !important; }
@media (max-width: 600px) {
  .na-cards:not(.is-detail) { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .na-cards:not(.is-detail) .na-card { padding: 1rem .9rem !important; border-radius: 12px; }
  .na-cards:not(.is-detail) .na-card h3 { font-size: 1rem; }
  .na-cards:not(.is-detail) .na-card p { font-size: .85rem; line-height: 1.45; }
  .na-cards:not(.is-detail) .na-card .na-icon { width: 36px; height: 36px; margin-bottom: .6rem; }
  .na-cards:not(.is-detail) .na-card.is-emergency { grid-column: 1 / -1; }
  .na-gallery:not(.is-full) { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .na-gallery figcaption { font-size: .78rem; padding: 1.2rem .6rem .5rem; }
}
.na-gallery.is-full { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }