/*
Theme Name: Anderson Dock & Lift
Theme URI: https://www.andersondockandlift.com
Author: GEO BROS
Description: Block theme for Anderson Dock & Lift Co. Design tokens match the outgoing Hibu/Duda site so the migration is visually 1:1.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anderson
*/

/* Everything visual lives in theme.json. This file exists for the theme header
   and for the few rules the block system cannot express. */

/* Sticky mobile call bar, matching the outgoing site's behavior. */
.adl-callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 99;
  display: none;
  gap: 1px;
}
.adl-callbar a {
  flex: 1;
  padding: 0.9rem 0.5rem;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 781px) {
  .adl-callbar { display: flex; }
  body { padding-bottom: 3.5rem; }
}

/* The outgoing site sets headings in Kumbh Sans at a heavier optical weight
   than the block defaults render, so nudge tracking to match. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

/* Hero overlay: the source site darkens photos to 40% black behind white text. */
.adl-hero {
  position: relative;
}
.adl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.adl-hero > * {
  position: relative;
}

/* Section headings on the source site carry a short rule underneath.
   Drawn as a pseudo-element: making the heading inline-block to fit the rule
   to the text breaks the constrained layout's auto-centering, so the heading
   stays a full-width block and the rule is sized on its own. */
.adl-ruled::after {
  content: "";
  display: block;
  width: min(34rem, 60%);
  height: 2px;
  margin-top: 0.85rem;
  background: currentColor;
  opacity: 0.9;
}

/* Check-mark bullets in the "Why Choose" panel. */
.adl-checks {
  list-style: none;
  padding-left: 0;
}
.adl-checks li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
}
.adl-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-weight: 700;
  color: var(--wp--preset--color--orange);
}

/* Star rating row. The stars themselves are SVG (adl_stars_svg in
   functions.php); this only sizes them and sets them on the text baseline. */
.adl-starsvg {
  height: 1.55rem;
  width: auto;
  display: inline-block;
  vertical-align: -0.34em;
}
.adl-starsvg-sm {
  height: 1.25rem;
}
/* The header row runs at 18px on a phone; 1.55rem stars tower over it. */
@media (max-width: 781px) {
  .adl-starsvg {
    height: 1.1rem;
    vertical-align: -0.16em;
  }
}
.adl-rating {
  font-size: 1.125rem;
  line-height: 1.2;
}
.adl-rating a {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--body);
  /* The label opens with "(", whose descender cuts through the underline.
     With skip-ink on, that gap strands the few pixels of underline sitting to
     the left of the bracket, and the orphan reads as a full stop after the
     stars. Draw the underline straight through instead. */
  text-decoration-skip-ink: none;
}

/* Header spacing, measured off the outgoing site at 1920 rather than guessed.
   There the rating row and the Request Estimate button sit in one band near the
   top, and "Serving / Florida's Gulf Coast" and "Call or Text / phone" sit in a
   second band about 34px below. Ours had 4px and 12px, which bunched both
   columns into the middle. Applied as CSS rather than by editing the inline
   block margins so the stacked mobile header keeps its tighter rhythm. */
@media (min-width: 782px) {
  .adl-headtop .adl-rating {
    margin-bottom: 2rem !important;
  }
  .adl-headtop .wp-block-buttons + p {
    margin-top: 2rem !important;
  }
}

/* Buttons. The color change on hover already came from theme.json, but with
   `transition: all 0s` it snapped instantly and read as a glitch rather than a
   response. Give it a duration, a resting shadow in the spirit of the outgoing
   site's, and a small lift so the control feels pressable. */
