/*
Theme Name: Summit Electrical
Theme URI: https://summit-elec.com
Author: Summit Electrical Solutions
Description: A one page block theme for Summit Electrical Solutions. Hero, services, recent work, about and contact, all editable in the Site Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.6.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: summit-electrical
Tags: one-column, block-patterns, full-site-editing, business, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* --------------------------------------------------------------
   Summit Electrical

   Colours, fonts and spacing live in theme.json. This file is only
   for things block attributes cannot express: the sticky blurred
   header, the caption overlays, the photo hover zoom and the
   credential chips.

   Rule of thumb: if a layout can be declared on the block, declare
   it there so the Site Editor previews it correctly. Do not
   reintroduce layout here.
   -------------------------------------------------------------- */

/* ---------- header ---------- */

.summit-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--wp--preset--color--line-dark);
}

/* backdrop-filter lives on a pseudo-element, not .summit-nav itself.
   backdrop-filter (like transform/filter) makes the element it's set on
   a containing block for position:fixed descendants. .summit-nav is an
   ancestor of the mobile nav's full-screen overlay dialog, so having
   the filter directly on it trapped that "fixed" overlay inside the
   header's own ~60px box instead of covering the viewport. */
.summit-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 18, 15, .92);
  backdrop-filter: blur(10px);
}

.admin-bar .summit-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .summit-nav { top: 46px; } }

.summit-nav__logo { margin: 0; }

/* !important beats the inline style="height:auto" WordPress adds to
   plain image blocks (alongside width/height HTML attributes set to
   the file's natural size) to prevent layout shift. That inline style
   otherwise overrides any external stylesheet rule for the same
   property, so the logo rendered at its native 777x438 instead of the
   intended fixed nav height. */
.summit-nav__logo img { height: 52px !important; width: auto !important; }

.summit-nav .wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-on-dark);
  padding-block: .4rem;
  border-bottom: 1.5px solid transparent;
  transition: color .2s, border-color .2s;
}

.summit-nav .wp-block-navigation a:hover .wp-block-navigation-item__label {
  color: var(--wp--preset--color--ember-lift);
}

.summit-nav .wp-block-navigation .wp-block-navigation__responsive-container-open,
.summit-nav .wp-block-navigation .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--text-on-dark);
}

/* flex-shrink:0 keeps the call button from being squeezed narrower than
   its content between the logo and nav links; white-space:nowrap stops
   the phone number wrapping mid-digit when it is squeezed anyway. */
.summit-nav .wp-block-buttons { flex-shrink: 0; }
.summit-nav .wp-block-button__link { padding: .6rem 1.15rem; font-size: .9rem; white-space: nowrap; }

@media (max-width: 820px) {
  .summit-nav__logo img { height: 38px; }
}

/* ---------- hero ---------- */

/* The reference caps the hero at 760px tall. The Cover block only offers
   a single unit for min-height, so the cap lives here and the block sets
   no inline min-height that would override it. */
.summit-hero { align-items: flex-end; min-height: min(86vh, 760px); }

/* summit-hero__panel carries the width cap and the background; see the
   structural note in hero.php for why it's nested one level deeper than
   summit-hero__content rather than being on summit-hero__content itself.

   Width scales with viewport rather than a fixed rem, so it grows wider
   on large screens instead of staying pinned to a size tuned for one
   width - 29rem is the floor, 44rem the ceiling for very wide viewports.
   The 45vw preferred value is tuned (not just eyeballed) so the h1 wraps
   to 2 lines at 1440px, matching the reference, rather than 3: measured
   the exact wrap point empirically at 620px, and this resolves to 648px
   at 1440px, keeping some margin above that threshold.

   Opacity is intentionally low (.12): most of the contrast job is done
   by the image brightness filter and text-shadow already in place, so
   this only needs to be a faint tint, not an opaque plate. */
.summit-hero__panel {
  max-width: clamp(29rem, 45vw, 44rem);
  background: rgba(10, 9, 7, .35);
}

.summit-hero__content { margin-bottom: clamp(1.5rem, 5vh, 3rem); }

/* Fixed brightness on the photo, not just the gradient overlay, so
   text contrast holds regardless of how bright/dark the specific photo
   is - important since this image is easy for a non-designer to swap
   out later without knowing to check contrast. */

.summit-hero .wp-block-cover__image-background { filter: brightness(1.2); }

/* text-shadow gives every glyph its own contrast edge independent of
   what's behind it, on top of the gradient overlay and the brightness
   filter above - belt and braces for a photo where any single
   technique might not be enough. */
.summit-hero h1,
.summit-hero .summit-eyebrow,
.summit-hero .summit-lede {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.summit-hero h1 { color: #fff; }
.summit-hero p { color: rgba(255, 255, 255, .84); }
.summit-hero .summit-eyebrow { color: var(--wp--preset--color--ember); }

/* ---------- shared type helpers ---------- */

.summit-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-weight: 500;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--wp--preset--color--ember);
}

/* Section intro block. Same trick as the hero: a flow group whose
   children cap at a readable measure and stay on the column's left
   edge, matching .section__head in the reference design.
   36.7rem is the reference's 60ch at the 16px body size. */
