/* ============================================================
   Header / footer template layout — Pearl Rock design.

   Owns only the OUTER arrangement of an Elementor-built header
   or footer; everything inside stays the builder's business.

   Two deliberate choices here:

   1. Selectors are written against Elementor's stable output
      classes (.e-con, .elementor-widget-*), not its layout
      control names — those were restructured in 4.x.

   2. Every selector is prefixed with `body`. Elementor's
      frontend.min.css is enqueued after the theme's styles, so
      an unprefixed `.e-con` rule here loses every specificity
      tie. The stylesheet also declares elementor-frontend as a
      dependency so it prints afterwards; the prefix is belt
      and braces.
   ============================================================ */

body .prc-tpl{ width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */

/* Sticky with a frosted backdrop, matching the original design.
   `top` is a variable so the admin bar can offset it. */
body .prc-tpl--header{
  position: sticky;
  top: var(--prc-admin-offset, 0px);
  z-index: 50;
  background: rgba(253, 248, 244, .78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--prc-ease), border-color .35s var(--prc-ease), box-shadow .35s var(--prc-ease);
}

body.prc-scrolled .prc-tpl--header{
  background: rgba(253, 248, 244, .95);
  border-bottom-color: var(--prc-line);
  box-shadow: 0 8px 28px -24px rgba(44, 36, 32, .32);
}

body.admin-bar{ --prc-admin-offset: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar{ --prc-admin-offset: 46px; }
}

/* The Elementor document wrapper must not introduce a box of its own. */
body .prc-tpl--header > .elementor{ display: block; width: 100%; }

/* The header bar: a centred 1280px column inside a full-width cream band.
   Three zones — logo 20% | menu 60% | actions 20%. The announcement strip
   sits in the same container but takes a full row of its own above them. */
body .prc-tpl--header > .elementor > .e-con,
body .prc-tpl--header > .elementor > .e-con.e-parent{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--prc-wrap);
  margin-inline: auto;
  padding: 0 var(--prc-gutter);
  min-height: 108px;
  transition: min-height .35s var(--prc-ease);
}

body.prc-scrolled .prc-tpl--header > .elementor > .e-con{ min-height: 76px; }

body .prc-tpl--header .elementor-widget{ margin-bottom: 0; }
body .prc-tpl--header .elementor-widget-container{ margin: 0; }

/* The announcement strip runs edge to edge, breaking out of the centred
   column to the full viewport width. */
body .prc-tpl--header .elementor-widget-prc-announcement{
  order: -1;
  flex: 0 0 100%;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- the three zones ---- */
body .prc-tpl--header .elementor-widget-prc-site-logo{
  flex: 0 0 20%;
  max-width: 20%;
}

body .prc-tpl--header .elementor-widget-prc-nav-menu{
  flex: 0 0 60%;
  max-width: 60%;
}

/* Icons + CTA share the final 20% via a child container. */
body .prc-tpl--header .e-con.e-child{
  flex: 0 0 20%;
  max-width: 20%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  padding: 0;
  margin: 0;
}

body .prc-tpl--header .e-con.e-child > .elementor-widget{ flex: 0 0 auto; width: auto; }

/* The logo is the tallest thing in the bar and sets its rhythm. */
body .prc-tpl--header .prc-logo__img{
  height: 86px;
  transition: height .35s var(--prc-ease);
}
body.prc-scrolled .prc-tpl--header .prc-logo__img{ height: 54px; }

/* Nav: small, wide-tracked caps, centred in its 60%. */
body .prc-tpl--header .prc-nav__list{
  justify-content: center;
  gap: clamp(16px, 2.4vw, 38px);
}
body .prc-tpl--header .prc-nav__link{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--prc-ink-soft);
  padding-block: 6px;
}
body .prc-tpl--header .prc-nav__link:hover,
body .prc-tpl--header .prc-nav__item.is-current > .prc-nav__link{ color: var(--prc-ink); }
body .prc-tpl--header .prc-nav__link::after{ background: var(--prc-gold-deep); }