.wp-block-button__link,
.wp-element-button,
.adl-cardlink {
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.adl-cardlink:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}
.wp-block-button__link:active,
.wp-element-button:active,
.adl-cardlink:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* Orange on white is a weak focus indicator, so ring it in navy and hold the
   ring off the edge where it stays visible against both. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.adl-cardlink:focus-visible {
  outline: 3px solid var(--wp--preset--color--navy);
  outline-offset: 3px;
}
/* Outline buttons sit on photos; a dark shadow there muddies them. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .wp-element-button,
  .adl-cardlink {
    transition: none;
  }
  .wp-block-button__link:hover,
  .wp-element-button:hover,
  .adl-cardlink:hover {
    transform: none;
  }
}

.adl-headphone a {
  color: var(--wp--preset--color--body);
  text-decoration: none;
}

/* Top level labels never split across two lines. The bar is capped at 1200px
   while the font is fixed at 1rem, so nine items plus their gaps sat exactly on
   the cap and the four items carrying a submenu chevron wrapped, but only at
   1536px and wider, which is why measuring 1440 and below missed it. The gap in
   header.html carries the fix; this is the guard that makes any future overflow
   loud (an item drops to its own row) rather than silent (a label folds). */
/* The className lands on the container <ul> itself, not on a wrapper, so the
   top level items are .adl-mainnav > li. Getting this wrong is silent: the rule
   simply never matches and the labels keep folding. */
.adl-mainnav > li > .wp-block-navigation-item__content,
.adl-mainnav > li > .wp-block-navigation-submenu__toggle {
  white-space: nowrap;
}

/* Nav row: full-bleed navy bar with generous hit areas. */
.adl-mainnav .wp-block-navigation-item__content {
  padding: 0.9rem 1.1rem;
}
.adl-mainnav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--orange);
}

/* Nine top level items with labels that cannot fold need the width to come from
   somewhere between the mobile breakpoint and 1200px, where the bar is at its
   tightest relative to the font. Taken off the item padding rather than the gap
   because the gap is what keeps the items readable as separate targets. */
