/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

html {
  scrollbar-gutter: stable !important;
}

/* ── Responsive fixes ──────────────────────────────────── */

/* Homepage service icon cards are now rendered by the [imd_service_cards] shortcode
   with its own responsive grid — no column-specific overrides needed. */

/* Safety net: prevent horizontal scroll on all viewports.
   Avada sets overflow-y:scroll on body, creating a second scrollbar gutter (15px lost).
   Reset body to visible so only the viewport scrollbar exists. */
html {
  overflow-x: clip;
}
body.fusion-body {
  overflow: visible !important;
}

/* Scale section headings for small screens */
@media (max-width: 36rem) {
  .imd-ne-section-header__h2 {
    font-size: 2.25rem;
  }
}

/* Footer logo: 20% smaller, top-aligned with nav columns */
.fusion-footer-widget-area .fusion-builder-column-49 img {
  width: 110px !important;
  height: auto !important;
}
.fusion-footer-widget-area .fusion-builder-column-49 .fusion-column-wrapper {
  justify-content: flex-start !important;
  padding-top: 0 !important;
}
.fusion-footer-widget-area .fusion-builder-column-49 .fusion-text p {
  margin: 0;
  line-height: 0;
}

/* WCAG 2.5.8: 44px minimum touch targets on mobile */
@media (max-width: 48rem) {
  .imd-ne-card__link,
  .imd-service-cards__link,
  .imd-explore-grid__cta,
  .imd-contact-row__link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Responsive audit fixes ──────────────────────────── */

/* reCAPTCHA badge: reposition so it doesn't cause horizontal overflow */
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}

