/**
 * Template #1 -- Contact page styling.
 *
 * Loaded only on the Contact page template (see inc/enqueue.php). Mirrors
 * the visual scale/rhythm established in about.css / packages.css /
 * bridal.css -- same clamp() paddings, same eyebrow/heading/body treatment,
 * same pill CTA language (`.prss-cta-control` is the shared base reset,
 * styled globally in header-footer.css -- only the contextual CTA classes
 * below supply this page's actual button appearance) -- so this page reads
 * as part of the same template system, not a separate design language.
 *
 * Centering architecture note: matching About/Packages/Bridal exactly, each
 * section gets its own `.prss-contact-inner` (max-width + margin-inline:
 * auto); there is deliberately no separate page-level width wrapper around
 * <main> in the sense of a second max-width/padding box -- that part still
 * matches the established convention and stays untouched.
 *
 * A prior refinement pass on this page (since superseded by a full rebuild)
 * diagnosed a real desktop centering bug down to CSS Grid's default
 * `min-width: auto`, which lets a grid item's intrinsic content (a native
 * <select>, a WPForms field, etc.) force its track wider than its `1fr`
 * share -- silently overflowing the grid's own container and shifting every
 * margin-inline: auto block left relative to the visible viewport. That
 * fix (`min-width: 0` on the affected grid children) is carried forward
 * here from the start, applied to every grid that wraps form controls or
 * unpredictable-width content, so the bug has no opportunity to reappear.
 *
 * <main class="prss-contact-page"> is itself a flex item of Astra's
 * `.ast-container` (display:flex; flex-direction:row) with no flex-grow,
 * so its width naturally shrink-wraps to the widest child's max-content
 * size instead of filling the available column. On About/Packages/Services
 * this is invisible because at least one section (a card grid) already
 * demands >= the full 1200px column width, which happens to pull the whole
 * <main> out to full width as a side effect. Contact's widest section (the
 * two-column "Visit us" grid) never demands that much, so <main> -- and
 * therefore every `.prss-contact-inner` child riding on its resolved width
 * -- was shrinking to ~945px and sitting off-center against Services/
 * Packages. `width: 100%` below makes <main> fill its flex container
 * directly, matching the others' effective behavior without depending on
 * any section's content width. Confirmed via real rendered-geometry
 * measurement (Playwright), not just CSS source inspection.
 */

.prss-contact-page {
  width: 100%;
}

.prss-contact-section {
  padding-block: clamp(48px, 8vw, 96px);
}

.prss-contact-inner {
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.prss-contact-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: 0.9em;
}

.prss-contact-heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-semibold);
  color: var(--color-text);
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

.prss-contact-heading--h1 {
  font-size: clamp(2.4rem, 4.8vw, 3.85rem);
  line-height: 1.18;
  max-width: 20ch;
}

.prss-contact-heading--h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.45rem);
  margin-block-end: 0.55em;
}

.prss-contact-heading--h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: clamp(1.22rem, 2vw, 1.5rem);
  color: var(--color-text);
  margin: 0 0 0.45em 0;
}

.prss-contact-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  color: var(--color-muted);
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 0 0 1.1em 0;
}

