/**
 * Template #1 — Global Header & Footer styling.
 *
 * Loaded site-wide (unlike homepage.css). Uses the existing design tokens
 * from template-tokens.css. Targets Astra's own stable, documented header/
 * footer classes (site-branding, main-header-menu, ast-mobile-menu-trigger,
 * site-footer, footer-widget areas) rather than replacing header.php/footer.php.
 *
 * Astra's own (separate, unconfigured) global color palette is the source of
 * the default blue seen on the nav/hamburger — see homepage.css for the full
 * explanation. The same scoped-override approach is used here.
 */

/* ---------------------------------------------------------------------
 * Demo CTA reset -- placed FIRST, before any contextual CTA rule below.
 *
 * ROOT CAUSE OF THE ORIGINAL BUG: a reset placed later in this file used
 * "button.prss-cta-control" (specificity 0,1,1), which beat every
 * single-class contextual rule (e.g. ".prss-header-actions__book", 0,1,0)
 * regardless of source order, so its own "background: none"/"border: none"
 * silently won over every context's intended background/border -- causing
 * the reported invisible mobile CTA, plain-text-looking footer buttons,
 * and pale floating button. Two things are fixed here: (1) this rule now
 * has EQUAL specificity (0,1,0) to every contextual class, so, being
 * declared FIRST, later contextual rules correctly win the cascade for any
 * property both touch; and (2) "background" is deliberately NOT reset here
 * -- every context below supplies its own full background, so nothing
 * needs blanking first. "border"/"padding" ARE reset here because Astra's
 * own base stylesheet applies a default border + grey background + padding
 * to every bare <button> element, and neutralizing them only needs to
 * happen once, safely, before the contextual rules paint their real values
 * on top.
 * ------------------------------------------------------------------- */

.prss-cta-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  text-align: inherit;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Header — desktop
 * ------------------------------------------------------------------- */

/* Sticky header (Prompt #10C). Astra Free ships no sticky-primary-menu
   option, so this is a plain CSS position:sticky on the existing #masthead
   element -- no second/duplicate header is introduced. z-index is kept
   below WP's admin bar (99999) and any Elementor overlay, but above normal
   page content. The `top` offset accounts for the admin bar when a user is
   logged in, using WordPress's own `admin-bar` body class rather than a
   hard-coded value that would affect logged-out visitors. */
#masthead {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 500;
}

body.admin-bar #masthead {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #masthead {
    top: 46px;
  }
}

#masthead .ast-primary-header-bar {
  min-height: 78px;
}

/* Wordmark (site title) */
#masthead .site-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

#masthead .site-title a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

#masthead .site-title a:hover,
#masthead .site-title a:focus-visible {
  color: var(--color-accent) !important;
}

/* Primary navigation */
#masthead .main-header-menu .menu-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 0.95rem;
  color: var(--color-text) !important;
  text-decoration: none !important;
  padding-block: 0.5em;
}

#masthead .main-header-menu .menu-link:hover,
#masthead .main-header-menu .menu-link:focus-visible {
  color: var(--color-accent) !important;
}

#masthead .main-header-menu .current-menu-item > .menu-link {
  color: var(--color-accent) !important;
  border-bottom: 1px solid var(--color-accent);
}

#masthead .main-header-menu .menu-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Header — mobile toggle
 * ------------------------------------------------------------------- */

#masthead .ast-mobile-menu-trigger-minimal,
#masthead .mobile-menu-toggle-icon,
#masthead .ast-mobile-svg {
  color: var(--color-primary) !important;
  /* Refinement (2026-08-23): Astra's own compiled CSS paints this icon via
     "fill", not "currentColor", so "color" alone never reached the SVG --
     the icon kept rendering in Astra's default unconfigured blue. Setting
     "fill" here too, on the same already-#masthead-scoped selector, is the
     smallest fix: no new selector, no change to markup or menu behaviour. */
  fill: var(--color-primary) !important;
}

#masthead .ast-mobile-menu-trigger-minimal:hover,
#masthead .ast-mobile-menu-trigger-minimal:focus-visible {
  color: var(--color-accent) !important;
}

#masthead .ast-mobile-menu-trigger-minimal:hover .ast-mobile-svg,
#masthead .ast-mobile-menu-trigger-minimal:focus-visible .ast-mobile-svg {
  fill: var(--color-accent) !important;
}

/* Mobile/off-canvas menu panel */
.ast-mobile-popup-drawer,
.ast-mobile-popup-content {
  background: var(--color-surface) !important;
}

.ast-mobile-popup-drawer .main-header-menu .menu-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 1.05rem;
  color: var(--color-text) !important;
  text-decoration: none !important;
  padding-block: 0.9em;
  border-bottom: 1px solid var(--color-border);
}

