/* =====================================================================
   SFLG redesign — hand-authored overrides.
   Loaded via wp_enqueue_style('custom') AFTER the inlined style.css, so
   rules here win on equal specificity. Keep this file plain CSS (it is not
   compiled from scss/). Group additions by feature.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Homepage FAQ accordion (section#faqs)
   The SP Easy Accordion plugin's own CSS/JS is not loading, so the section
   renders unstyled (and empty when the shortcode returns nothing — a static
   fallback is output by template-faq-home.php). These rules provide the card
   styling + open/closed states; the toggle behaviour is a small vanilla
   script in template-home.php. Design per 01_Home mockup (page 2):
   light-gray band, purple heading, white rounded cards, orange questions,
   black circular +/- toggle on the right.
   --------------------------------------------------------------------- */

/* Section band + heading (body prefix to out-specify + out-order style.css) */
body section#faqs {
  background: #f6f6f6;
}
/* Centered content container: cap the FAQ column width on wide screens */
#faqs .faqs-inner {
  max-width: 1590px;
  margin-left: auto;
  margin-right: auto;
}
#faqs h2.faqs-title {
  color: #5b59ad; /* purple, per mockup (was orange) */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400; /* regular */
  font-size: 44px;
  letter-spacing: -0.01em;
}
#faqs p.faqs-subtitle {
  color: #272526;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
}

/* Force single-column stack (override the plugin's multi-column layout) */
#faqs .faq-accordion .sp-easy-accordion,
#faqs .faq-accordion .eap-multi-items-container {
  display: block;
  width: 100%;
  float: none;
  padding: 0;
}

/* Cards */
#faqs .faq-accordion .ea-card {
  background: #fff !important;
  border: 1px solid #ececf2;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(39, 37, 38, 0.05);
  margin: 0 0 16px;
  overflow: hidden;
}
#faqs .faq-accordion .ea-header {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Question row (also raise specificity to beat style.css's #sp-ea-8970 rule) */
#faqs #sp-ea-8970 .ea-header a,
#faqs .faq-accordion .ea-header a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  color: #c96a2d !important; /* orange question, per mockup */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.35;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
#faqs .faq-accordion .ea-header a:hover {
  color: #a9551f;
}

/* Circular +/- toggle (drawn with pseudo-elements; no icon font needed) */
#faqs .faq-accordion .ea-expand-icon {
  order: 2;
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #111;
  font-size: 0;
}
#faqs .faq-accordion .ea-expand-icon::before,
#faqs .faq-accordion .ea-expand-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
  margin-left: 0;
}
#faqs .faq-accordion .ea-expand-icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
#faqs .faq-accordion .ea-expand-icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
/* Open state => minus (hide the vertical bar) */
#faqs .faq-accordion .ea-card.faq-open .ea-expand-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Collapsible body (auto-height via grid-rows animation) */
/* Collapsible FAQ body */
#faqs .faq-accordion .sp-collapse {
  display: block !important;
  max-height: 0;
  overflow: hidden !important;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    visibility 0s linear 0.35s;
}

/* Open state */
#faqs .faq-accordion .ea-card.faq-open .sp-collapse {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    visibility 0s linear 0s;
}

/* Prevent inner content from creating collapsed height */
#faqs .faq-accordion .ea-body {
  display: block;
  height: auto;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#faqs .faq-accordion .ea-content-wrapper {
  padding: 22px 28px;
  color: #272526;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 20px;
  line-height: 1.6;
}
#faqs .faq-accordion .ea-content-wrapper p {
  margin: 0 0 12px;
}
#faqs .faq-accordion .ea-content-wrapper p:last-child {
  margin-bottom: 0;
}
#faqs .faq-accordion .ea-content-wrapper a {
  color: #5b59ad;
  text-decoration: underline;
}