/* Footer social icons: 44px touch targets on mobile */
@media (max-width: 48rem) {
  .fusion-social-links .fusion-social-network-icon {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* News/event card category labels: legible on small screens */
@media (max-width: 36rem) {
  .imd-ne-card__cat {
    font-size: 0.75rem;
  }
}

/* Site-wide: tighten container side padding on mobile (64px inline → 20px) */
@media (max-width: 48rem) {
  .fusion-fullwidth {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Contact form: remove inter-column padding when columns stack on mobile */
@media (max-width: 48rem) {
  .fusion-builder-column-33 {
    --awb-padding-right: 0 !important;
  }
  .fusion-builder-column-34 {
    --awb-padding-left: 0 !important;
  }
  .fusion-form-radio-field fieldset {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem;
    max-width: 100% !important;
  }
  .fusion-form-radio-field fieldset label {
    white-space: normal !important;
  }
}

/* FullCalendar list view: prevent overflow on mobile */
@media (max-width: 48rem) {
  .hycal-container .fc-list-table,
  .hycal-container .fc .fc-list {
    font-size: 0.85rem;
  }
  .hycal-container .fc-list-table {
    table-layout: fixed;
    width: 100% !important;
  }
  .hycal-container .fc-list-event td {
    word-break: break-word;
  }
}

/* ── Responsive audit: header utility bar ────────────── */

/* Hide utility bar when the hamburger menu is active — those links are
   reachable from the main nav, so showing them wastes vertical space. */
@media (max-width: 64rem) {
  .imd-utility-bar {
    display: none !important;
  }
}

/* ── Responsive audit: scrollbar gutter ──────────────── */

/* Disable scrollbar-gutter on mobile to reclaim ~15px width */
@media (max-width: 48rem) {
  html {
    scrollbar-gutter: auto !important;
  }
}

/* Hide scrollbar track at narrow viewports for a clean mobile-like look */
@media (max-width: 48rem) {
  html {
    scrollbar-width: none;          /* Firefox */
  }
  html::-webkit-scrollbar {
    display: none;                   /* Chrome, Safari, Edge */
  }
}

/* ── Service quick-links cards (global Avada Content Boxes) ─────────────────
   These cards (Report Graffiti / Public Safety / Community Grants / Parks) are
   a NATIVE Avada "Content Boxes" element, saved once in the Avada Library as a
   GLOBAL element ("Service quick-links cards") and reused on the Home and
   Live Here pages. To change the cards' text, links, or icons, edit that one
   global element in the Avada Builder Library — both pages update automatically.
   No hardcoding: all content lives in the Builder. This CSS only handles visual
   polish and is scoped to .imd-svc-cards so it never affects other Content
   Boxes elsewhere on the site. */

/* Uniform icon size — lock every icon into the same 56x56 box (the source SVGs
   are line-art with differing aspect ratios). object-fit:contain keeps them
   undistorted and centered. Also strip any rounded corners / drop shadow. */
.imd-svc-cards .content-box-wrapper .image img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Equal-height cards so every "Report now ›" CTA lines up on the same row at
   desktop, even when descriptions wrap to different heights. Avada's content
   box grid is float-based by default, so we switch the row + columns to flex. */
.imd-svc-cards.fusion-content-boxes { display: flex; flex-wrap: wrap; }
/* Vertical spacing between WRAPPED rows (2-up tablet, 1-up mobile). row-gap
   applies only between rows — never after the last one — so it adds breathing
   room when cards stack without reintroducing extra section bottom padding.
   (Using row-gap, not the `gap` shorthand, so column widths stay at 50%/100%.) */
.imd-svc-cards.fusion-content-boxes { row-gap: 3rem; }
.imd-svc-cards .content-box-column { display: flex; float: none; }
.imd-svc-cards .content-box-column .content-box-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
/* Explicit responsive column counts (4 → 2 → 1), matching the original cards,
   so stacking is guaranteed independent of Avada's internal column CSS. */
@media (max-width: 60rem) {
  .imd-svc-cards .content-box-column { width: 50% !important; }
}
@media (max-width: 36rem) {
  .imd-svc-cards .content-box-column { width: 100% !important; }
}

/* Pin the CTA to the bottom of each card, center it, and keep the text + arrow
   together (bold maroon to match the site's link style). margin-top:auto pins it
   to the bottom of the flex card; align-self centers it; the ::after override
   pulls Avada's arrow inline next to the text instead of out at the far edge. */
.imd-svc-cards .content-box-wrapper a.fusion-read-more {
  margin-top: auto;
  align-self: center;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.375rem;
  font: 600 0.9375rem/1 'Open Sans', sans-serif !important;  /* matches .imd-ne-card__link */
  color: var(--awb-color5, #6E0515) !important;
}
.imd-svc-cards .content-box-wrapper a.fusion-read-more::after {
  position: static !important;
  margin: 0 !important;
  /* Avada centers this arrow with translateY(-50%) for its absolute layout; once
     we make it inline (static) that transform yanks it upward, so cancel it and
     let the flex `align-items:center` on the link do the vertical centering. */
  transform: none !important;
  top: auto !important;
  line-height: 1 !important;
  color: var(--awb-color5, #6E0515) !important;
}

/* No hover affordance on plain (non-linked) program cards. Some .imd-svc-cards
   carry a read-more link (Meetings, Live Here) and SHOULD react on hover; others
   are pure content with no link (Public Safety > Public Safety Programs) and must
   read as static, not clickable. Scope by :not(:has(a)) so only the link-less
   cards are frozen — Avada leaves transition:all on the wrapper/icon, so we kill
   it and any state change. (Avada's own hover rules already need a link-area to
   fire, so this is belt-and-suspenders that also survives future cache rebuilds.) */
.imd-svc-cards .content-box-column:not(:has(a)) .content-box-wrapper,
.imd-svc-cards .content-box-column:not(:has(a)) .content-box-wrapper .image img {
  transition: none !important;
  cursor: auto !important;
}
.imd-svc-cards .content-box-column:not(:has(a)) .content-box-wrapper:hover,
.imd-svc-cards .content-box-column:not(:has(a)) .content-box-wrapper:hover .image img,
.imd-svc-cards .content-box-column:not(:has(a)) .content-box-wrapper:hover .content-box-heading {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--awb-color6) !important;
}

/* Single row of cards: remove Avada's default 20px bottom margin on the column
   that holds these cards, so the section's bottom padding matches its top
   padding (Avada adds that margin to every column for stacked-row spacing). */
.imd-svc-cards .content-box-column { margin-bottom: 0 !important; }
.imd-svc-cards.fusion-content-boxes { margin-bottom: 0 !important; }
.fusion-layout-column:has(> .fusion-column-wrapper > .imd-svc-cards) {
  margin-bottom: 0 !important;
}

/* Keep the section's top/bottom padding symmetric on tablet & mobile. Avada drives
   container padding via responsive CSS variables, but no per-breakpoint (small)
   value is set here, so its fallback shrinks the bottom padding at narrow widths.
   Force both equal at <=1024px. (Value mirrors the 40px desktop section padding —
   if that desktop padding ever changes in the Builder, update this to match.) */
@media (max-width: 1024px) {
  .fusion-fullwidth:has(.imd-svc-cards) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ── Useful-links resource cards (native Avada Content Boxes) ───────────────
   The Useful Links page's 9 external-resource cards, converted from a hardcoded
   shortcode to a native Content Boxes element so each card (icon, title, text,
   link) is editable in the Builder. Icons are line-art SVG files in /uploads
   (ul-*.svg) — swap the image in the Builder to change an icon. Scoped to
   .imd-link-cards; mirrors the .imd-svc-cards polish with this page's specifics
   (3-up grid, 32px icons). */
.imd-link-cards .content-box-wrapper .image img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Equal-height cards + vertical spacing between wrapped rows (3rem). */
.imd-link-cards.fusion-content-boxes { display: flex; flex-wrap: wrap; row-gap: 3rem; margin-bottom: 0 !important; }
.imd-link-cards .content-box-column { display: flex; float: none; margin-bottom: 0 !important; }
.imd-link-cards .content-box-column .content-box-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.fusion-layout-column:has(> .fusion-column-wrapper > .imd-link-cards) { margin-bottom: 0 !important; }
/* Body text at a readable measure, centered (matches the original cards). */
.imd-link-cards .content-container { max-width: 22rem; margin-left: auto; margin-right: auto; }
/* CTA: pinned to bottom, centered, arrow inline, maroon. */
.imd-link-cards .content-box-wrapper a.fusion-read-more {
  margin-top: auto;
  align-self: center;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.375rem;
  font: 600 0.9375rem/1 'Open Sans', sans-serif !important;  /* matches .imd-ne-card__link */
  color: var(--awb-color5, #6E0515) !important;
}
.imd-link-cards .content-box-wrapper a.fusion-read-more::after {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  line-height: 1 !important;
  color: var(--awb-color5, #6E0515) !important;
}
/* Responsive 3 → 2 → 1 (matches the original grid's breakpoints). */
@media (max-width: 64rem) { .imd-link-cards .content-box-column { width: 50% !important; } }
@media (max-width: 36rem) { .imd-link-cards .content-box-column { width: 100% !important; } }
/* Symmetric top/bottom section padding on tablet & mobile (same Avada var quirk
   as the service cards — see note above). Mirrors this section's 6rem desktop. */
@media (max-width: 1024px) {
  .fusion-fullwidth:has(.imd-link-cards) { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}

/* ── Contact-page "Location" list (native Avada Content Boxes) ──────────────
   Converted from the imd_location_cards shortcode: a single-column, left-aligned
   list of contact methods (Email / Phone / Office), each editable in the Builder.
   Icons are maroon line-art files in /uploads (loc-*.svg). Scoped to .imd-loc-cards. */
.imd-loc-cards .content-box-wrapper .image img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.imd-loc-cards.fusion-content-boxes { display: block; }
.imd-loc-cards .content-box-column {
  float: none;
  width: 100% !important;
  margin: 0 0 1.5rem !important;
  text-align: left;
}
.imd-loc-cards .content-box-column:last-child { margin-bottom: 0 !important; }
/* Left-align everything (Content Boxes default to centered). The wrapper carries
   text-align:center, which also centers the inline CTA link — reset it here. */
.imd-loc-cards .content-box-wrapper,
.imd-loc-cards .heading.heading-with-icon,
.imd-loc-cards .content-container { text-align: left !important; }
.imd-loc-cards .heading.heading-with-icon .image { margin-left: 0 !important; margin-right: auto !important; }
.imd-loc-cards .content-container { opacity: 0.85; }
/* CTA link: left-aligned (not full-width centered), arrow inline, maroon. */
.imd-loc-cards .content-box-wrapper a.fusion-read-more {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  text-align: left;
  font-weight: 600;
  color: var(--awb-color5, #6E0515) !important;
}
.imd-loc-cards .content-box-wrapper a.fusion-read-more::after {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  line-height: 1 !important;
  color: var(--awb-color5, #6E0515) !important;
}

/* ── FAQ accordion (native Avada Accordion, styled as white chevron cards) ──
   Built on Avada's native Accordion element so the client can add / remove /
   reorder / edit questions and answers in the Avada Builder with NO code.
   This CSS only restyles it to the white rounded-card + chevron look. Scoped to
   .imd-faq-accordion (set as the element's CSS class in the Builder). */
.imd-faq-accordion { max-width: 54rem; margin: 0 auto; }
.imd-faq-accordion .fusion-panel {
  background: #FFFFFF;
  border: 1px solid var(--awb-color3, #DACDB2) !important;
  border-radius: 0.75rem !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.imd-faq-accordion .fusion-panel:last-child { margin-bottom: 0; }
.imd-faq-accordion .panel-heading,
.imd-faq-accordion .panel-title { margin: 0; }
.imd-faq-accordion .panel-title a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
}
.imd-faq-accordion .panel-title a .fusion-toggle-heading { flex: 1 1 auto; margin: 0 !important; padding: 0 !important; }
/* Force exact 1rem internal padding (Avada's own padding is more specific). */
.imd-faq-accordion .fusion-panel .panel-heading,
.imd-faq-accordion .fusion-panel .panel-title { padding: 0 !important; margin: 0 !important; }
.imd-faq-accordion .fusion-panel .panel-title a { padding: 1rem 1.5rem !important; }
.imd-faq-accordion .fusion-panel .panel-collapse { padding: 0 !important; }
/* serif question text (Avada's own selector is more specific, so force it) */
.imd-faq-accordion .panel-title a,
.imd-faq-accordion .panel-title a .fusion-toggle-heading,
.imd-faq-accordion .panel-title a span {
  font-family: 'Nanum Myeongjo', serif !important;
  font-weight: 700 !important;
  font-size: 1.375rem !important;
  line-height: 1.35 !important;
  color: var(--awb-color6, #0D0903) !important;
  transition: color 0.15s ease;
}
/* Hover: question text takes the CTA/maroon color (keep the same font/size so only
   the color changes — Avada's own :hover otherwise alters it). */
.imd-faq-accordion .panel-title a:hover,
.imd-faq-accordion .panel-title a:hover .fusion-toggle-heading,
.imd-faq-accordion .panel-title a:hover span {
  color: var(--awb-color5, #6E0515) !important;
  font-family: 'Nanum Myeongjo', serif !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
/* hide Avada's default +/- icon; use a rotating chevron on the right instead */
.imd-faq-accordion .fusion-toggle-icon-wrapper { display: none !important; }
.imd-faq-accordion .panel-title a::after {
  content: '';
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--awb-color5, #6E0515);
  border-bottom: 2px solid var(--awb-color5, #6E0515);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.imd-faq-accordion .panel-title a[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.imd-faq-accordion .panel-body,
.imd-faq-accordion .panel-body p {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.4rem !important;
  color: var(--awb-color6, #0D0903) !important;
}
.imd-faq-accordion .panel-body {
  padding: 0 1.5rem 1rem !important;
  border: 0 !important;
}
/* Constrain answer text width for shorter, more readable lines on desktop.
   (Avada renders the answer as direct text in .panel-body — no <p> wrapper.) */
.imd-faq-accordion .panel-body { max-width: 90%; }

/* ============================================================
   Explore IMD (page 38893) — sections built to the Figma
   "42 Explore IMD" layout. All content is native Avada
   containers/columns/Image/Title/Text (edit in the Builder);
   this block only polishes layout that Avada can't express via
   attributes: the responsive card grid, image aspect/rounding/
   shadow, and the split-section list bullets. Brand tokens:
   --awb-color1 cream, color2 tan, color4/5 maroon, color6 ink.
   NOTE: card + CTA images are placehold.co placeholders — swap
   them for real photography in the Builder (Image elements).
   ============================================================ */

/* Shared image treatment: rounded corners + soft shadow, cover-fit */
.imd-explore-cards .fusion-imageframe,
.imd-explore-split .fusion-imageframe,
.imd-explore-cta   .fusion-imageframe { display: block; width: 100%; margin: 0 !important; }
.imd-explore-cards .fusion-imageframe img,
.imd-explore-split .fusion-imageframe img,
.imd-explore-cta   .fusion-imageframe img {
  width: 100%; display: block; object-fit: cover;
  border-radius: 1.5rem; box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.imd-explore-cards .fusion-imageframe img { aspect-ratio: 16 / 9; }
.imd-explore-split .fusion-imageframe img { aspect-ratio: 600 / 640; }
.imd-explore-cta   .fusion-imageframe img { aspect-ratio: 1280 / 738; }

/* "Four reasons to visit" — responsive card grid (4 → 2 → 1).
   The cards live in their own container (one row), so we can grid
   the row directly and override Avada's column floats/widths. */
.imd-explore-cards .fusion-builder-row {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 3rem; align-items: start;
}
.imd-explore-cards .imd-ex-card {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  margin: 0 !important; float: none !important; justify-self: stretch;
}
.imd-explore-cards .imd-ex-card .fusion-column-wrapper { padding: 0 !important; width: 100% !important; }
.imd-explore-cards .imd-ex-card { text-align: center; }
.imd-explore-cards .imd-ex-card .fusion-title { margin: 1.5rem 0 0.5rem !important; }
.imd-explore-cards .imd-ex-card .fusion-title h1,
.imd-explore-cards .imd-ex-card .fusion-title h2,
.imd-explore-cards .imd-ex-card .fusion-title h3,
.imd-explore-cards .imd-ex-card .fusion-title h4 {
  font-family: 'Nanum Myeongjo', serif !important; font-weight: 400 !important;
  font-size: 1.75rem !important; line-height: 1.2 !important;
  letter-spacing: -0.01em !important; color: var(--awb-color6, #0D0903) !important;
}
.imd-explore-cards .imd-ex-card p {
  font-size: 1rem; line-height: 1.5; color: var(--awb-color6, #0D0903); margin: 0;
}
@media (max-width: 64rem) {
  .imd-explore-cards .fusion-builder-row { grid-template-columns: repeat(2, 1fr) !important; gap: 2.5rem; }
}
@media (max-width: 36rem) {
  .imd-explore-cards .fusion-builder-row { grid-template-columns: 1fr !important; }
}

/* "Little Saigon & the Walk of Honor" — split image/text bullets */
.imd-explore-split .imd-ex-list { list-style: none; padding: 0; margin: 0; }
.imd-explore-split .imd-ex-list li {
  position: relative; padding: 0.4rem 0 0.4rem 1.75rem;
  font: 400 1rem/1.5 'Open Sans', sans-serif; color: var(--awb-color6, #0D0903);
}
.imd-explore-split .imd-ex-list li::before {
  content: ''; position: absolute; left: 0; top: 0.8rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--awb-color4, #A1071F);
}
@media (max-width: 64rem) {
  .imd-explore-split .fusion-builder-column { padding-right: 0 !important; }
}
.imd-faq-accordion .panel-collapse { border: 0 !important; }