.prss-contact-body:last-child {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------
 * Shared CTA appearance (contextual classes -- .prss-cta-control itself
 * is only a reset, styled globally in header-footer.css). Adds a
 * `--tertiary` variant on top of the About page's primary/secondary pair,
 * used for the compact "How can we help?" method cards below.
 * ------------------------------------------------------------------- */

.prss-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.92rem;
  text-decoration: none !important;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.prss-contact-cta--primary {
  color: var(--color-surface) !important;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.prss-contact-cta--primary:hover,
.prss-contact-cta--primary:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.prss-contact-cta--secondary {
  color: var(--color-text) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.prss-contact-cta--secondary:hover,
.prss-contact-cta--secondary:focus-visible {
  color: var(--color-whatsapp-dark) !important;
  border-color: var(--color-whatsapp);
}

.prss-contact-cta--tertiary {
  color: var(--color-accent) !important;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 0.7em 1.5em;
  font-size: 0.88rem;
}

.prss-contact-cta--tertiary:hover,
.prss-contact-cta--tertiary:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

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

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */

.prss-contact-hero {
  background: var(--color-background);
  padding-block-end: clamp(36px, 5vw, 64px);
}

.prss-contact-hero__intro {
  max-width: 62ch;
  margin-block-start: 1.1em;
}

.prss-contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-block-start: 2em;
}

/* ---------------------------------------------------------------------
 * How can we help? -- contact methods grid
 * ------------------------------------------------------------------- */

.prss-contact-methods {
  border-top: 1px solid var(--color-border);
}

.prss-contact-methods__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-block-start: clamp(24px, 3vw, 32px);
}

.prss-contact-methods__item {
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prss-contact-methods__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.15rem;
  color: var(--color-text);
  margin-block-end: 0.4em;
}

.prss-contact-methods__item .prss-contact-body {
  font-size: 0.96rem;
  margin-block-end: 1.2em;
}

/* ---------------------------------------------------------------------
 * Visit us in Riyadh
 * ------------------------------------------------------------------- */

.prss-contact-visit {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
  /* This section's own content (a couple of short lines + a compact map
     panel) is much shorter than the shared .prss-contact-section padding
     (clamp(...,96px) at desktop), and it sits directly against Guidance
     below -- another short, same-background (--color-background-alt)
     section. Left at the shared padding on both sides, the two read as one
     continuous beige block with a large accidental gap in the middle.
     Tightening only the facing edge (this section's bottom, Guidance's
     top) keeps the rhythm before Visit and after Guidance untouched while
     turning the pair into one deliberate, balanced composition. */
  padding-block-end: clamp(32px, 4vw, 48px);
}

.prss-contact-visit__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.prss-contact-visit__content,
.prss-contact-visit__panel {
  min-width: 0;
}

.prss-contact-address {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-style: normal;
  margin-block-end: 1.4em;
}

.prss-contact-address__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.3rem;
  color: var(--color-text);
}

.prss-contact-address__line {
  font-family: var(--font-body);
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.prss-contact-visit__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
}

.prss-contact-visit__panel-icon {
  color: var(--color-accent);
  margin-block-end: 0.2em;
}

.prss-contact-visit__panel-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-medium);
  font-size: 1.2rem;
  color: var(--color-text);
}

.prss-contact-visit__panel-label--muted {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: 1rem;
  color: var(--color-muted);
}

