/*
Theme Name: Coastal Coatings
Theme URI: https://coastalcoatingsandcontracting.com
Author: dnsaid.com
Author URI: https://dnsaid.com
Description: Custom theme for Coastal Coatings & Contracting LLC. Navy and white contractor site with R2-hosted project photography, seven service sections and a five-category project gallery. Built to the approved 2026 redesign brief.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coastal
*/

/* ---------------------------------------------------------------
   1. Tokens
   Palette from the approved mockup: navy, white, warm-neutral grays.
   --------------------------------------------------------------- */
:root {
  --navy:        #1B3A5F;
  --navy-deep:   #102844;
  --navy-hover:  #24507F;
  --navy-tint:   #E8EEF5;
  --white:       #FFFFFF;
  --gray-bg:     #F5F6F7;
  --gray-line:   #E2E5E9;
  --gray-text:   #5A6470;
  --ink:         #1A1A1A;
  --on-dark:     #F2F5F8;
  --on-dark-dim: #A9BCD1;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:  1180px;
  --gutter: clamp(18px, 5vw, 48px);

  --r:      4px;
  --shadow: 0 1px 2px rgba(16, 40, 68, .06), 0 8px 24px rgba(16, 40, 68, .07);
  --t:      180ms cubic-bezier(.2, .6, .3, 1);
}

/* ---------------------------------------------------------------
   2. Reset and base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--gray-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> is inline by default, which breaks any parent sized by
   aspect-ratio or inset. Every picture in this theme fills its frame. */
.hero__media picture,
.cta-band__media picture,
.project-card__frame picture,
.shot picture { display: block; width: 100%; height: 100%; }
a { color: var(--navy); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1 { font-size: clamp(34px, 5.6vw, 60px); }
h2 { font-size: clamp(27px, 3.9vw, 42px); }
h3 { font-size: clamp(19px, 2.1vw, 24px); }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tint { background: var(--gray-bg); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 12px;
}
.eyebrow--dark { color: var(--on-dark-dim); }

.lede { font-size: clamp(17px, 1.9vw, 20px); max-width: 62ch; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: .01em; line-height: 1;
  padding: 15px 24px; border-radius: var(--r);
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: background var(--t), color var(--t), border-color var(--t);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--gray-line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.textlink {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--navy);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.textlink--on-dark { color: #fff; }
.textlink svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------
   4. Header
   --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--gray-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 78px; padding-block: 10px;
}
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 50px; width: auto; }
.brand__text { font-family: var(--font-display); font-size: 19px; color: var(--ink); font-weight: 600; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  padding-block: 6px; border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t);
}
.nav a:hover { color: var(--navy); }
.nav .current-menu-item > a,
.nav li.is-current > a { color: var(--navy); border-bottom-color: var(--navy); }
/* The in-nav estimate button only appears in the collapsed mobile menu;
   on desktop the header's own button carries it. */
.nav > .btn { display: none; }

.header-cta { flex: none; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1.5px solid var(--gray-line);
  border-radius: var(--r); padding: 10px 12px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--gray-line);
    padding: 8px var(--gutter) 22px; margin: 0;
    box-shadow: var(--shadow);
  }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--gray-line); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { display: block; padding: 14px 2px; border-bottom: 0; }
  .nav > .btn { display: inline-flex; margin-top: 16px; width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   5. Hero
   --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-deep); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* The hero photograph's subject is the wallpapered tray ceiling in the upper
   third. The scrim rises from the bottom only, so the copy sits over the plain
   carpet and never covers the ceiling. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10,24,40,.90) 0%, rgba(10,24,40,.72) 34%, rgba(10,24,40,.20) 62%, rgba(10,24,40,.05) 100%);
}
.hero__inner {
  display: flex; align-items: flex-end;
  min-height: clamp(520px, 72vh, 760px);
  padding-block: 64px 56px;
}
.hero__copy { max-width: 640px; color: #fff; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero__support {
  font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; color: var(--on-dark-dim);
  letter-spacing: .01em; margin: 0 0 10px;
}
.hero__body { font-size: clamp(16px, 1.8vw, 19px); color: var(--on-dark); max-width: 48ch; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 640px) {
  .hero__media img { object-position: center 30%; }
  .hero__inner { min-height: 0; padding-block: 190px 44px; }
}

/* Page banner for inner pages */
.pagehead { background: var(--navy-deep); color: #fff; padding-block: clamp(56px, 8vw, 86px); }
.pagehead h1 { color: #fff; margin-bottom: 14px; }
.pagehead p { color: var(--on-dark-dim); max-width: 60ch; font-size: 18px; }

/* ---------------------------------------------------------------
   6. Section heading row
   --------------------------------------------------------------- */
.headrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px);
}
.headrow h2 { margin-bottom: 0; }
.headrow__text { max-width: 52ch; }

/* ---------------------------------------------------------------
   7. Service cards
   Four of the seven services have no photograph in the client handoff,
   so every tile uses the same icon treatment rather than mixing
   photo tiles and text tiles in one row.
   --------------------------------------------------------------- */
/* Cards carry their own border rather than showing through a 1px grid gap:
   seven services never fill a four-column row evenly, and the leftover cell
   would otherwise read as an empty eighth card. */
.services-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.service-card {
  background: #fff; padding: 28px 24px 26px; display: flex; flex-direction: column;
  gap: 10px; text-decoration: none; min-width: 0;
  border: 1px solid var(--gray-line); border-radius: var(--r);
  transition: background var(--t), border-color var(--t);
}
.service-card:hover { background: var(--navy-tint); border-color: var(--navy); }
.service-card__icon {
  width: 38px; height: 38px; color: var(--navy); margin-bottom: 4px;
}
.service-card__icon svg { width: 100%; height: 100%; }
.service-card h3 { font-size: 19px; margin: 0; }
.service-card p { font-size: 15px; margin: 0; color: var(--gray-text); }
.service-card__more {
  margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--navy); display: inline-flex; align-items: center; gap: 7px;
}
.service-card__more svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------
   8. Featured projects
   --------------------------------------------------------------- */