.ast-mobile-popup-drawer .menu-toggle-close {
  color: var(--color-primary) !important;
}

@media (max-width: 544px) {
  #masthead .ast-primary-header-bar {
    min-height: 64px;
  }

  #masthead .site-title {
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------------------
 * Footer -- unified dark surface (Prompt #10D)
 *
 * The upper widget row and the copyright row now share one dark background
 * family, separated only by a subtle divider, rather than reading as two
 * unrelated sections (the previous light-upper/dark-lower treatment from
 * Prompts #10B/#10C).
 * ------------------------------------------------------------------- */

#colophon {
  background: var(--color-primary);
  color: var(--color-surface);
}

/* Astra's own inline Customizer CSS sets `.site-primary-footer-wrap
   [data-section="section-primary-footer-builder"]` to a light default
   background (#f9f9f9), which otherwise paints over #colophon's own
   background for the entire upper widget row. This explicit, scoped
   override (attribute selector, matching Astra's own specificity) makes
   the intended dark background actually win, without touching any other
   Astra-generated section. */
#colophon .site-primary-footer-wrap[data-section] {
  background-color: var(--color-primary) !important;
}

#colophon .ast-builder-footer-grid-columns {
  max-width: 1260px;
  margin-inline: auto;
  /* Bottom padding tightened (Prompt #10E) -- the gap between the last nav
     item and the divider was excessive on mobile. */
  padding: clamp(44px, 5.5vw, 68px) clamp(20px, 5vw, 56px) clamp(20px, 3vw, 32px);
  gap: clamp(32px, 5vw, 64px);
}

.prss-footer-wordmark {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  font-size: 1.5rem;
  color: var(--color-surface);
  margin: 0 0 0.6em 0;
}

.prss-footer-statement {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-stone);
  max-width: 42ch;
  margin: 0;
}

.prss-footer-heading {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
  margin: 0 0 1em 0;
}

.prss-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.prss-footer-links a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-surface) !important;
  text-decoration: none !important;
}

.prss-footer-links a:hover,
.prss-footer-links a:focus-visible {
  color: var(--color-accent-soft) !important;
}

.prss-footer-links a:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

/* Divider between the main footer content and the copyright row -- subtle,
   warm-toned (not bright white) against the shared dark background. */
#colophon .site-below-footer-wrap {
  background: var(--color-primary);
  border-top: 1px solid rgba(247, 243, 237, 0.14);
  min-height: 0;
  padding-block: 0;
}

#colophon .ast-footer-copyright {
  max-width: 1260px;
  margin-inline: auto;
  /* Compact final row (Prompt #10E): ~18-28px vertical padding, no
     min-height, not vertically centered inside a tall container. */
  padding: 22px clamp(20px, 5vw, 56px);
}

#colophon .ast-footer-copyright p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-stone);
  margin: 0;
}

#colophon .ast-footer-copyright a {
  color: var(--color-stone) !important;
}

@media (max-width: 767px) {
  #colophon .ast-builder-footer-grid-columns {
    padding-block: clamp(32px, 7vw, 44px) 20px;
  }

  #colophon .ast-footer-copyright {
    padding: 18px clamp(20px, 5vw, 56px);
  }
}

/* ---------------------------------------------------------------------
 * Prompt #14A -- Header contact/booking actions (dynamic, Business
 * Profile-driven via [prss_header_actions]). Independently suppressing:
 * each action renders only when its underlying field is configured, so
 * with the current empty demo data this entire block outputs nothing.
 * Kept refined and uncluttered -- one clear primary action, a lighter
 * secondary, and a text-level tertiary -- never three equal-weight
 * buttons side by side.
 * ------------------------------------------------------------------- */

.prss-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-inline-start: 1.25em;
}

.prss-header-actions__action {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  text-decoration: none !important;
  white-space: nowrap;
}

.prss-header-actions__action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Primary: Book Appointment -- the one solid, higher-emphasis action. */
.prss-header-actions__book {
  font-size: 0.88rem;
  color: var(--color-surface) !important;
  background: var(--color-accent);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  line-height: 1.2;
}

.prss-header-actions__book:hover,
.prss-header-actions__book:focus-visible {
  background: var(--color-primary);
}

/* Secondary: WhatsApp -- light/white button (reads clearly on both the
   cream header and the white mobile drawer) with the recognizable
   WhatsApp-green icon, border and text, so it's unmistakably a real button
   yet visually distinct from the solid-brown Book Appointment action.
   Icon + text sit side by side via inline-flex regardless of context. */