@media (max-width: 767px) {
  #faqs h2.faqs-title {
    font-size: 32px;
  }
  #faqs .faq-accordion .ea-header a {
    padding: 18px 20px;
    font-size: 17px;
  }
  #faqs .faq-accordion .ea-content-wrapper {
    padding: 0 20px 18px;
  }
}

/* ---------------------------------------------------------------------
   Homepage "Helpful Videos" (#section-video) — redesign restyle.
   Overrides the inlined style.css rules (higher specificity + loaded after).
   --------------------------------------------------------------------- */
body #section-video h2 {
  color: #5b59ad; /* purple heading per mockup */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400; /* regular per mockup */
}
#section-video a.section-video-button {
  display: inline-block;
  margin-top: 3rem;
  padding: 20px 42px; /* match the other "View All" pills */
  background: #c96a2d; /* orange pill per mockup */
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 20px;
  border: 0;
  border-radius: 28px;
  text-decoration: none;
  transition: background 0.2s ease;
}
#section-video a.section-video-button:hover {
  background: #a9551f;
  color: #fff;
}

/* ---------------------------------------------------------------------
   Footer "Statewide Representation" — 5 offices with circular city photos
   (redesign). Rendered by template-contact_info.php; overrides the old
   4-column footer layout in style.css.
   --------------------------------------------------------------------- */
#footer-contact #contact-inner {
  display: block;
  max-width: 1400px; /* matches .footer-offices so the office cards get full room */
  margin: 0 auto;
}
/* "Statewide Representation" heading (orange logomark + firm name + serif title).
   Sizes target the largest desktop (~1440px design width); vw scales them down. */
.footer-statewide {
  text-align: center;
  padding-top: 10px;
}
.footer-statewide-icon {
  display: block;
  width: clamp(58px, 6.9vw, 99px);
  height: auto;
  margin: 0 auto 22px;
}
.footer-statewide-firm {
  display: block;
  color: #272526; /* black */
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400; /* regular */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(14px, 1.67vw, 24px); /* 24px @ ~1440 */
}
.footer-statewide-title {
  margin: 12px 0 35px;
  color: #5b59ad;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 400; /* regular */
  line-height: 1.1;
  font-size: clamp(40px, 6.25vw, 90px); /* 90px @ ~1440 */
}
.footer-offices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px 44px; /* +10% spacing between offices */
  max-width: 1400px; /* wider so the office cards get more room */
  margin: 0 auto;
  padding: 26px 20px 44px;
}
.footer-office-card {
  width: clamp(150px, 15.56vw, 224px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-office-photo {
  display: block;
  /* 220px at the largest desktop, scaling down proportionately */
  width: clamp(132px, 15.28vw, 220px);
  height: clamp(132px, 15.28vw, 220px);
  margin-bottom: 26px; /* 14px + 12px extra breathing room under the photo */
  border-radius: 50%;
  overflow: hidden;
}
.footer-office-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.footer-office-city {
  margin-bottom: 8px;
  color: #c96a2d;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.footer-office-addr {
  margin-bottom: 8px;
  color: #272526;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
}
.footer-office-phone {
  color: #5b59ad;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  text-decoration: none;
}
.footer-office-phone:hover {
  text-decoration: underline;
}
.footer-office-appt {
  color: #5b59ad;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
/* Tablet: 5-up on one row, cards flex to fill the full available width */
@media (min-width: 768px) and (max-width: 1169.98px) {
  .footer-offices {
    gap: 30px 12px;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .footer-office-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .footer-office-photo {
    width: clamp(96px, 12vw, 150px);
    height: clamp(96px, 12vw, 150px);
  }
}
/* Mobile: drop the outer padding and put exactly two offices per row */
@media (max-width: 767.98px) {
  .footer-offices {
    gap: 24px 12px;
    max-width: 100%;
    padding: 26px 0 44px;
  }
  .footer-office-card {
    width: calc(50% - 6px);
  }
  .footer-office-photo {
    width: clamp(120px, 40vw, 168px);
    height: clamp(120px, 40vw, 168px);
  }
}
/* Contact / Pay row is its own full-width light-grey band (#footer-contact-band,
   a direct child of <footer>, so it spans the whole page). */
#footer-contact-band {
  background: #f6f6f6;
  padding: 48px 30px;
}
.footer-contact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 90px;
  max-width: 1280px;
  margin: 0 auto;
}
body .footer-contact-row .contact-col {
  flex: 0 0 auto;
  width: auto;
  max-width: 360px;
  margin-bottom: 0;
  text-align: center;
}
/* LawPay / credit-card artwork (Theme Options pay_image) */
#lawpay {
  width: 200px;
  height: auto;
}

/* ---------------------------------------------------------------------
   Footer consultation form band (#consultation) — redesign.
   Per mockup: lighter band purple, bridge glyph above the title (title on
   top, dark eyebrow below), no dots, no wave (wave <img> removed in footer.php).
   --------------------------------------------------------------------- */
body #consultation {
  background: #7e87b2; /* band purple, not the darker #5b59ad */
}
#consultation-inner #footer-form-bridge {
  display: block;
  width: 71px;
  height: auto; /* icon-logomark-dark-purple.svg (#5c5aa6) rendered in its own colour */
  margin: 0 auto 8px;
}
#consultation-inner #footer-form-subtitle {
  margin-top: 6px;
  color: #272526; /* dark, not orange, per mockup */
}

/* Footer form — refinements (feedback):
   +60px above the icon, +40px below the title, square inputs, sans-serif
   description, and a clean orange pill button (no white ring, not uppercase). */
body #consultation {
  padding-top: 60px;
}
#consultation-inner #footer-form-title {
  margin-bottom: 40px;
}
body #consultation-inner #footer-form-description,
body #consultation-inner #footer-form-description p {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
body #consultation-inner .gform_wrapper.gravity-theme .gfield input,
body #consultation-inner .gform_wrapper.gravity-theme .gfield textarea {
  border-radius: 0;
}
/* drop the white semi-transparent ring around the submit button + keep it centered */
body #consultation-inner .gform_wrapper.gravity-theme .gform_footer,
body #consultation-inner .gform_wrapper.gravity-theme .gform_footer:hover {
  background: transparent;
  padding: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
body #consultation-inner .gform_wrapper.gravity-theme .gform_footer input[type=submit] {
  width: 170px;
  height: 56px;
  text-transform: none; /* "Submit", not "SUBMIT" */
}

/* Custom placeholder overlay (built by js/gf-placeholders.js): dark label text
   with an orange required-asterisk, faded out on focus / when the field has a
   value, and faded back in on blur if the field is still empty. */
#consultation-inner .ginput_container.gf-ph-host {
  position: relative;
}
#consultation-inner .gf-fake-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* vertical-centre for single-line inputs */
  pointer-events: none; /* clicks fall through to the field */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.25s ease;
  /* the +10px left shift and desktop +2px type live in js/gf-placeholders.js,
     which mirrors the field styles as inline styles on this overlay */
}
#consultation-inner .gf-fake-ph--textarea {
  align-items: flex-start; /* textarea text is top-aligned */
  white-space: normal;
  transform: translateY(5px); /* nudge onto the textarea's first type line */
}
#consultation-inner .gf-fake-ph.is-hidden {
  opacity: 0;
}
#consultation-inner .gf-fake-ph-text {
  color: #7b7571;
}
#consultation-inner .gf-fake-ph-req {
  color: #c96a2d; /* orange asterisk for required fields */
  margin-left: 3px;
}

.about-intro-columns {
  display: flex;
  align-items: flex-start;
  gap: 4%;
}

.about-intro-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Tablet */

@media (max-width: 1024px) {
  .about-intro-columns {
    gap: 2.5%;
  }
}

/* Mobile */

@media (max-width: 767px) {

  .about-intro-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .about-intro-column {
    width: 100%;
  }
}

#about-video {
	margin-top: 0px !important;
}