/* ==========================================================================
   Savannah Corporate Photography — design tightening pass
   Scope: CSS-only polish. Same theme (Avada), same layout, same palette
   (--awb-color1..8), same font (Plus Jakarta Sans). No content changes.
   Revert: delete this block from Appearance > Customize > Additional CSS
   (or remove the child theme / its style.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global type scale
   - Smallest text on the site was 13px (eyebrows, testimonial attributions,
     "Event at ..." captions, sub-menu). Lift the floor to 14px.
   - H4 was an odd 28.43px with a 1.4 line-height; round it and tighten.
   - Large headings get slightly tighter tracking and balanced line wraps so
     they stop leaving one-word orphans ("...tips for / your event!").
   -------------------------------------------------------------------------- */
:root {
  --awb-typography5-font-size: 14px;
  --awb-typography5-line-height: 1.5;
  --h4_typography-font-size: 28px;
  --h4_typography-line-height: 1.3;
  --h6_typography-font-size: 16px;
  --h6_typography-line-height: 1.4;
}

.fusion-title-heading,
#main h1, #main h2, #main h3 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}
#main h4, #main h5, #main h6 {
  text-wrap: balance;
}

/* Body copy: keep 17px / 1.7 but cap very long lines for readability. */
#main .fusion-text p {
  max-width: 68ch;
}
#main .fusion-text.fusion-text-centered p,
#main .fusion-text[style*="text-align:center"] p,
#main .fusion-text p[style*="text-align: center"],
#main .fusion-text p[style*="text-align:center"] {
  margin-left: auto;
  margin-right: auto;
}

/* Inline links inside body copy: keep the brand blue but add a quiet
   underline so links read as links (they were indistinguishable in the
   Services intro where the whole paragraph was set in blue). */
#main .fusion-text a:not(.fusion-button):not(.fusion-read-more) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color .2s ease;
}
#main .fusion-text a:not(.fusion-button):not(.fusion-read-more):hover {
  text-decoration-color: currentColor;
}

/* Paragraphs that were set entirely in the link blue (Services intro):
   move the running text back to the body navy so hierarchy is clear;
   links inside them stay blue. */
#main .fusion-text[style*="--awb-text-color:var(--awb-color5)"] {
  --awb-text-color: var(--awb-color6) !important;
}
#main .fusion-text[style*="--awb-text-color:var(--awb-color5)"] a {
  color: var(--awb-color5);
}

/* --------------------------------------------------------------------------
   2. Text sitting on photos / dark hero panels
   Round 2 (after Bud's review): text over the photo collage needs a real
   backdrop, not a glow. Three treatments, all in brand navy (--awb-color8):
   a) Hero/photo sections that carry white body copy get a navy scrim:
      solid-to-transparent left-to-right on desktop (text column is on the
      left, photos keep showing on the right), top-to-bottom full-width on
      phones. The scrim sits between the photo and the content
      (Avada's decorative mask is z-index 6, so scrim = 5, content = 7).
   b) Linked image cards with white titles ("High-Quality Event
      Photography", "Professional Headshots DURING Your Event!") get a
      bottom-up gradient behind the text.
   c) Links inside white copy are white + underlined (cream on hover)
      instead of brand blue, which was invisible on photos.
   Measured with the text hidden and the backdrop sampled under each text
   box (see REPORT.md): body copy >= 4.5:1, H1 >= 3:1, at the 95th
   percentile of pixels, not just the average.
   -------------------------------------------------------------------------- */
#main .fusion-fullwidth.has-mask-background:has(.fusion-text[style*="--awb-text-color:var(--awb-color1)"]) {
  position: relative;
}
#main .fusion-fullwidth.has-mask-background:has(.fusion-text[style*="--awb-text-color:var(--awb-color1)"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(4, 9, 34, .90) 0%,
    rgba(4, 9, 34, .86) 40%,
    rgba(4, 9, 34, .68) 60%,
    rgba(4, 9, 34, .30) 80%,
    rgba(4, 9, 34, .10) 100%);
}
#main .fusion-fullwidth.has-mask-background:has(.fusion-text[style*="--awb-text-color:var(--awb-color1)"]) > .fusion-builder-row {
  position: relative;
  z-index: 7;
}
@media (max-width: 1024px) {
  #main .fusion-fullwidth.has-mask-background:has(.fusion-text[style*="--awb-text-color:var(--awb-color1)"])::before {
    background: linear-gradient(180deg,
      rgba(4, 9, 34, .60) 0%,
      rgba(4, 9, 34, .84) 16%,
      rgba(4, 9, 34, .84) 84%,
      rgba(4, 9, 34, .45) 100%);
  }
}