@media (min-width: 600px) and (max-width: 1199px) {
  .adl-mainnav > li > .wp-block-navigation-item__content,
  .adl-mainnav > li > .wp-block-navigation-submenu__toggle {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* One narrow band, roughly a small laptop, where the nine labels at their
   full size land within a few pixels of the viewport. Do not set font-size
   here: the nav size is fluid, so a fixed rem value is larger than the fluid
   one at the bottom of this range and makes the overflow worse, not better.
   Measured, not assumed. */
@media (min-width: 992px) and (max-width: 1060px) {
  .adl-mainnav > li > .wp-block-navigation-item__content,
  .adl-mainnav > li > .wp-block-navigation-submenu__toggle {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* Hero form sits above the photo on desktop, stacks under it on mobile.
   Kept deliberately compact: this panel competes with the hero photo and the
   headline for the same screen, and Fluent Forms ships a 20px gap under every
   field which stacks up fast across six of them. */
.adl-heroform .wp-block-heading {
  color: #fff;
}
.adl-heroform input[type="text"],
.adl-heroform input[type="email"],
.adl-heroform input[type="tel"],
.adl-heroform select,
.adl-heroform textarea {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9375rem;
}
.adl-heroform .ff-el-group {
  margin-bottom: 0.75rem;
}
.adl-heroform .ff-el-group:last-child {
  margin-bottom: 0;
}
.adl-heroform textarea {
  min-height: 4.25rem;
  height: 4.25rem;
}
/* The panel's own padding and title, trimmed to match. */
.adl-heroform {
  padding: 1.5rem !important;
}
.adl-heroform > .wp-block-heading {
  font-size: 1.25rem !important;
  margin-bottom: 0.9rem !important;
}

/* Stacked under the photo on phones there is no competition for space, so give
   the fields their breathing room back. */
@media (max-width: 781px) {
  .adl-heroform .ff-el-group {
    margin-bottom: 1rem;
  }
  .adl-heroform input[type="text"],
  .adl-heroform input[type="email"],
  .adl-heroform input[type="tel"],
  .adl-heroform select,
  .adl-heroform textarea {
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
  }
}

.adl-hero-cover .wp-block-columns {
  width: 100%;
}

/* Hero framing, matched to the old site rather than guessed. The Hibu/Duda hero
   measured 1905x703 with background-size:cover, so 703/1905 = 0.369 of the width
   is the share of the 1920x1438 photo that was ever visible. A shorter box shows
   a narrower band of the same photo, which reads as "zoomed in" even though the
   scale is identical. 36.6vw reproduces 703px at a 1920 window (100vw counts the
   scrollbar the element does not get) and holds the same framing at every width.
   !important because the cover block writes min-height inline.
   Below 900px the old site stacked and reflowed anyway, so the 560px floor stays. */
@media (min-width: 900px) {
  .adl-hero-cover {
    min-height: 36.6vw !important;
  }
}

/* The cover block goes edge to edge, so its contents need the page gutter back. */
.adl-hero-cover > .wp-block-cover__inner-container {
  padding-left: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--40);
}

/* Hero content lines up with the breadcrumb column underneath it.
   Measured at 1440, the same page had three different left edges: the breadcrumb
   bar caps at 1200px and starts at 113px, the cover hero ran nearly edge to edge
   and started its H1 at 32px, and the default page template constrained its H1 to
   the 760px reading width and started it at 340px.
   Scoped to the service and city templates deliberately. The FRONT PAGE uses this
   same .adl-hero-cover class and its framing was measured against the old Duda
   site on purpose, so it must not move; it carries neither of these body classes.
   .adl-hero never appears on the front page at all. */
.page-template-page-service .adl-hero-cover > .wp-block-cover__inner-container,
.page-template-page-city .adl-hero-cover > .wp-block-cover__inner-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.adl-hero > * {
  max-width: 1200px;
}

/* Service cards: the source site crops every card image to the same shape, so
   headings and buttons line up across the row. Ours inherit real photo ratios
   and would stagger without this. */
.adl-servicecards figure {
  margin-bottom: 1.25rem;
}
.adl-servicecards figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
}
.adl-servicecards .wp-block-column {
  display: flex;
  flex-direction: column;
}
/* Push the button to the bottom so cards with shorter copy still align. */
.adl-servicecards .wp-block-buttons {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Full-width band behind the veteran line. */
/* This band was a flag photograph on the outgoing site, approximated here as a
   gradient. Now that the flag is drawn in the band itself the approximation is
   redundant, and a mid-tone background gave the drawn flag nothing to sit
   against. Navy, so the flag and the white type both hold. */
.adl-band {
  background: linear-gradient(100deg, var(--wp--preset--color--navy-deep) 0%, var(--wp--preset--color--navy) 60%, #0b3a7a 100%);
}
/* theme.json colors headings explicitly, which beats the group's white text
   setting and left the kicker near-black on navy. */
.adl-band .adl-veteran-kicker,
.adl-band .adl-veteran-lead,
.adl-band .adl-veteran-sub {
  color: #fff;
}

/* ---------------------------------------------------------------- reviews */

.adl-stars-row {
  color: #FFC834;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 0.85rem;
}
.adl-stars-lg {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

.adl-summary-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.adl-summary-score {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--navy);
}
.adl-summary-count {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--muted);
}

/* Masonry-style columns so cards of very different lengths still sit tight.
   Reviews run from six words to a full paragraph, and an equal-height grid
   leaves large gaps under the short ones. */
.adl-review-grid {
  columns: 3 300px;
  column-gap: 1.25rem;
}
.adl-review-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: inline-block;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.adl-review-card p:last-child {
  margin-bottom: 0;
}
/* Attribution sits under a hairline rule so it reads as a signature rather than
   as another sentence of the review. Name and source share a line when the card
   is wide enough and stack when it is not. */
.adl-review-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.adl-review-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--navy);
}
.adl-review-name::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--wp--preset--color--orange);
}
.adl-review-meta {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
  .adl-review-grid {
    columns: 1;
  }
}

/* ------------------------------------------------------------ blog cards */