.prss-contact-visit__panel-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.92rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prss-contact-visit__panel-link:hover,
.prss-contact-visit__panel-link:focus-visible {
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .prss-contact-visit__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
 * Opening hours
 * ------------------------------------------------------------------- */

.prss-contact-hours {
  border-top: 1px solid var(--color-border);
}

.prss-contact-hours__list {
  list-style: none;
  margin: clamp(24px, 3vw, 32px) 0 0 0;
  padding: 0;
  max-width: 480px;
}

.prss-contact-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5em;
  padding-block: 0.75em;
  border-block-end: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.prss-contact-hours__row:first-child {
  border-block-start: 1px solid var(--color-border);
}

.prss-contact-hours__day {
  font-weight: var(--font-weight-body-semibold);
  color: var(--color-text);
}

.prss-contact-hours__value {
  color: var(--color-muted);
  text-align: end;
}

.prss-contact-hours__note {
  margin-block-start: 1.2em;
  font-size: 0.92rem;
  color: var(--color-muted);
  max-width: 480px;
}

/* ---------------------------------------------------------------------
 * Good to Know / Planning an appointment guidance
 * ------------------------------------------------------------------- */

.prss-contact-guidance {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
  /* Paired with .prss-contact-visit's padding-block-end above -- see the
     comment there. Only the top edge facing Visit is tightened; the
     bottom edge (facing the enquiry form) is untouched. */
  padding-block-start: clamp(32px, 4vw, 48px);
}

.prss-contact-guidance .prss-contact-body {
  max-width: 66ch;
}

/* ---------------------------------------------------------------------
 * General enquiry form
 * ------------------------------------------------------------------- */

.prss-contact-form-section {
  border-top: 1px solid var(--color-border);
}

.prss-contact-form-section__intro {
  max-width: 62ch;
}

.prss-contact-form-section__form {
  min-width: 0;
  /* Widened from 720px so the 2-column field grid below (each column
     comfortably >= 400px) reads as a deliberate editorial form column
     rather than a single narrow stack with a large unused gap on the
     right of the 1200px content area. Still deliberately short of the
     full available width -- a form spanning the entire container reads
     as unbalanced too. */
  max-width: 920px;
  margin-block-start: clamp(24px, 3vw, 32px);
}

/* WPForms theming -- re-declare WPForms' own CSS custom properties scoped
 * to this section so WPForms' higher-specificity compiled selectors
 * resolve against the salon's brand tokens via var() cascade instead of
 * WPForms' own defaults (default blue). No !important needed on color
 * properties because of this. See project notes on WPForms Modern markup
 * theming for the full mechanism. */
.prss-contact-form-section .wpforms-container-full {
  --wpforms-field-border-radius: 8px;
  --wpforms-field-border-color: var(--color-border);
  --wpforms-field-background-color: var(--color-surface);
  --wpforms-field-text-color: var(--color-text);
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-padding-h: 16px;
  --wpforms-label-size-font-size: 0.94rem;
  --wpforms-label-color: var(--color-text);
  --wpforms-label-sublabel-color: var(--color-muted);
  --wpforms-button-background-color: var(--color-accent);
  --wpforms-button-text-color: var(--color-surface);
  --wpforms-button-border-radius: 999px;
  --wpforms-button-size-font-size: 0.92rem;
  --wpforms-button-size-padding-h: 32px;
  --wpforms-button-size-padding-v: 16px;
}

.prss-contact-form-section .wpforms-container-full form {
  font-family: var(--font-body);
}

/* Defensive: WPForms lays several field types out in an internal CSS grid
 * (e.g. two-column field groups) whose children default to
 * min-width: auto -- the same overflow mechanism documented at the top of
 * this file. Neutralized here so it can never re-widen the page. */
.prss-contact-form-section .wpforms-container-full .wpforms-field-container,
.prss-contact-form-section .wpforms-container-full .wpforms-field-container > .wpforms-field,
.prss-contact-form-section .wpforms-container-full .wpforms-field-row,
.prss-contact-form-section .wpforms-container-full .wpforms-field-row-block {
  min-width: 0;
}

.prss-contact-form-section .wpforms-container-full .wpforms-field {
  padding-block: 10px;
}

/* Two-column desktop composition for the existing 6 fields -- no new
 * fields or content, just an intentional reflow using the field order
 * already defined in inc/contact-form.php: Name+Phone, Email+Enquiry
 * Type share a row; Preferred Contact Method (radio, already its own
 * full-width row of inline choices) and Message (textarea) each span
 * both columns. Targeted by WPForms' own data-field-id attribute so this
 * survives a form recreation without depending on the numeric form ID.
 * Collapses to the existing single-column stack at the same 900px
 * breakpoint already used by .prss-contact-visit__grid above, so mobile
 * and tablet stay full-width and comfortable. */
.prss-contact-form-section .wpforms-container-full .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.6vw, 32px);
}

.prss-contact-form-section .wpforms-container-full .wpforms-field-container > .wpforms-field[data-field-id="4"],
.prss-contact-form-section .wpforms-container-full .wpforms-field-container > .wpforms-field[data-field-id="5"] {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .prss-contact-form-section .wpforms-container-full .wpforms-field-container {
    grid-template-columns: 1fr;
  }
}

.prss-contact-form-section .wpforms-container-full input:focus,
.prss-contact-form-section .wpforms-container-full select:focus,
.prss-contact-form-section .wpforms-container-full textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.prss-contact-form-section .wpforms-container-full .wpforms-field-radio ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.6em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.prss-contact-form-section .wpforms-container-full .wpforms-field-radio li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.prss-contact-form-section .wpforms-container-full input[type="radio"] {
  accent-color: var(--color-accent);
}

.prss-contact-form-section .wpforms-container-full .wpforms-error {
  color: #b3261e;
  font-size: 0.88rem;
}

.prss-contact-form-unavailable {
  font-family: var(--font-body);
  color: var(--color-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------
 * Bridal / group callout
 * ------------------------------------------------------------------- */

.prss-contact-bridal {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-alt);
}

.prss-contact-bridal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-block-start: 1.6em;
}

/* ---------------------------------------------------------------------
 * Social
 * ------------------------------------------------------------------- */

.prss-contact-social {
  border-top: 1px solid var(--color-border);
}

.prss-contact-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4em;
  margin-block-start: 1.2em;
}

.prss-contact-social__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-semibold);
  font-size: 0.98rem;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prss-contact-social__link:hover,
.prss-contact-social__link:focus-visible {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------
 * Final CTA
 * ------------------------------------------------------------------- */

.prss-contact-final-cta {
  border-top: 1px solid var(--color-border);
  text-align: center;
  padding-block: clamp(48px, 7vw, 88px);
}

.prss-contact-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-block-start: 0.6em;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------- */

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