.summit-section__head > * { max-width: 36.7rem; }

/* ---------- ridgeline divider ---------- */

/* Full-bleed decorative divider. Deliberately no margin/padding reset
   here: WordPress uses negative margins to let .alignfull break out to
   the viewport edge, and overriding them with `margin: 0 !important` is
   what previously left a strip of the section colour down both sides. */
.summit-ridge {
  line-height: 0;
  background-color: var(--wp--preset--color--paper);
}

.summit-ridge svg {
  display: block;
  width: 100%;
  height: clamp(70px, 9vw, 130px);
}

/* ---------- services ---------- */

/* The grid itself, the 1px gap, the card backgrounds and the card
   padding are all declared on the blocks now. The container's `line`
   background showing through the 1px gaps is what draws the hairlines
   between cards, exactly as in the reference design. */

.summit-service__mark {
  display: block;
  width: 46px;
  color: var(--wp--preset--color--ember);
}

.summit-service__mark svg { display: block; width: 46px; height: 18px; }

.summit-services ul {
  list-style: none;
  padding: 0;
  margin: .2rem 0 0;
  display: grid;
  gap: .35rem;
  font-size: .88rem;
  color: var(--wp--preset--color--stone);
}

.summit-services li { padding-left: 1rem; position: relative; }

.summit-services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--ember);
}

/* ---------- recent work ---------- */

/* No breakpoint override needed: summit-work is a minimumColumnWidth
   grid (see work.php), which reflows to a single column natively.
   The old fixed-columnCount grid needed a !important media query to
   force that; this doesn't. */

.summit-shot { position: relative; overflow: hidden; margin: 0; }
.summit-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.summit-shot:hover img { transform: scale(1.035); }

.summit-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.6rem 1.2rem .95rem;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0), rgba(20, 18, 15, .86));
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-size: .82rem;
  letter-spacing: .06em;
  text-align: left;
}

/* ---------- about ---------- */

.summit-portrait { position: relative; margin: 0; }
.summit-portrait img { width: 100%; }

.summit-portrait figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  background: var(--wp--preset--color--ember);
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .55rem .95rem;
}

.summit-cred {
  background: var(--wp--preset--color--paper-raised);
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--line);
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem .8rem;
  margin: 0;
}

/* ---------- contact ---------- */

/* Now single-column (the second column's photo was dropped - see
   contact.php). summit-contact is a full-width flow wrapper; capping
   its children rather than itself keeps them off WordPress's
   constrained-layout auto-centring, same technique as
   summit-hero__content and summit-section__head. 36.7rem matches the
   site's other reading-width sections. */
.summit-contact > * { max-width: 36.7rem; }

/* The row layout, padding and hairlines are declared on the blocks.
   Only baseline alignment is left here: the flex group offers top,
   centre and bottom, but not baseline. */
.summit-crow { align-items: baseline; }

.summit-crow__label {
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--stone-light);
  white-space: nowrap;
}

.summit-crow__value {
  font-family: var(--wp--preset--font-family--display);
  font-size-adjust: 0.46;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  font-weight: 500;
  text-align: right;
}

.summit-crow__value a { text-decoration: none; color: inherit; transition: color .2s; }
.summit-crow__value a:hover { color: var(--wp--preset--color--ember-lift); }

/* ---------- footer ---------- */

.summit-footer { border-top: 1px solid var(--wp--preset--color--line-dark); }
/* !important needed for the same reason as .summit-nav__logo img above. */
.summit-footer img { height: 56px !important; width: auto !important; }
.summit-footer p { margin: 0; }

/* ---------- general ---------- */

html { scroll-behavior: smooth; }

/* font-size-adjust normalises the size a fallback font renders at to
   match the intended web font's actual x-height ratio, so a page
   viewed before/without the web font loaded doesn't visibly jump in
   size once it swaps in (or look mismatched if display:optional keeps
   the fallback for that page view). Values are measured from the real
   font files (fontTools, sxHeight / unitsPerEm), not estimated: Jost
   0.46, Public Sans 0.517. Jost's x-height is unusually low for a
   geometric sans, which is why the mismatch was noticeable - most
   system UI fonts sit around 0.52-0.54.

   font-size-adjust is inherited, so the body-font ratio is the base
   and headings/buttons/nav (which use the display font via theme.json,
   not this stylesheet) override it here; other display-font elements
   already carry their own value alongside font-family above. */
body { font-size-adjust: 0.517; }

h1, h2, h3,
.wp-block-button__link {
  font-size-adjust: 0.46;
}
/* !important beats WordPress core's own global-styles rule
   (.wp-site-blocks > * + * { margin-block-start: var(--wp--style--block-gap) })
   which is a real class selector, not :where(), so it has actual
   specificity that a :where()-based reset can never outrank. This is
   what put a 1.4rem gap between header/main and main/footer in the
   Site Editor. */
.wp-site-blocks > * { margin-block: 0 !important; }
[id] { scroll-margin-top: 96px; }

h1, h2, h3 { text-wrap: balance; }

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2.5px solid var(--wp--preset--color--ember-lift);
  outline-offset: 3px;
}

.wp-block-button__link { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .summit-shot img { transition: none; }
}