.prss-header-actions__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  color: var(--color-whatsapp) !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-whatsapp);
  padding: 0.5em 1.05em;
  border-radius: 999px;
  line-height: 1.2;
}

/* FIX: Astra's own base stylesheet defines "button:focus,button:hover{
   color:#fff}" and "button:active,button:focus{border-color:...}" -- bare
   element+pseudo-class selectors (specificity 0,1,1). The rule below only
   listed :hover/:focus-visible, so plain :focus and :active (which is what
   most mobile taps actually trigger -- :focus-visible is typically
   suppressed for pointer/touch input by browser heuristics) were left
   uncontested: Astra's color:#fff applied with no matching background
   change from this component, leaving white text/icon on the still-light
   background -- an invisible button. Fix: explicitly cover :focus and
   :active too, so this component's own (higher-specificity, 0,2,0) rule
   wins for every interactive state, not just hover/focus-visible. */
.prss-header-actions__whatsapp:hover,
.prss-header-actions__whatsapp:focus,
.prss-header-actions__whatsapp:focus-visible,
.prss-header-actions__whatsapp:active {
  /* ROOT CAUSE OF THE REPORTED INVISIBLE HOVER: "color" carried
     !important but "background" did not. Any rule that repainted the
     background light (Astra's own button hover treatment) therefore won on
     background while our white text stayed locked in -- white-on-white.
     Both are now !important so the pair can never desync. */
  background: var(--color-whatsapp) !important;
  color: #ffffff !important;
  border-color: var(--color-whatsapp) !important;
}

.prss-header-actions__whatsapp .prss-cta-control__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Tertiary: Call -- lightweight, text-only, no button chrome. */
.prss-header-actions__phone {
  font-size: 0.85rem;
  color: var(--color-muted) !important;
}

.prss-header-actions__phone:hover,
.prss-header-actions__phone:focus-visible {
  color: var(--color-accent) !important;
}

@media (max-width: 920px) {
  /* Collapsed top bar stays clean -- this component is only ever placed
     in the desktop primary row and inside the opened mobile drawer, so no
     rule is needed here to hide it from the collapsed mobile bar itself. */
  .prss-header-actions {
    margin-inline-start: 0;
  }
}

/* Inside the opened mobile/off-canvas menu panel: full-width stacked
   actions below Home/Services, matching the existing drawer list rhythm
   (same divider + padding language as .ast-mobile-popup-drawer menu links). */
/* Side-by-side row: Book Now | WhatsApp, balanced equal-width columns, same
   height, comfortable tap size -- not stacked. flex-wrap is a safety net
   only (e.g. if Phone is ever also configured, a 3rd item wraps cleanly
   rather than overflowing); with the current 2-control demo set this always
   renders as one clean row even at 360px. */
.ast-mobile-popup-drawer .prss-header-actions,
.ast-mobile-header-content .prss-header-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6em;
  margin: 0.75em 0 0 0;
  padding: 0.9em clamp(20px, 5vw, 32px) 1.1em;
  border-top: 1px solid var(--color-border);
}

.ast-mobile-popup-drawer .prss-header-actions__action,
.ast-mobile-header-content .prss-header-actions__action {
  flex: 1 1 0;
  text-align: center;
  padding-block: 0.85em;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Phone (when configured) is a lightweight text-only tertiary action
   elsewhere; inside the balanced 2-column mobile row it still gets the
   same sizing as Book/WhatsApp so it doesn't look broken if a 3rd item
   ever appears, but keeps its own muted color from the base rule above. */

/* ---------------------------------------------------------------------
 * Prompt #14A -- Footer "Visit & Contact" / "Booking & Connect" columns
 * (dynamic, Business Profile-driven via [prss_footer_contact] and
 * [prss_footer_connect]). Reuses the existing .prss-footer-heading /
 * .prss-footer-links visual language already established for Brand/Explore.
 * ------------------------------------------------------------------- */

.prss-footer-contact-list,
.prss-footer-connect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.prss-footer-contact-list li,
.prss-footer-connect-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-stone);
  line-height: 1.5;
}

.prss-footer-contact-list a,
.prss-footer-connect-list a {
  color: var(--color-surface) !important;
  text-decoration: none !important;
}

/* Correction pass: Book Appointment / Chat on WhatsApp must read as two
   unmistakable buttons against the dark footer, not as footer nav links. */
.prss-footer-connect__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85em;
  margin-block-end: 1.1em;
}

.prss-footer-connect__book {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.9rem;
  color: var(--color-primary) !important;
  background: var(--color-surface);
  padding: 0.7em 1.4em;
  border-radius: 999px;
  line-height: 1.2;
}