.adl-postgrid .wp-block-post {
  height: 100%;
}
.adl-postcard {
  height: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.adl-postcard:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.adl-postcard .wp-block-post-featured-image {
  margin: 0;
}
/* The block's aspectRatio setting does not survive every image size, so pin the
   crop here. Without it the cards stagger and the row loses its baseline. */
.adl-postcard .wp-block-post-featured-image,
.adl-postcard .wp-block-post-featured-image a {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.adl-postcard .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* Single posts need the same crop, and for the same reason. templates/single.html
   already sets aspectRatio 16/9 on the featured image block, but that attribute
   does not reach the page: the rendered figure carries only object-fit:cover.
   Six posts use 1920x2560 portrait photos, which rendered 760x1013, taller than
   a phone viewport. Scoped to .single-post because nothing else on that page
   prints a featured image. */
.single-post .wp-block-post-featured-image {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.single-post .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.adl-postcard .wp-block-post-title {
  margin: 0.4rem 0 0.6rem;
}
.adl-postcard .wp-block-post-title a {
  color: var(--wp--preset--color--body);
  text-decoration: none;
}
.adl-postcard .wp-block-post-title a:hover {
  color: var(--wp--preset--color--orange);
}
.adl-postcard .wp-block-post-excerpt__more-text {
  display: none;
}

/* The source site runs the header edge to edge: the rating sits hard left and
   the Request Estimate button hard right, with only a small gutter. A 1200px
   constrained row floats both of them into the middle third of the screen. */
.adl-headwrap > .wp-block-group,
.adl-headwrap > .adl-headtop {
  max-width: none;
}
.adl-headwrap {
  padding-left: clamp(1rem, 3vw, 2.75rem);
  padding-right: clamp(1rem, 3vw, 2.75rem);
}
.adl-headwrap .adl-headtop {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 781px) {
  .adl-headtop .wp-block-column {
    flex-basis: 100% !important;
    text-align: center;
  }
  .adl-headtop .wp-block-buttons {
    justify-content: center;
  }
  .adl-headtop .has-text-align-right {
    text-align: center;
  }
}

/* Skip link visible on focus, since the outgoing site has none at all. */
.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 999;
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--navy);
  color: #fff;
}

/* --------------------------------------------------------- service pages */

.adl-breadcrumbs {
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
}
.adl-breadcrumbs a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.adl-breadcrumbs a:hover {
  color: var(--wp--preset--color--orange);
  text-decoration: underline;
}
.adl-breadcrumbs [aria-current="page"] {
  color: var(--wp--preset--color--orange);
}
.adl-crumb-sep {
  margin: 0 0.6rem;
  opacity: 0.6;
}

/* The sidebar tracks the reader down long service pages. */
@media (min-width: 992px) {
  .adl-servicelayout > .wp-block-column:last-child .adl-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

.adl-side-rating {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.adl-side-score {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.adl-side-reviews .adl-stars-row {
  margin-bottom: 0;
}
.adl-side-reviews .adl-ruled::after {
  width: 4rem;
  margin-top: 0.6rem;
}

/* Service body copy runs long; give it a comfortable measure and rhythm. */
.adl-servicelayout > .wp-block-column:first-child h2 {
  font-size: 1.6rem;
  margin-top: 2.25rem;
}
.adl-servicelayout > .wp-block-column:first-child h3 {
  font-size: 1.3rem;
  margin-top: 2rem;
}
.adl-servicelayout > .wp-block-column:first-child ul {
  padding-left: 1.15rem;
}
.adl-servicelayout > .wp-block-column:first-child li {
  margin-bottom: 0.4rem;
}
.adl-servicelayout img {
  border-radius: 6px;
}

/* Outline button variant used on dark bands. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  border: 2px solid currentColor;
  color: #fff;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #fff;
  color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------ mobile nav */

/* The default hamburger is a ~24px glyph with no label. On a contractor site
   most traffic is phone traffic, so it gets a real tap target and a word.
   Scoped to mobile: an unscoped display:flex here also forces the button to
   show on desktop, next to the full inline menu. */
@media (max-width: 781px) {
.adl-mainnav .wp-block-navigation__responsive-container-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  width: 100%;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.adl-mainnav .wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
}
.adl-mainnav .wp-block-navigation__responsive-container-open::after {
  content: "Menu";
}
}

.adl-mainnav .wp-block-navigation__responsive-container-close {
  padding: 0.75rem;
}
.adl-mainnav .wp-block-navigation__responsive-container-close svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 781px) {
  /* Overlay items: full-width rows, comfortable spacing, clear separators. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0;
    width: 100%;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 1rem 0.25rem;
    font-size: 1.0625rem;
    width: 100%;
  }
  /* Submenus stay closed until the parent is tapped, so the menu opens at
     eight rows rather than twenty-seven. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    width: 100%;
    justify-content: space-between;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-left: 1rem;
    border-left: 2px solid var(--wp--preset--color--orange);
    margin: 0 0 0.5rem;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.7rem 0.25rem;
    font-size: 0.9375rem;
    opacity: 0.92;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }
}

/* WordPress renders every submenu expanded inside the mobile overlay, which
   turned an 8-item menu into 27 rows. The toggle already tracks state in
   aria-expanded, so drive visibility from that instead. */
@media (max-width: 781px) {
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    display: none !important;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child:has(> button[aria-expanded="true"])
    > .wp-block-navigation__submenu-container {
    display: flex !important;
  }
  /* Make the parent row read as expandable. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
    font-weight: 600;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle svg {
    transition: transform 0.18s ease;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 781px) {
  /* Every row in the overlay reads the same, regardless of whether the block
     rendered it as a link or as a submenu button. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open a,
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open button {
    color: #fff !important;
    text-decoration: none;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container a {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  /* Expandable rows need to look expandable. The block's own arrow is hidden
     at this size, so draw one. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle::after {
    content: "";
    margin-left: auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--wp--preset--color--orange);
    border-bottom: 2px solid var(--wp--preset--color--orange);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(-2px);
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
    display: flex;
    align-items: center;
  }
  /* The block ships its own arrow span; ours replaces it. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
    display: none;
  }
}

@media (max-width: 781px) {
  /* The desktop nav is center-justified; inside the overlay that pushes the
     submenu children into the middle of the screen. Left-align everything so
     the accordion reads as a normal indented list. */
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left;
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    padding-left: 1.1rem !important;
    margin-left: 0.25rem;
    border-left: 2px solid var(--wp--preset--color--orange);
  }
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: 0;
  }
}

/* ---------- Interior page hero ---------- */
/* The old site stacks a light page title over a bold company line. */
.adl-hero-sub {
  margin: 0.15rem 0 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- Brand and association logos ---------- */
.adl-brandstrip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.75rem 2rem;
  align-items: center;
  justify-items: center;
}
/* Brand strip in the navy footer. The logos are supplied on white, so they sit
   on a white plate rather than being inverted, which would wreck the ones that
   carry color inside the mark. */
.adl-footer-brands {
  margin: 0 0 1.6rem;
}
.adl-footer-brands-label {
  margin: 0 0 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Ten logos, so the column count has to divide into ten or the last row comes
   out ragged. Five and two both do; three and four do not, which is why this is
   a fixed count rather than auto-fit. auto-fit also sized every plate to its own
   logo, so the strip read as ten different-sized cards instead of one band. */
.adl-footer-brands .adl-brandstrip {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
.adl-footer-brands .adl-brandstrip li {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Identical plates: the track sets the width, the rule sets the height, and
     the logo is centered inside whatever shape it lands in. */
  width: 100%;
  height: 62px;
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border-radius: 6px;
}
/* Explicit pixels, not max-height:100%. The percentage does not resolve against
   the plate here (flex item, percentage cross size) so half the logos spilled
   out of the white box while every measurement said the plates were uniform.
   62px plate minus 8px padding top and bottom is 46. */
.adl-footer-brands .adl-brandstrip img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 46px;
}

@media (max-width: 599px) {
  .adl-footer-brands .adl-brandstrip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.adl-brandlink {
  display: block;
  line-height: 0;
  transition: opacity .18s ease;
}
.adl-brandlink:hover,
.adl-brandlink:focus-visible {
  opacity: 0.72;
}
.adl-brandstrip img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 74px;
  object-fit: contain;
}

/* ---------- FAQ accordion ---------- */
/* details/summary so it opens with no JavaScript and stays readable to a
   crawler with the answer in the DOM either way. */
.adl-faqlist {
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.adl-faq {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.adl-faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}
.adl-faq > summary::-webkit-details-marker { display: none; }
.adl-faq > summary::before {
  content: "+";
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--orange);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.45rem;
  text-align: center;
}
.adl-faq[open] > summary::before { content: "\2013"; }
.adl-faq > summary:hover { color: var(--wp--preset--color--orange); }
/* Group headings inside the list; the border below hands off to the first
   question's own border so the rhythm of the accordion holds. */
.adl-faq-section {
  margin: 2.25rem 0 0.35rem;
  font-size: 1.3rem;
  color: var(--wp--preset--color--navy);
}
.adl-faq-a {
  padding: 0 0.25rem 1.25rem 2.35rem;
}
.adl-faq-a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}

/* ---------- Serving area ---------- */
.adl-counties {
  columns: 2 380px;
  column-gap: 2.5rem;
}
.adl-county {
  break-inside: avoid;
  display: inline-block;
  /* Padding and border are inside the 100% or the card computes wider than the
     column it sits in, which is where /serving-area/ got 31px of sideways
     scroll on phones. There is no global box-sizing rule in this file, so it
     has to be declared per component. */
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 1.15rem 1.35rem;
  background: var(--wp--preset--color--off-white);
  border-left: 4px solid var(--wp--preset--color--orange);
  border-radius: 4px;
}
.adl-county h3 {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}
.adl-county p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: #333;
}