.featured { background: var(--navy-deep); color: #fff; }
.featured h2 { color: #fff; }
.featured-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.project-card { display: block; text-decoration: none; color: inherit; }
.project-card__frame {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r);
  background: rgba(255,255,255,.06); max-width: 100%;
}
.project-card__frame picture { display: block; width: 100%; height: 100%; }
.project-card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.project-card:hover .project-card__frame img { transform: scale(1.04); }
.project-card h3 { font-size: 17px; color: #fff; margin: 14px 0 2px; }
.project-card p { font-size: 13.5px; color: var(--on-dark-dim); margin: 0; }

/* ---------------------------------------------------------------
   9. Why / Built on Quality
   --------------------------------------------------------------- */
.why { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .why { grid-template-columns: 1fr 1fr; } }
.why__points { display: grid; gap: 26px 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.point { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.point__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy);
  display: grid; place-items: center;
}
.point__icon svg { width: 19px; height: 19px; }
.point h3 { font-size: 16px; margin: 2px 0 3px; font-family: var(--font-body); font-weight: 700; }
.point p { font-size: 14.5px; margin: 0; }

/* ---------------------------------------------------------------
   10. Estimate band
   --------------------------------------------------------------- */
.cta-band { position: relative; background: var(--navy); color: #fff; text-align: center; isolation: isolate; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(16,40,68,.90), rgba(16,40,68,.92));
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark); max-width: 54ch; margin-inline: auto; }
.cta-band .btn { margin-top: 24px; }

/* ---------------------------------------------------------------
   11. Service detail sections
   --------------------------------------------------------------- */
.service-block { border-top: 1px solid var(--gray-line); padding-block: clamp(36px, 5vw, 56px); scroll-margin-top: 100px; }
.service-block:first-of-type { border-top: 0; padding-top: 0; }
.service-block__grid { display: grid; gap: clamp(22px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .service-block__grid { grid-template-columns: 260px 1fr; } }
.service-block__num {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--navy); margin-bottom: 8px;
}
.service-block h2 { font-size: clamp(22px, 2.6vw, 30px); }
.service-block__body { max-width: 62ch; min-width: 0; }
.service-block__list { margin: 16px 0 0; padding-left: 20px; }
.service-block__list li { margin-bottom: 6px; }

/* ---------------------------------------------------------------
   12. Gallery
   --------------------------------------------------------------- */
.gallery-section { border-top: 1px solid var(--gray-line); padding-block: clamp(40px, 5vw, 64px); scroll-margin-top: 100px; }
.gallery-section:first-of-type { border-top: 0; padding-top: 0; }
.gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shot {
  margin: 0; border: 0; padding: 0; background: var(--gray-bg);
  border-radius: var(--r); overflow: hidden; cursor: zoom-in; display: block;
  aspect-ratio: 4 / 3; max-width: 100%; position: relative;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.shot:hover img { transform: scale(1.04); }
.shot--lead { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 620px) { .shot--lead { grid-column: span 1; aspect-ratio: 4 / 3; } }

.cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.cat-filter a {
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--gray-line); border-radius: 999px; padding: 8px 16px;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.cat-filter a:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-tint); }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(8, 18, 30, .94);
  display: grid; place-items: center; padding: 28px;
}
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 82vh; width: auto; border-radius: var(--r); }
.lb__cap { color: var(--on-dark-dim); font-size: 14px; margin-top: 14px; text-align: center; max-width: 60ch; }
.lb__close {
  position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.12);
  border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  width: 46px; height: 46px; border-radius: 50%; font-size: 20px; cursor: pointer;
}
.lb__nav--prev { left: 14px; }
.lb__nav--next { right: 14px; }

/* ---------------------------------------------------------------
   13. About
   --------------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr .9fr; } }
.about-photos { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.about-photos .shot:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------
   14. Contact
   --------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(30px, 5vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

.contact-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.contact-detail__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-tint); color: var(--navy); display: grid; place-items: center;
}
.contact-detail__icon svg { width: 18px; height: 18px; }
.contact-detail h3 { font-size: 15px; font-family: var(--font-body); font-weight: 700; margin: 2px 0 2px; }
.contact-detail a { color: var(--navy); word-break: break-word; }
.contact-detail p { font-size: 15px; margin: 0; }

.form-card {
  background: #fff; border: 1px solid var(--gray-line);
  border-radius: var(--r); padding: clamp(22px, 3.4vw, 36px); box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--gray-line); border-radius: var(--r);
  padding: 12px 14px; transition: border-color var(--t);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--gray-text); margin-top: 14px; }

.notice { border-radius: var(--r); padding: 14px 16px; margin-bottom: 22px; font-size: 15px; }
.notice--ok { background: #E7F3EC; color: #1C5436; border-left: 3px solid #1C5436; }
.notice--err { background: #FBEBE8; color: #8C3A2B; border-left: 3px solid #8C3A2B; }

/* ---------------------------------------------------------------
   15. Footer
   --------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-dim); padding-block: clamp(46px, 6vw, 70px) 30px; font-size: 15px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.site-footer h3 {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.site-footer a { color: var(--on-dark-dim); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand img { height: 54px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .95; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 38px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 13.5px;
}
.license-line { color: var(--on-dark-dim); }

/* ---------------------------------------------------------------
   16. Utilities
   --------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
[hidden] { display: none !important; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }