/* ==========================================================================
   Elementor native-widget overrides
   Makes native Heading / Image / Icon / Icon-Box / Icon-List / Button /
   Star-Rating / Accordion / Form widgets render visually identical to the
   original custom markup, using the CSS classes assigned to each widget's
   "CSS Classes" (Advanced) field. Loads AFTER assets/style.css.
   ========================================================================== */

/* ---- Container layout overrides ----------------------------------------
   Elementor 4.x renders Sections/Columns as flex "Containers" (.e-con) and
   prints a per-element stylesheet (post-<id>.css) AFTER this file that sets
   display:flex via CSS custom properties on `.elementor-element-<id>` —
   which has the same specificity as our single-class selectors and loads
   later, so it wins the cascade. Force the original CSS-grid layouts back
   with !important, mirroring the same breakpoints as assets/style.css.
   ---------------------------------------------------------------------- */
.hero,
.trust-band-grid,
.services-grid,
.about-grid,
.why-grid,
.process-grid,
.areas-grid,
.reviews-grid,
.faq-grid,
.contact-grid,
.footer-grid {
  display: grid !important;
}
.hero { grid-template-columns: 1.03fr .97fr !important; align-items: center !important; gap: 75px !important; }
.trust-band-grid { grid-template-columns: repeat(4,1fr) !important; padding: 25px 0 !important; gap: 0 !important; }
.services-grid { grid-template-columns: repeat(4,1fr) !important; gap: 17px !important; }
.about-grid { grid-template-columns: .95fr 1.05fr !important; gap: 90px !important; align-items: center !important; }
.why-grid { grid-template-columns: repeat(3,1fr) !important; }
.process-grid { grid-template-columns: repeat(3,1fr) !important; gap: 60px !important; max-width: 920px !important; margin: auto !important; }
.areas-grid { grid-template-columns: .8fr 1.2fr !important; gap: 90px !important; align-items: center !important; }
.reviews-grid { grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; align-items: center !important; }
.faq-grid { grid-template-columns: .7fr 1.3fr !important; gap: 80px !important; }
.contact-grid { grid-template-columns: .8fr 1.2fr !important; gap: 80px !important; align-items: center !important; }
.footer-grid { grid-template-columns: 1.5fr repeat(3,1fr) !important; gap: 60px !important; padding-bottom: 50px !important; }

.hero-actions { display: flex !important; gap: 12px !important; }
.trust-row { display: flex !important; gap: 18px !important; margin-top: 30px !important; }

@media (max-width: 1050px) {
  .hero { gap: 40px !important; }
  .services-grid { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 780px) {
  .hero,
  .about-grid,
  .areas-grid,
  .faq-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .hero { gap: 46px !important; }
  .hero-actions { flex-direction: column !important; }
  .trust-band-grid { grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 12px 0 !important; }
  .services-grid,
  .why-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
  }
  .about-grid { gap: 45px !important; }
  .process-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .areas-grid,
  .faq-grid,
  .contact-grid {
    gap: 40px !important;
  }
  .trust-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .location-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 35px !important; }
}

/* ---- Generic icon sizing (Icon widget renders an <img> for SVG icons) -- */
.elementor-icon img,
.elementor-icon-list-icon img,
.elementor-icon-box-icon img { width: 20px; height: 20px; }
.elementor-icon { background: transparent !important; padding: 0 !important; }

/* ---- Trust row (hero) ---------------------------------------------------- */
.trust-row .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 18px; }
.trust-row .elementor-icon-list-item { font-size: .72rem; font-weight: 600; color: #475569; gap: 6px; }
.trust-row .elementor-icon-list-icon img { width: 15px; height: 15px; }

/* ---- Check list (about section, 2-col grid) ------------------------------ */
.check-list .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 23px 0; padding: 0; }
.check-list .elementor-icon-list-item { font-size: .77rem; font-weight: 600; color: #475569; gap: 8px; }
.check-list .elementor-icon-list-icon img { width: 17px; height: 17px; }

/* ---- Location grid (areas page, 3-col pills) ------------------------------ */
.location-grid .elementor-icon-list-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.location-grid .elementor-icon-list-item { border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.035); padding: 16px 14px; border-radius: 9px; font-size: .74rem; gap: 8px; color: #cbd5e1; }
.location-grid .elementor-icon-list-icon img { width: 15px; height: 15px; }

/* ---- Why-card / Process-card / Service-card (Icon Box) -------------------- */
.why-card .elementor-icon-box-icon,
.service-icon .elementor-icon-box-icon,
.process-card .elementor-icon-box-icon { margin-bottom: 0; }
.why-card .elementor-icon-box-icon img { width: 23px; height: 23px; }
.why-card .elementor-icon-box-title { color: #fff; font-size: 1rem; font-family: Manrope, sans-serif; margin: 32px 0 0; }
.why-card .elementor-icon-box-description { color: #94a3b8; font-size: .75rem; margin-top: 7px; }

.service-card .elementor-icon-box-wrapper { display: block; }
.service-card .elementor-icon-box-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 10px; background: #f6f1e7; margin-bottom: 20px; }
.service-card .elementor-icon-box-icon img { width: 20px; height: 20px; }
.service-card .elementor-icon-box-title { font-size: 1.12rem; line-height: 1.3; font-family: Manrope, sans-serif; color: var(--navy); margin: 0; }
.service-card .elementor-icon-box-description { color: var(--muted); font-size: .8rem; margin: 9px 0 16px; min-height: 63px; }

.process-card .elementor-icon-box-wrapper { display: block; }
.process-card .elementor-icon-box-icon { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: white; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(15,23,42,.07); position: relative; z-index: 2; }
.process-card .elementor-icon-box-icon img { width: 24px; height: 24px; }
.process-card .elementor-icon-box-title { font-size: 1.12rem; font-family: Manrope, sans-serif; color: var(--navy); margin: 0; }
.process-card .elementor-icon-box-description { font-size: .77rem; color: var(--muted); margin-top: 6px; }

/* ---- Contact methods (icon box, horizontal, boxed icon) ------------------- */
.contact-methods .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 12px; text-align: left; }
.contact-methods .elementor-icon-box-icon { width: 38px; height: 38px; padding: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; }
.contact-methods .elementor-icon-box-icon img { width: 18px; height: 18px; }
.contact-methods .elementor-icon-box-title { color: #94a3b8; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-family: Inter, sans-serif; font-weight: 400; margin: 0; }
.contact-methods .elementor-icon-box-description { color: #fff; font-size: .75rem; font-weight: 700; margin: 0; }
.contact-methods .elementor-icon-box-content { display: flex; flex-direction: column; gap: 2px; }

/* ---- FAQ call card (icon box, horizontal, circular icon) ------------------- */
.faq-call .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 11px; text-align: left; }
.faq-call .elementor-icon-box-icon { width: 37px; height: 37px; padding: 9px; background: var(--navy); border-radius: 50%; }
.faq-call .elementor-icon-box-icon img { width: 19px; height: 19px; }
.faq-call .elementor-icon-box-title { color: var(--muted); font-size: .63rem; font-family: Inter, sans-serif; font-weight: 400; margin: 0; }
.faq-call .elementor-icon-box-description { color: var(--navy); font-size: .8rem; font-weight: 700; margin: 0; }
.faq-call .elementor-icon-box-content { display: flex; flex-direction: column; gap: 2px; }

/* ---- Rating / certified floating cards ------------------------------------- */
.certified-card .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 10px; text-align: left; }
.certified-card .elementor-icon-box-icon { width: 34px; height: 34px; border-radius: 50%; background: #f5efe3; display: grid; place-items: center; }
.certified-card .elementor-icon-box-icon img { width: 17px; height: 17px; }
.certified-card .elementor-icon-box-title { font-size: .75rem; margin: 0; }
.certified-card .elementor-icon-box-description { font-size: .62rem; color: var(--muted); margin: 0; }

/* ---- Star rating ------------------------------------------------------------ */
.stars .elementor-star-rating__stars { color: #c49b49; letter-spacing: .12em; gap: 0; }
.stars .elementor-star-rating__stars i { font-size: .85rem; color: #c49b49; }
.rating-card .elementor-star-rating__stars { font-size: .72rem; }

/* ---- Reviewer avatar (Heading widget used as initials circle) -------------- */
.reviewer-avatar .elementor-heading-title { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold2); font-size: .65rem; font-weight: 700; margin: 0; }

/* ---- Accordion (FAQ) --------------------------------------------------------- */
.accordion.elementor-accordion { border-top: 1px solid var(--line); border-radius: 0; }
.accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--line); }
.accordion .elementor-tab-title { padding: 20px 0; font: 700 .87rem Manrope, sans-serif; color: var(--navy); border: 0; background: transparent; }
.accordion .elementor-tab-title .elementor-accordion-icon { color: #a98540; }
.accordion .elementor-tab-content { font-size: .77rem; color: var(--muted); padding: 0 35px 20px 0; border: 0; }

/* ---- Booking form (Elementor Form widget) ------------------------------------ */
.booking-form .elementor-form-fields-wrapper { gap: 0; }
.booking-form .elementor-field-group { padding: 0 7px; margin-bottom: 14px; }
.booking-form .elementor-field-group label { font-size: .67rem; font-weight: 700; color: #475569; margin-bottom: 6px; display: block; }
.booking-form .elementor-field,
.booking-form select,
.booking-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--light); padding: 11px 12px; color: var(--navy); font-size: .75rem; }
.booking-form .elementor-field:focus,
.booking-form select:focus,
.booking-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,107,.13); outline: none; }
.booking-form .elementor-field-textual { box-shadow: none; }
.booking-form .e-form__buttons,
.booking-form .elementor-field-type-submit { padding: 0 7px; }
.booking-form button[type="submit"],
.booking-form .elementor-button { width: 100%; background: var(--gold); color: var(--navy); border: 0; border-radius: 8px; padding: 13px 20px; font-size: .84rem; font-weight: 700; box-shadow: 0 12px 25px rgba(200,169,107,.2); }
.booking-form button[type="submit"]:hover,
.booking-form .elementor-button:hover { background: var(--gold2); transform: translateY(-2px); }