/* ---------- Contact ---------- */
.adl-map iframe {
  display: block;
  width: 100%;
  border: 0;
}
.adl-napcard dt {
  margin-top: 1.15rem;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}
.adl-napcard dt:first-child { margin-top: 0; }
.adl-napcard dd {
  margin: 0.2rem 0 0;
  line-height: 1.7;
}

/* ---------- Team ---------- */
.adl-person {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 1.75rem;
  background: var(--wp--preset--color--off-white);
  border-radius: 10px;
}
.adl-person img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width: 599px) {
  .adl-person { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ---------- Main nav spacing ---------- */
/* The block gap set on the navigation block is a desktop measurement. Inside
   the mobile overlay the same gap would push eight rows off the screen, so the
   overlay goes back to zero and spaces itself with row padding instead. */
@media (min-width: 782px) {
  .adl-mainnav .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
  }
  .adl-mainnav .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}
@media (max-width: 781px) {
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
  .adl-mainnav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    gap: 0 !important;
  }
}

/* ---------- Outline buttons ---------- */
/* theme.json sets the button element color to white for the filled style, and
   core's outline style inherits it, which put a white button with a white
   border on a white page. Outline buttons take the surrounding text color
   instead: white inside the navy bands, navy on the light sections. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: inherit;
  border-color: currentColor;
  background-color: transparent;
}
.has-white-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  color: #fff;
}

/* The 2.5rem block gap is a full-desktop measurement. Between the mobile
   breakpoint and about 1200px the eight top-level items no longer fit on one
   row at that gap and the navy bar grows to two and three rows, so the gap
   scales with the viewport instead. */