/* Image cards with white text on a photo (linked columns) */
#main .fusion-column-inner-bg-wrapper:has(.fusion-title[style*="--awb-text-color:var(--awb-color1)"]) .fusion-column-inner-bg {
  position: absolute;
}
#main .fusion-column-inner-bg-wrapper:has(.fusion-title[style*="--awb-text-color:var(--awb-color1)"]) .fusion-column-inner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 9, 34, .10) 0%,
    rgba(4, 9, 34, .40) 30%,
    rgba(4, 9, 34, .84) 58%,
    rgba(4, 9, 34, .94) 100%);
}

@media (max-width: 640px) {
  /* card text stacks taller on phones, so the gradient has to start higher */
  #main .fusion-column-inner-bg-wrapper:has(.fusion-title[style*="--awb-text-color:var(--awb-color1)"]) .fusion-column-inner-bg::after {
    background: linear-gradient(180deg,
      rgba(4, 9, 34, .20) 0%,
      rgba(4, 9, 34, .60) 25%,
      rgba(4, 9, 34, .90) 50%,
      rgba(4, 9, 34, .95) 100%);
  }
}

/* With a real backdrop the heavy stamped shadow is no longer needed. */
.fusion-title-heading[style*="text-shadow"] {
  text-shadow: 0 1px 2px rgba(4, 9, 34, .35) !important;
}
#main .fusion-text[style*="--awb-text-color:var(--awb-color1)"],
#main .fusion-text[style*="--awb-text-color:#ffffff"],
#main .fusion-text[style*="--awb-text-color:#fff;"] {
  text-shadow: none;
}
#main .fusion-text[style*="--awb-text-color:var(--awb-color1)"] a:not(.fusion-button),
#main .fusion-text[style*="--awb-text-color:#ffffff"] a:not(.fusion-button) {
  color: var(--awb-color1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .6);
  text-underline-offset: 0.18em;
}
#main .fusion-text[style*="--awb-text-color:var(--awb-color1)"] a:not(.fusion-button):hover,
#main .fusion-text[style*="--awb-text-color:#ffffff"] a:not(.fusion-button):hover {
  color: var(--awb-color2);
  text-decoration-color: var(--awb-color2);
}
/* Hero copy: keep a readable measure so lines stay short over the scrim */
#main .fusion-fullwidth.has-mask-background .fusion-text[style*="--awb-text-color:var(--awb-color1)"] p {
  max-width: 52ch;
}
/* Eyebrow line above the hero H1 ("Savannah Corporate Photography") */
#main .fusion-text[style*="--awb-font-size:var(--awb-typography5-font-size)"][style*="--awb-text-color:var(--awb-color1)"] p {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .92;
}
#main .fusion-text[style*="--awb-font-size:var(--awb-typography5-font-size)"][style*="--awb-text-color:var(--awb-color1)"] p i {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   3. Header / navigation
   - At common laptop widths the 6-item menu wrapped onto two lines
     ("Contact" dropped below). Tighten the gap and type size so it stays
     on one line, and keep the logo from crowding the menu column.
   -------------------------------------------------------------------------- */
.fusion-tb-header .awb-menu.awb-menu_row {
  --awb-gap: 30px !important;
  --awb-font-size: 15px !important;
  --awb-letter-spacing: 0.01em !important;
}
.fusion-tb-header .awb-menu.awb-menu_row .awb-menu__main-ul {
  flex-wrap: nowrap;
}
.fusion-tb-header .awb-menu__main-a {
  white-space: nowrap;
}
.fusion-tb-header .awb-menu__main-li {
  padding-bottom: 0;
}
/* Sub-menu items were 13px */
.fusion-tb-header .awb-menu {
  --awb-submenu-font-size: 14px !important;
  --awb-submenu-line-height: 1.5 !important;
}
.fusion-tb-header .awb-menu__sub-a {
  padding-top: 11px;
  padding-bottom: 11px;
}
/* Logo: slightly smaller so it reads as a mark, not a banner */
.fusion-tb-header .fusion-standard-logo,
.fusion-tb-header .fusion-imageframe img {
  max-width: 280px;
}
@media (max-width: 1024px) {
  .fusion-tb-header .fusion-standard-logo,
  .fusion-tb-header .fusion-imageframe img {
    max-width: 230px;
  }
}
@media (max-width: 640px) {
  .fusion-tb-header .fusion-standard-logo,
  .fusion-tb-header .fusion-imageframe img {
    max-width: 200px;
  }
}
/* Header CTA: align its type with the nav */
.fusion-tb-header .fusion-button {
  font-size: 14px;
  letter-spacing: 0.01em;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Mobile menu panel: comfortable tap targets, consistent type */
.awb-menu__m-toggle {
  border-radius: 6px;
}
.awb-menu_mobile .awb-menu__main-a,
.awb-menu__main-ul_mobile .awb-menu__main-a,
.awb-menu .awb-menu__main-ul .awb-menu__main-a_mobile {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   4. Buttons — consistent rhythm
   -------------------------------------------------------------------------- */
.fusion-button {
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.fusion-button .fusion-button-text {
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   5. Content details
   -------------------------------------------------------------------------- */
/* Checklists: a touch more air between items, icon aligned to first line */
#main .fusion-checklist li {
  padding-top: 14px;
  padding-bottom: 2px;
}
#main .fusion-checklist .icon-wrapper {
  margin-top: 0.1em;
}

/* Testimonials: attribution reads as a caption, quote gets breathing room */
#main .fusion-text[style*="--awb-font-size:var(--awb-typography5-font-size)"]:not([style*="--awb-text-color:var(--awb-color1)"]) p {
  color: color-mix(in srgb, var(--awb-color8) 72%, transparent);
  line-height: 1.5;
}

/* Separators: keep them, but make them whisper */
#main .fusion-separator .fusion-separator-border {
  border-color: color-mix(in srgb, var(--awb-color3) 70%, transparent) !important;
}

/* Icon-button "read more" links (Event Coverage / Learn More / Gallery samples):
   consistent size */
#main .fusion-button.button-link,
#main .fusion-button[style*="--button_padding"] {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.fusion-tb-footer .awb-menu_column .awb-menu__main-a {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 15px;
  font-weight: 500;
}
.fusion-tb-footer .awb-menu_column .awb-menu__main-li {
  padding-bottom: 0;
}
.fusion-tb-footer .fusion-text p {
  font-size: 15px;
  line-height: 1.6;
}
.fusion-tb-footer .fusion-button {
  min-width: 160px;
  justify-content: center;
}
.fusion-tb-footer .fusion-standard-logo,
.fusion-tb-footer .fusion-imageframe img {
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   7. Responsive type
   Avada's responsive-typography sensitivity is 0 on this site, so headings
   kept their desktop size on phones (42px H2s, 40px hero H1 wrapping to
   8 lines). Scale them down on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fusion-title-size-one h1.fusion-title-heading { font-size: 48px !important; line-height: 1.1 !important; }
  .fusion-title-size-two h2.fusion-title-heading:not(:has(.fusion-image-element)) { font-size: 36px !important; line-height: 1.2 !important; }
  .fusion-title-size-three h3.fusion-title-heading { font-size: 32px !important; line-height: 1.2 !important; }
}
@media (max-width: 640px) {
  :root {
    --h4_typography-font-size: 22px;
  }
  .fusion-title-size-one h1.fusion-title-heading { font-size: 36px !important; line-height: 1.12 !important; }
  /* long marketing hero H1 (has an inline text-shadow) gets one step smaller so it takes fewer lines */
  .fusion-title-size-one h1.fusion-title-heading[style*="text-shadow"] { font-size: 30px !important; line-height: 1.12 !important; letter-spacing: -0.015em; }
  .fusion-title-size-two h2.fusion-title-heading:not(:has(.fusion-image-element)) { font-size: 30px !important; line-height: 1.18 !important; }
  .fusion-title-size-three h3.fusion-title-heading { font-size: 26px !important; line-height: 1.22 !important; }
  .fusion-title-size-four h4.fusion-title-heading { font-size: 22px !important; line-height: 1.3 !important; }
  .fusion-title-size-five h5.fusion-title-heading { font-size: 19px !important; line-height: 1.35 !important; }

  #main .fusion-text:not([style*="--awb-font-size:var(--awb-typography5-font-size)"]) p,
  #main .fusion-checklist li {
    font-size: 16px;
    line-height: 1.65;
  }

  /* Hero: keep the paragraph from running edge to edge on phones */
  #main .fusion-text[style*="--awb-text-color:var(--awb-color1)"] p {
    max-width: 34ch;
  }

  /* Content boxes / cards: titles were as large as page headings */
  #main .fusion-content-boxes .heading h2 {
    font-size: 20px !important;
  }

  /* Footer stack: tighter on phones */
  .fusion-tb-footer .awb-menu_column .awb-menu__main-a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* --------------------------------------------------------------------------
   8. Focus visibility (accessibility, invisible until keyboard use)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.fusion-button:focus-visible {
  outline: 2px solid var(--awb-color4);
  outline-offset: 3px;
}