/* ============================================================
   CUSTOM.CSS  (edit this file directly, no build needed)

   Loads after every other theme stylesheet, and anything written
   here beats the built Tailwind CSS. Save, upload, clear the
   WP Engine cache, refresh.

   CONTENTS
     1. Site settings      colors, type sizes, spacing (change a number, it applies everywhere)
     2. Headings           section h2 size, hero h1 spacing, title line breaks
     3. Section layout     lists in intro copy, sticky headings
     4. Components         capability chips, contact boxes
     5. Page-specific      Contact, Services, ADA
     6. Your own rules     add new rules at the bottom
   ============================================================ */


/* ------------------------------------------------------------
   1. SITE SETTINGS
   ------------------------------------------------------------ */
:root {
  /* Brand colors */
  --color-ink: #0d0d0d;        /* page background */
  --color-surface: #131315;    /* cards / panels */
  --color-orange: #ff6903;
  --color-orange-hi: #ff8330;  /* orange hover */
  --color-blue: #0d37a0;
  --color-teal: #40ccc8;
  --color-magenta: #d70f52;
  --color-light: #f5fcfc;      /* main text */

  /* H1 (page heroes): size = min, scales with screen, max */
  --text-h1: clamp(3.6rem, 10.2vw, 11.4rem);
  --text-h1--line-height: 0.86;
  --text-h1--letter-spacing: -0.06em;

  /* H2 (section headings) */
  --text-h2: clamp(2.6rem, 5.8vw, 5.6rem);
  --text-h2--line-height: 1.05;
  --text-h2--letter-spacing: -0.05em;

  /* H3 */
  --text-h3: 1.35rem;
  --text-h3--line-height: 1.3;
  --text-h3--letter-spacing: -0.025em;

  /* Body text */
  --text-lede: clamp(1.15rem, 1.55vw, 1.45rem);  /* intro paragraph under headings */
  --text-lede--line-height: 1.58;
  --text-body: 1.2rem;
  --text-body--line-height: 1.62;
  --text-copy: 1.0625rem;                        /* smaller paragraph text */
  --text-copy--line-height: 1.65;

  /* Small caps labels and buttons */
  --text-label: 0.625rem;
  --text-label--letter-spacing: 0.26em;
  --text-button: 0.75rem;
  --text-button--letter-spacing: 0.14em;

  /* Big numbers */
  --text-stat: clamp(3.8rem, 7.4vw, 6.4rem);
  --text-stat--line-height: 0.88;
  --text-metric: clamp(2.4rem, 4vw, 3.8rem);
  --text-metric--line-height: 0.9;

  /* Spacing */
  --spacing-gutter: clamp(1.25rem, 4vw, 4.5rem);  /* left/right page padding */
  --spacing-section: clamp(8rem, 18vh, 16rem);    /* space between sections */
  --container-site: 1760px;                       /* max content width */
}


/* ------------------------------------------------------------
   2. HEADINGS
   ------------------------------------------------------------ */

/* Section h2 in the narrow left column next to the copy (desktop only; under
   1001px the heading is full width and uses --text-h2). Middle number = how fast
   it grows with the screen (lower = smaller on laptops); last number = max size. */
@media (min-width: 1001px) {
  .head-grid > h2 {
    font-size: clamp(2.4rem, 4.2vw, 5.6rem);
    text-wrap: balance; /* evens out line lengths so no lonely last word */
  }
}

/* Hero h1 on subpages, landing pages and home: room between lines so letters
   that hang down (g, p, y) don't touch the line below. Was .88. */
.hero-field h1 { line-height: 1.1; }

/* H2s inside regular page/post content (smaller than section h2s) */
.cmg-content h2 { line-height: 1.08; }

/* Line breaks typed into titles only apply on screens 1300px and wider;
   smaller screens let the title wrap on its own. Change 1299px to adjust. */
@media (max-width: 1299px) {
  h1 br, h2 br, h3 br { display: none; }
}


/* ------------------------------------------------------------
   3. SECTION LAYOUT
   ------------------------------------------------------------ */

/* Bulleted / numbered lists typed into a section's intro copy */
.head-copy ul { list-style: disc; padding-left: 1.25rem; }
.head-copy ol { list-style: decimal; padding-left: 1.25rem; }
.head-copy li + li { margin-top: .5rem; }
.head-copy li::marker { color: var(--color-orange); }