.prss-footer-connect__book:hover,
.prss-footer-connect__book:focus-visible {
  background: var(--color-accent-soft);
}

/* Light/cream button (same family as Book Appointment's --color-surface
   fill) with a WhatsApp-green border, icon and text -- reads as an
   unmistakable button against the dark footer while staying visually
   distinct from Book Appointment (green accent vs. the salon's own brown/
   espresso), not a solid-green block competing with it. */
.prss-footer-connect__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.9rem;
  /* CONTRAST FIX: label + icon are the dark system text token, not the
     WhatsApp green, so they read clearly on this light pill. The green
     stays as the border, which is what carries the WhatsApp identity here.
     Background and color are both !important and always declared together
     so they can never desync into same-on-same. The SVG uses
     fill="currentColor", so the icon follows this color automatically. */
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-whatsapp);
  padding: 0.65em 1.35em;
  border-radius: 999px;
  line-height: 1.2;
}

/* Same fix as the header/mobile WhatsApp control above: explicitly cover
   :focus and :active (not just :hover/:focus-visible), so Astra's bare
   "button:focus{color:#fff}" never applies uncontested and leaves a blank
   white pill after a tap. */
.prss-footer-connect__whatsapp:hover,
.prss-footer-connect__whatsapp:focus,
.prss-footer-connect__whatsapp:focus-visible,
.prss-footer-connect__whatsapp:active {
  /* !important on BOTH: previously only "color" was protected, so anything
     overriding the unprotected background left white text on a light
     background -- a blank pill. They must always move together. */
  background: var(--color-whatsapp) !important;
  color: #ffffff !important;
  border-color: var(--color-whatsapp);
}

.prss-footer-connect__whatsapp .prss-cta-control__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.prss-footer-connect__book:focus-visible,
.prss-footer-connect__whatsapp:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.prss-footer-contact-list a:hover,
.prss-footer-contact-list a:focus-visible,
.prss-footer-connect-list a:hover,
.prss-footer-connect-list a:focus-visible {
  color: var(--color-accent-soft) !important;
}

.prss-footer-contact-list a:focus-visible,
.prss-footer-connect-list a:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

/* Empty-column collapse: when a footer column's dynamic content resolves
   to nothing (no contact/booking/social data configured), its group wrapper
   renders as a genuinely empty element (verified: no stray whitespace/
   paragraph markup). Hide that empty group and its column wrapper entirely,
   then let the remaining populated columns redistribute the row width, so
   an optional empty column never leaves a blank gap in the footer. */
#colophon .wp-block-group:empty {
  display: none;
}

@media (min-width: 921px) {
  #colophon .ast-builder-footer-grid-columns:has(.wp-block-group:empty) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }

  #colophon [class*="site-footer-primary-section-"]:has(.wp-block-group:empty) {
    display: none;
  }
}

/* ---------------------------------------------------------------------
 * Demo booking/WhatsApp CTA system -- shared, site-wide primitives.
 *
 * .prss-cta-control is a functional marker (not a visual style) applied to
 * every booking/WhatsApp control alongside its normal contextual class
 * (.prss-header-actions__book, .prss-home-cta--primary, etc). It resets
 * the browser's default <button> chrome so a dormant <button> is styled
 * identically to its live <a> counterpart by the *same* contextual class --
 * no separate "dormant look" exists, by design (a demo control must read as
 * a genuine, active feature, never as disabled).
 * ------------------------------------------------------------------- */



/* Desktop/mobile dual-label controls (currently only the header/mobile-menu
   Book control): show one span, hide the other, at the same breakpoint
   already used for the header's own collapse (920px). */
.prss-cta-control__label--mobile {
  display: none;
}

@media (max-width: 920px) {
  .prss-cta-control__label--desktop {
    display: none;
  }

  .prss-cta-control__label--mobile {
    display: inline;
  }
}

/* Standard visually-hidden utility (not already present in the enqueued
   stylesheets) for icon-only controls' accessible text, e.g. the floating
   WhatsApp button below. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ---------------------------------------------------------------------
 * Floating WhatsApp control -- global, rendered once via wp_footer.
 * Bottom-corner placement, safely clear of mobile browser chrome, subtle
 * premium shadow, no pulsing/bouncing animation, no fake badge.
 * ------------------------------------------------------------------- */

.prss-floating-whatsapp {
  position: fixed;
  /* inset-inline-end (not "right") so this mirrors correctly once the site
     is translated into Arabic/RTL -- the button stays on the trailing edge
     in either direction rather than becoming physically reversed. */
  inset-inline-end: clamp(16px, 4vw, 28px);
  bottom: clamp(20px, 5vw, 32px);
  z-index: 400; /* below the sticky header (500), above ordinary content */
}