@media (min-width: 782px) {
  .adl-mainnav .wp-block-navigation__container {
    gap: clamp(0.85rem, 2.6vw, 2.5rem) !important;
    flex-wrap: nowrap;
  }
}

/* Below about 1000px the gap alone cannot keep eight items on one row, so the
   label size comes down with it rather than letting the bar stack. */
@media (min-width: 782px) and (max-width: 999px) {
  .adl-mainnav .wp-block-navigation__container {
    gap: 0.7rem !important;
  }
  .adl-mainnav .wp-block-navigation-item__content {
    font-size: 0.8125rem;
  }
}

/* ---------- Portfolio gallery ---------- */
/* The core gallery lays out with flex and sizes rows off the tallest image in
   each row. Pete's shots are a mix of landscape and portrait phone photos, so
   that leaves holes. A grid with a fixed tile ratio keeps every row even. */
.adl-gallery.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.adl-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
}
.adl-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}
/* Captions, styled after the Duncan Seawall gallery Josh referenced: a solid
   dark bar in the bottom left of the photo, not core's full width gradient.
   Kept absolutely positioned, which also keeps the caption out of the flex
   column so it cannot affect how the image is sized. */
.adl-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
/* Size the tile from its own width and ratio, never from the parent height.
   height:100% needs a definite parent height, and the moment anything else
   entered this flex column every lazy loaded image silently collapsed to 0px. */