/* Sections with full-width content (images, card grids) under the copy: the sticky
   label + heading would slide over that content while scrolling, so keep them in place. */
@media (min-width: 1001px) {
  .head-grid:has(> .full) > h2,
  .head-grid:has(> .full) > .label { position: relative; top: auto; }
}


/* ------------------------------------------------------------
   4. COMPONENTS
   ------------------------------------------------------------ */

/* Service page capability chips that aren't links: no hover fill, normal cursor */
span.wipe { cursor: default; }
span.wipe::before { display: none; }
span.wipe:hover { color: var(--color-muted); border-color: var(--color-line-hi); }
span.wipe:hover::after { color: var(--color-teal); }

/* Old editor buttons typed into copy fields (class="btn btn-outline-dark", btn-primary,
   btn-plus, etc.): match the theme's outline and orange buttons anywhere on the site,
   not just in default page content. */
a.btn:not(.btn-solid):not(.btn-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  font-size: var(--text-button); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.2; padding: 1.05rem 1.75rem; margin-top: .5rem;
  color: var(--color-light); background: transparent; border: 1px solid var(--color-line-hi);
  text-decoration: none;
}
a.btn:not(.btn-solid):not(.btn-ghost):hover { color: var(--color-teal); border-color: var(--color-teal); }
a.btn.btn-primary { color: var(--color-ink); font-weight: 600; border-color: transparent; background: linear-gradient(100deg, var(--color-magenta) 0%, var(--color-orange) 62%); }
a.btn.btn-primary:hover { color: var(--color-ink); border-color: transparent; background: linear-gradient(100deg, #ef2f6b 0%, var(--color-orange-hi) 62%); box-shadow: 0 6px 26px rgba(255,105,3,.34); transform: translateY(-1px); }
a.btn-plus::after { content: "+"; font-size: 1.1em; line-height: 1; }
a.btn:not(.btn-solid):not(.btn-ghost) + a.btn:not(.btn-solid):not(.btn-ghost) { margin-left: .75rem; }

/* Email in a narrow box: wrap instead of spilling out. Slightly smaller between
   881px and 1180px, where the contact page's three boxes are narrowest. */
.cell a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (min-width: 881px) and (max-width: 1180px) {
  .cell a[href^="mailto:"] { font-size: .9375rem; }
}


/* ------------------------------------------------------------
   5. PAGE-SPECIFIC
   ------------------------------------------------------------ */

/* Contact: hero strip answers all orange and the same size; phone and email
   turn white on hover so they still read as links. */
.page-template-page-contact .readout .v {
  color: var(--color-orange);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.page-template-page-contact .readout a.v:hover { color: var(--color-light); }

/* Services index: old editor content has inline "text-align: center"; keep cards left aligned */
section[id^="goal-"] .cell [style*="text-align"] { text-align: left !important; }

/* Areas We Serve city pages (Destin, 30A...): comfortable reading width for the long
   article, and styled small headings (h4) the old content uses. */
.city-copy { max-width: 72ch; }
.city-copy > h2:first-child, .city-copy > h3:first-child { margin-top: 0; }
.city-copy h4 { color: var(--color-light); font-weight: 600; font-size: var(--text-copy); margin: 2rem 0 .75rem; }

/* Project pages (Gallery): no grain or fade on the images, and the main images are
   centered and capped in width. Most project images are only ~1440px wide, so showing
   them smaller keeps them sharp on Retina screens. Change 900px to resize them. */
body.single-gallery::after { display: none; }   /* the site-wide screen texture */
.single-gallery .shot { max-width: 900px; width: 100%; margin-inline: auto; }
.single-gallery .shot > i { display: none; }
.single-gallery .shot + p.full { max-width: 900px; margin-inline: auto; width: 100%; }  /* text under an image */

/* ADA service template: wider intro line under the hero heading (was 48ch) */
.page-template-page-single-service-new-2026-ada .page-hero .text-lede { max-width: 70ch; }


/* ------------------------------------------------------------
   6. YOUR OWN RULES (add below)
   ------------------------------------------------------------ */


/* Line grids (Work tiles, case study grids, team, landing cards, etc.): the lines
   used to be the grid's gray background showing through 1px gaps, so a short last
   row left a big gray block. Each item now draws its own outline instead, and empty
   spots stay the page color. */
.grid.gap-px.bg-line { background: transparent; border-color: transparent; }
.grid.gap-px.bg-line > * { box-shadow: 0 0 0 1px var(--color-line); }