/* The gold pill CTA. */
body .prc-tpl--header .elementor-widget-button .elementor-button{
  display: inline-block;
  background: var(--prc-gold-deep);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: background .3s var(--prc-ease), transform .3s var(--prc-ease-out);
}
body .prc-tpl--header .elementor-widget-button .elementor-button:hover{
  background: var(--prc-ink);
  transform: translateY(-1px);
}

/* Below the nav breakpoint the three zones collapse to logo | burger. */
@media (max-width: 1100px){
  body .prc-tpl--header > .elementor > .e-con{ min-height: 86px; }
  body .prc-tpl--header .prc-logo__img{ height: 56px; }

  body .prc-tpl--header .elementor-widget-prc-site-logo{ flex: 1 1 auto; max-width: none; }
  body .prc-tpl--header .elementor-widget-prc-nav-menu{ flex: 0 0 auto; max-width: none; order: 3; }
  body .prc-tpl--header .e-con.e-child{ flex: 0 0 auto; max-width: none; }
}

@media (max-width: 640px){
  body .prc-tpl--header > .elementor > .e-con{ min-height: 76px; }
  body .prc-tpl--header .prc-logo__img{ height: 48px; }
  body .prc-tpl--header .elementor-widget-button{ display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

body .prc-tpl--footer{
  position: relative;
  margin-top: clamp(48px, 8vw, 96px);
  background: linear-gradient(180deg,
    var(--prc-cream) 0%,
    var(--prc-blush) 45%,
    var(--prc-blush-deep) 100%);
  border-top: 1px solid var(--prc-line);
  color: var(--prc-ink-soft);
}

body .prc-tpl--footer > .elementor{ display: block; width: 100%; }

body .prc-tpl--footer > .elementor > .e-con,
body .prc-tpl--footer > .elementor > .e-con.e-parent{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  width: 100%;
  max-width: var(--prc-wrap);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 80px) var(--prc-gutter) clamp(28px, 4vw, 44px);
  align-items: start;
}

body .prc-tpl--footer .elementor-widget{ margin-bottom: 0; }

/* Brand wordmark. */
body .prc-tpl--footer .elementor-widget-heading h3.elementor-heading-title{
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--prc-gold-deep);
  margin: 0 0 10px;
}

/* Column labels — small caps. */
body .prc-tpl--footer .elementor-widget-heading h4.elementor-heading-title{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--prc-gold-deep);
  margin: 0 0 16px;
}

body .prc-tpl--footer .elementor-widget-text-editor{
  font-size: .9rem;
  line-height: 1.7;
  color: var(--prc-ink-soft);
  max-width: 34ch;
}

/* Footer nav reads as a stacked link list. */
body .prc-tpl--footer .prc-nav__list{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
body .prc-tpl--footer .prc-nav__link{
  font-size: .9rem;
  color: var(--prc-ink-soft);
}
body .prc-tpl--footer .prc-nav__link:hover{ color: var(--prc-ink); }
body .prc-tpl--footer .prc-nav__link::after{ background: var(--prc-gold-deep); }

body .prc-tpl--footer .elementor-icon-list-item,
body .prc-tpl--footer .elementor-icon-list-text{
  font-size: .9rem;
  color: var(--prc-ink-soft);
}
body .prc-tpl--footer .elementor-icon-list-icon svg,
body .prc-tpl--footer .elementor-icon-list-icon i{ color: var(--prc-gold-deep); }

/* Copyright + payment marks share the full-width bottom row. */
body .prc-tpl--footer .elementor-widget-text-editor:last-of-type,
body .prc-tpl--footer .elementor-widget-prc-payment-icons{
  grid-column: 1 / -1;
}
body .prc-tpl--footer .elementor-widget-prc-payment-icons{
  margin-top: -8px;
  padding-top: 22px;
  border-top: 1px solid var(--prc-line);
}

@media (max-width: 640px){
  body .prc-tpl--footer > .elementor > .e-con{ grid-template-columns: 1fr; }
}