.adl-gallery.wp-block-gallery.has-nested-images figure.wp-block-image > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  flex: 0 0 auto;
}
.adl-gallery.wp-block-gallery.has-nested-images figure.wp-block-image > figcaption {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: auto;
  max-width: calc(100% - 1rem);
  margin: 0;
  padding: 0.45rem 0.7rem;
  background: rgba(0, 0, 0, 0.72);
  background-image: none;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
  border-radius: 0 4px 0 4px;
  min-height: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
@media (max-width: 599px) {
  .adl-gallery.wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Related services ---------- */
.adl-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.6rem 1.25rem;
}
.adl-related a {
  display: block;
  padding: 0.7rem 0.9rem;
  background: var(--wp--preset--color--off-white);
  border-left: 3px solid var(--wp--preset--color--orange);
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.adl-related a:hover {
  background: var(--wp--preset--color--navy);
  color: #fff;
}

/* ---------- Recent posts list on the hub pages ---------- */
.adl-recentposts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem 1.5rem;
}
.adl-recentposts li {
  padding: 0.9rem 1rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 6px;
}
.adl-recentposts a {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.adl-recentposts a:hover { color: var(--wp--preset--color--orange); }
.adl-recentposts time {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* ---------- Child service cards on the hub pages ---------- */
.adl-servicecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.adl-servicecard {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-top: 4px solid var(--wp--preset--color--orange);
  border-radius: 8px;
  background: #fff;
}
.adl-servicecard h3 {
  margin: 0 0 0.55rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.adl-servicecard h3 a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.adl-servicecard h3 a:hover { color: var(--wp--preset--color--orange); }
.adl-servicecard p {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #333;
}
.adl-cardlink {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.6rem 1.15rem;
  background: var(--wp--preset--color--orange);
  border-radius: 10px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.adl-cardlink:hover { background: var(--wp--preset--color--orange-dark); }

/* ---------- Every service, grouped by hub, on the services hub page ---------- */
.adl-allservices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  /* Each group is as tall as its own list. Stretching them to match the tallest
     leaves Seawalls and Retaining Walls with a third of their box empty. */
  align-items: start;
}
.adl-allservices-group {
  /* See the note on .adl-county: same padding-plus-border shape, and grid
     tracks will not shrink below their content without min-width either. */
  box-sizing: border-box;
  min-width: 0;
  padding: 1.15rem 1.35rem;
  background: var(--wp--preset--color--off-white);
  border-left: 4px solid var(--wp--preset--color--orange);
  border-radius: 4px;
}
.adl-allservices-group h3 {
  margin: 0 0 0.65rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.adl-allservices-group h3 a {
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}
.adl-allservices-group h3 a:hover { color: var(--wp--preset--color--orange); }
.adl-allservices-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.adl-allservices-group li {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.adl-allservices-group li:last-child { margin-bottom: 0; }
.adl-allservices-group li a {
  color: #333;
  text-decoration: none;
}
.adl-allservices-group li a:hover {
  color: var(--wp--preset--color--orange);
  text-decoration: underline;
}

/* ---------- US flag ---------- */
/* The flag is drawn, not photographed, so it needs its own edge: at small sizes
   the white stripe at the bottom would otherwise disappear into a light
   background, and the blue union into the navy footer. */
.adl-flag {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.adl-flag-sm {
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.5rem;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.adl-flag-lg {
  border-radius: 3px;
}

/* ---------- Veteran band ---------- */
.adl-veteran {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.adl-veteran-flag {
  flex: 0 0 auto;
}
.adl-veteran-copy {
  min-width: 0;
}
.adl-veteran-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.adl-veteran-lead {
  margin: 0 0 0.75rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
}
.adl-veteran-sub {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.85;
}
@media (max-width: 599px) {
  .adl-veteran {
    flex-direction: column;
    text-align: center;
  }
}

/* Footer: the veteran line gets the small flag on its own row. */
.adl-footer-veteran {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.adl-footer-veteran .adl-flag-sm {
  flex: 0 0 auto;
  margin-right: 0;
  margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------------
   Form fields on the navy panels: hero form (home, city, service pages) and
   the standalone estimate page.

   Both panels are navy and the fields rendered navy-on-navy, so only the
   placeholder text was visible. The cause is NOT Fluent Forms. It is the
   inline global stylesheet WordPress generates from theme.json:

     body .wp-site-blocks input:not([type="submit"]):not([type="button"])...
       { background: var(--wp--preset--color--base); }

   Every :not() adds to that selector's specificity, so it beats a plain
   `.adl-heroform input[type="text"]`, and `--wp--preset--color--base` is not a
   preset this theme defines, so it resolves to transparent. The panel shows
   through and the field disappears.

   Raising specificity alone does not reliably win against a generated selector
   whose shape can change between WordPress versions, so background and border
   are marked important here deliberately. Scoped to the two panel classes, so
   nothing else on the site is affected.
   --------------------------------------------------------------------------- */
.adl-heroform .wp-block-heading,
.adl-formpanel .wp-block-heading {
  color: #fff;
}
.adl-heroform input[type="text"],
.adl-heroform input[type="email"],
.adl-heroform input[type="tel"],
.adl-heroform select,
.adl-heroform textarea,
.adl-formpanel input[type="text"],
.adl-formpanel input[type="email"],
.adl-formpanel input[type="tel"],
.adl-formpanel select,
.adl-formpanel textarea {
  width: 100%;
  background: #fff !important;
  color: #313131 !important;
  border: 1px solid #c8cdd4 !important;
  border-radius: 4px;
  font-family: inherit;
}
.adl-heroform input[type="text"],
.adl-heroform input[type="email"],
.adl-heroform input[type="tel"],
.adl-heroform select,
.adl-heroform textarea {
  padding: 0.55rem 0.8rem;
  font-size: 0.9375rem;
}
.adl-formpanel input[type="text"],
.adl-formpanel input[type="email"],
.adl-formpanel input[type="tel"],
.adl-formpanel select,
.adl-formpanel textarea {
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
}
.adl-heroform ::placeholder,
.adl-formpanel ::placeholder {
  color: #6b7280;
  opacity: 1;
}
.adl-heroform input:focus,
.adl-heroform select:focus,
.adl-heroform textarea:focus,
.adl-formpanel input:focus,
.adl-formpanel select:focus,
.adl-formpanel textarea:focus {
  outline: 2px solid #e8590c;
  outline-offset: 1px;
}
.adl-formpanel .ff-el-group {
  margin-bottom: 1rem;
}
.adl-formpanel .ff-el-group:last-child {
  margin-bottom: 0;
}
.adl-formpanel textarea {
  min-height: 7rem;
}

/* Footer social buttons (2026-08-21). Facebook, Instagram and YouTube only:
   Yelp and BBB stay out until their listings stop publishing dead contact
   details. Same three URLs as the schema sameAs, both fed by
   adl_social_profiles() in functions.php. */
.adl-socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.adl-socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
}
.adl-socials a:hover,
.adl-socials a:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
}