/* ---- Buttons (Button widget puts css_classes on the .elementor-widget wrapper,
   so re-apply the original .button/.button-gold/.button-outline/.nav-cta/.text-button
   rules to the rendered .elementor-button / .elementor-button-link). --------------- */
.button .elementor-button,
.button-gold .elementor-button,
.button-outline .elementor-button,
.nav-cta .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 8px; padding: 13px 20px; font-size: .84rem; font-weight: 700;
  text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; width: auto;
}
.button-gold .elementor-button, .nav-cta .elementor-button {
  background: var(--gold); color: var(--navy); box-shadow: 0 12px 25px rgba(200,169,107,.2);
}
.button-gold .elementor-button:hover, .nav-cta .elementor-button:hover {
  background: var(--gold2); box-shadow: 0 15px 30px rgba(200,169,107,.28); transform: translateY(-2px);
}
.button-outline .elementor-button {
  border: 1px solid #cbd5e1; background: var(--white); color: var(--navy); box-shadow: none;
}
.button-outline .elementor-button:hover { transform: translateY(-2px); }
.nav-cta .elementor-button { padding: 11px 16px; }
.button .elementor-button-icon img,
.button-gold .elementor-button-icon img,
.button-outline .elementor-button-icon img,
.nav-cta .elementor-button-icon img,
.mobile-cta-call .elementor-button-icon img,
.mobile-cta-book .elementor-button-icon img { width: 16px; height: 16px; }

/* ---- Text buttons ("Book service", "Meet your notary", "Check Availability →") --- */
.text-button .elementor-button {
  display: inline-flex; align-items: center; gap: 6px; color: #9a7836; font-size: .72rem;
  font-weight: 700; background: transparent; border: 0; padding: 0; box-shadow: none;
}
.text-button .elementor-button-icon img { width: 14px; height: 14px; transition: .2s; }
.service-card:hover .text-button .elementor-button-icon img,
.text-button .elementor-button:hover .elementor-button-icon img { transform: translateX(4px); }

/* ---- Mobile sticky CTA buttons --------------------------------------------------- */
.mobile-cta .mobile-cta-call .elementor-button {
  background: transparent; border: 1px solid var(--line); color: var(--navy);
  height: 42px; border-radius: 7px; font-size: .72rem; font-weight: 700; box-shadow: none;
}
.mobile-cta .mobile-cta-book .elementor-button {
  background: var(--gold); border: 1px solid var(--gold); color: var(--navy);
  height: 42px; border-radius: 7px; font-size: .72rem; font-weight: 700; box-shadow: none;
}

/* ---- Hero actions row (two buttons) ---------------------------------------------- */
.hero-actions .elementor-widget-wrap { display: flex; gap: 12px; }

/* ---- Footer / mobile CTA ----------------------------------------------------- */
.site-footer { background: #0a1120; color: #94a3b8; padding: 70px 0 20px; }
.footer-grid > .elementor-container { gap: 60px; padding-bottom: 50px; }
.mobile-cta .elementor-widget-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-cta .elementor-widget { width: 100%; }

/* ---- Hero photo frame / floating cards -------------------------------------------- */
.photo-frame .elementor-widget-image,
.photo-frame .elementor-widget-container,
.photo-frame .elementor-image { height: 100%; }
.rating-card .elementor-heading-title { font-size: .73rem; font-weight: 700; margin: 3px 0; font-family: Inter, sans-serif; color: var(--navy); }
.rating-card .elementor-star-rating { line-height: 1; }

/* ---- About: experience badge -------------------------------------------------- */
.experience-badge .elementor-heading-title { color: var(--gold2); font: 800 2rem Manrope, sans-serif; margin: 0; }
.about-photo .elementor-widget-image,
.about-photo .elementor-widget-container,
.about-photo .elementor-image { height: 100%; }

/* ---- Reviewer row (avatar + name/role) ----------------------------------------- */
.reviewer .elementor-widget-wrap { display: flex; align-items: center; gap: 10px; }

/* ---- Contact methods column (3 icon-box rows, gap 14px) ------------------------ */
.contact-methods .elementor-widget-wrap { display: grid; gap: 14px; }

/* ---- Headings / text editor inherit existing typography from style.css ----- */
.hero-copy .elementor-heading-title,
.about-copy .elementor-heading-title,
.contact-copy .elementor-heading-title,
.areas-copy .elementor-heading-title,
.section-heading .elementor-heading-title { margin: 0; }
.eyebrow .elementor-icon-list-items,
.eyebrow .elementor-icon-list-item { display: inline-flex; align-items: center; gap: 9px; }