/* Refinement (2026-08-23): on phones this control was reported repeatedly
   covering reading/content areas (screenshots showed it sitting over body
   copy and CTAs near the foot of sections). Mobile-only: a smaller
   footprint, a slightly tighter but still safely tappable edge distance,
   and env(safe-area-inset-bottom) support for notched devices -- desktop/
   tablet sizing and position (above) are untouched. This is a global,
   site-wide component (rendered once via wp_footer on every front-end
   page), so this change was regression-checked across Homepage, About,
   Services, Packages and Bridal, not just this page. */
@media (max-width: 600px) {
  .prss-floating-whatsapp {
    inset-inline-end: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .prss-floating-whatsapp__button,
  .prss-floating-whatsapp__button:hover,
  .prss-floating-whatsapp__button:focus,
  .prss-floating-whatsapp__button:focus-visible,
  .prss-floating-whatsapp__button:active {
    width: 50px;
    height: 50px;
  }

  .prss-floating-whatsapp__button .prss-cta-control__icon {
    width: 26px;
    height: 26px;
  }
}

/* Correction pass: keep the light/white circular control, but the glyph
   itself must be the recognizable WhatsApp green -- not white -- and
   large enough to read clearly at a glance. "color" (inherited by the SVG
   via fill="currentColor") now IS the WhatsApp green, not white; the
   circle's own background stays light so the green glyph has something to
   contrast against. Checked in all four states below: default, hover,
   focus-visible, and active never turn the icon back to white or let it
   blend into the background. */
/* CORRECTION: the icon color must NEVER depend on interaction state -- it
   is the recognizable WhatsApp green at all times, including default,
   hover, focus, focus-visible, and active alike. "color" is now
   re-asserted identically on every one of those pseudo-classes so nothing
   (including Astra's own "button:focus,button:hover{color:#fff}" base
   rule) can ever change it. The circle's light background is likewise kept
   constant; only transform/shadow provide interaction feedback now. */
.prss-floating-whatsapp__button,
.prss-floating-whatsapp__button:hover,
.prss-floating-whatsapp__button:focus,
.prss-floating-whatsapp__button:focus-visible,
.prss-floating-whatsapp__button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-whatsapp);
  box-shadow: 0 6px 20px rgba(28, 25, 23, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.prss-floating-whatsapp__button:hover,
.prss-floating-whatsapp__button:focus-visible,
.prss-floating-whatsapp__button:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(28, 25, 23, 0.28);
}

.prss-floating-whatsapp__button:focus-visible {
  outline: 2px solid var(--color-whatsapp);
  outline-offset: 3px;
}

.prss-floating-whatsapp__button .prss-cta-control__icon {
  width: 30px;
  height: 30px;
}

@media (prefers-reduced-motion: reduce) {
  .prss-floating-whatsapp__button {
    transition: none;
  }

  .prss-floating-whatsapp__button:hover {
    transform: none;
  }
}
/* ---------------------------------------------------------------------
 * Page-builder wrapper chain: make it width-neutral.
 *
 * The homepage now owns its horizontal alignment via the authoritative
 * ".elementor .prss-home-inner" shell in homepage.css. The only job left
 * for this block is to make sure nothing in Astra's wrapper chain
 * narrows or offsets the space that shell centers itself within.
 *
 * Two Astra behaviours have to be neutralized for page-builder pages:
 *
 * 1. ".ast-container { max-width: 1240px }" (from the Container Width
 *    customizer setting) re-boxes the wrapper, and it carries no auto
 *    margins of its own, so it sits flush left.
 * 2. The Homepage is a normal WP Page, so it renders through Astra's
 *    full single-page chain (#primary > .site-main >
 *    article.ast-article-single > .entry-content), where unconditional
 *    rules add padding:3em, a background, and a stray blog-card
 *    "article { margin-top:-80px; position:relative }" treatment. The
 *    Services archive never hits any of this, because its template wraps
 *    its own plain <main> in get_header()/get_footer() instead -- which is
 *    exactly why Services already looked correctly centered.
 *
 * Scoped to .ast-page-builder-template so Astra's normal blog/post
 * layouts elsewhere on the site are untouched.
 * ------------------------------------------------------------------- */

.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .site-main,
.ast-page-builder-template article.ast-article-single,
.ast-page-builder-template .entry-content {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  background: none;
  position: static;
  border-radius: 0;
}

/* Vertical offsets from the same blog-card treatment (kept separate so
   the width reset above stays readable). */
.ast-page-builder-template article.ast-article-single {
  margin-block: 0;
}