/**
 * The finishing layer for the inner pages.
 *
 * Three jobs: repair what the heading demotion broke, dress the drawn icons
 * that replaced the glyphs, and keep the pages' own sections to the same
 * measure, rhythm and hierarchy as the home page.
 */

/* --------------------------------------------------------------------------
   The page's own hero heading

   Each page carries a photographic band under the film, and its headline was
   written as a first-level heading. There can be one of those on a page and
   the film already holds it, so the band's headline is demoted — at which
   point it stops matching the page's own rule for h1 and falls back to the
   theme's dark body colour, on a dark photograph. These rules give the demoted
   heading exactly what the rule it lost was giving it.
   -------------------------------------------------------------------------- */

.w2e-page-hero-content h2,
.w2e-page-hero-content h3:first-of-type {
  color: #fff;
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 16px;
}

.w2e-hero-content h2,
.w2e-hero-inner h2 {
  color: inherit;
}

/* The band's overlay was light enough to read navy through. Now that the
   headline is white it can stay as it is, but a floor under the darkest part
   keeps the standfirst readable on a pale photograph too. */
.w2e-page-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 15, 30, .38) 0%, rgba(0, 15, 30, .86) 100%);
}

/* --------------------------------------------------------------------------
   Drawn icons
   -------------------------------------------------------------------------- */

.w2e-icon-item .w2e-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(0, 51, 90, .06);
  color: var(--navy, #00335a);
}

.w2e-icon-item .w2e-ic svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* --------------------------------------------------------------------------
   A written subject with a photograph beside it

   The written sections ran the full width of the page as unbroken prose, which
   is both hard to read and visually empty next to the card grids around them.
   Two columns fixes the measure and gives the subject something to look at.
   -------------------------------------------------------------------------- */

.w2e-topic--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.w2e-topic--split:nth-of-type(even) .w2e-topic__text {
  order: 2;
}

.w2e-topic__text > *:first-child {
  margin-top: 0;
}

.w2e-topic__text p {
  max-width: 62ch;
}

/* The library's photographs of these places are small originals. The column is
   sized so none of them is enlarged past its own pixels — a crisp 26rem picture
   reads as deliberate where a soft 50rem one reads as a mistake. */
.w2e-topic__figure {
  margin: 0;
  max-width: 26rem;
  margin-left: auto;
  position: sticky;
  top: 1.5rem;
}

.w2e-topic--split:nth-of-type(even) .w2e-topic__figure {
  margin-left: 0;
  margin-right: auto;
}

.w2e-topic__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--w2e-r, 4px);
}

.w2e-topic__figure figcaption {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted, #6b7784);
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(15, 26, 34, .1);
}

@media (max-width: 860px) {
  .w2e-topic--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .w2e-topic--split:nth-of-type(even) .w2e-topic__text {
    order: 0;
  }

  .w2e-topic__figure {
    position: static;
  }

  .w2e-topic__figure img {
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------------
   A photographic band that now says something

   It held a button and nothing else. The heading and the line above the button
   need a scrim behind them, because a photograph is not a background you can
   set type on and hope.
   -------------------------------------------------------------------------- */

.w2e-band-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  text-align: center;
  margin: 0 auto 1.4rem;
  padding-inline: 1.15rem;
}

.w2e-band-copy h2 {
  font-family: var(--w2e-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
  margin: 0 0 .7rem;
  text-shadow: 0 2px 18px rgba(0, 12, 24, .55);
}

.w2e-band-copy p {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 12, 24, .6);
}

/* The band lays its children out in a row; the copy and the button belong in a
   column, centred. */
.w2e-band-copy + .w2e-cta {
  position: relative;
  z-index: 2;
}

/* A link written into a list row, so it reads as a link and not as emphasis. */
.w2e-polish-link {
  display: inline-block;
  font-weight: 600;
  color: var(--navy, #00335a);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.w2e-polish-link:hover {
  color: var(--gold-deep, #a87d33);
}

/* --------------------------------------------------------------------------
   Buttons are not prose

   Astra underlines every link inside the content. That is right for a link in a
   sentence and wrong for a button, a menu item or a card. The selector carries
   an extra element so it wins on weight rather than on being shouted at.
   -------------------------------------------------------------------------- */

body .entry-content a.w2e-cta,
body .entry-content a.w2e-topic__cta,
body .entry-content a.w2e-home-cta,
body .entry-content a.w2e-home-pillar__link,
body .entry-content a.w2e-btn,
body .entry-content .w2e-topics a,
body .entry-content .w2e-menu a,
body .entry-content .w2e-drawer a,
body .entry-content .w2e-mobile-panel a,
body .entry-content .w2e-footer a,
body .entry-content .w2e-card a,
body .entry-content .w2e-home-card,
body .entry-content .w2e-home-pillar h3 a {
  text-decoration: none;
}

body .entry-content a.w2e-cta:hover,
body .entry-content a.w2e-topic__cta:hover,
body .entry-content a.w2e-home-cta:hover,
body .entry-content .w2e-footer a:hover,
body .entry-content .w2e-home-pillar h3 a:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* The band's button was a bare underlined word on a photograph. It needs to
   look like something you press. */
.w2e-band-copy + .w2e-cta,
.w2e-cta {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   The developer wall

   The marks are supplied at wildly different proportions — some square, some
   wide, some with their own white ground. Containing each one in a fixed box
   and letting it size itself inside makes a row of them read as a set rather
   than as fifteen unrelated files.
   -------------------------------------------------------------------------- */

.w2e-brandcell {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
}

.w2e-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 62px;
}

.w2e-mark img {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* The marks arrive in many colours on many grounds. One tone settles them
     into a row and keeps the page's own palette in charge; colour returns on
     hover, so nobody's brand is misrepresented on inspection. */
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}

.w2e-brandcell:hover .w2e-mark img,
.w2e-brandcell:focus-within .w2e-mark img {
  filter: none;
  opacity: 1;
}

.w2e-mark__name {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--muted, #5b6873);
}

/* --------------------------------------------------------------------------
   The contact form

   The fields keep the look they had. What is added is what was missing: a
   label for anyone not using their eyes, an error that appears against the
   field that caused it, and a line at the end that says what happened.
   -------------------------------------------------------------------------- */

.w2e-field {
  display: block;
  position: relative;
}

.w2e-field__error {
  display: block;
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.5;
  color: #a3261f;
  margin: -.55rem 0 .75rem;
  min-height: 0;
}

.w2e-field__error:empty {
  display: none;
}

#w2e-contact-form .is-wrong {
  border-color: #a3261f !important;
  box-shadow: 0 0 0 3px rgba(163, 38, 31, .12);
}

/* The honeypot. Off-screen rather than display:none, because some robots skip
   what is hidden and fill in what is not. */
.w2e-trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.w2e-form__status {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .9375rem;
  line-height: 1.6;
  margin: 1rem 0 0;
  padding: 0;
}

.w2e-form__status:empty {
  display: none;
}

.w2e-form__status.is-good {
  color: #1c5c3a;
  background: rgba(28, 92, 58, .07);
  border-left: 3px solid #1c5c3a;
  padding: .85rem 1rem;
  border-radius: 3px;
}

.w2e-form__status.is-bad {
  color: #a3261f;
  background: rgba(163, 38, 31, .07);
  border-left: 3px solid #a3261f;
  padding: .85rem 1rem;
  border-radius: 3px;
}

/* A disabled send button should look disabled. */
#w2e-contact-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Comfortable to fill in on a phone: nothing under the size at which iOS zooms
   the page in on focus. */
@media (max-width: 640px) {
  #w2e-contact-form input,
  #w2e-contact-form select,
  #w2e-contact-form textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   Accessibility

   Measured across every page rather than guessed at. Each rule below answers a
   pair that failed WCAG AA at the size it is actually set in, and the identity
   is kept: the gold stays the brand's gold wherever it is large enough to pass,
   and only the small text that could not be read moves to the deeper bronze
   the palette already contains.
   ========================================================================== */

:root {
  /* Gold at eyebrow size — 11 to 14 pixels — needs to be this dark to clear
     4.5:1 on white and on the pale grounds used across the site. */
  --w2e-gold-text: #8a6420;
}

/* Eyebrows and small caps: the page's own .tag, ours, and the numerals in the
   numbered lists, all of which were set in the display gold at 11–14px. */
.w2e-page-hero-content .tag,
.entry-content .tag,
.w2e-home-tag,
.w2e-topics-tag,
.w2e-insight__scale,
.w2e-svc-row .idx,
.w2e-services .idx {
  color: var(--w2e-gold-text, #8a6420) !important;
}

/* The eyebrow that sits on a photograph keeps the light gold: it is read
   against a dark scrim, not against paper. */
.w2e-page-hero .w2e-page-hero-content .tag,
.w2e-hero .tag,
.w2e-hero-inner .tag {
  color: var(--w2e-gold-soft, #e3c68a) !important;
}

/* The gold call to action carried white text at 2.6:1. The gold is the brand's
   and stays exactly as it is; the label becomes navy, which is the pair the
   site already uses everywhere else and clears 5:1. */
.w2e-cta,
a.w2e-cta,
button.w2e-cta,
.w2e-btn--gold {
  color: var(--w2e-navy, #00335a) !important;
  font-weight: 700;
}

.w2e-cta:hover,
a.w2e-cta:hover,
button.w2e-cta:hover {
  color: var(--w2e-navy-deep, #002440) !important;
}

/* The floating WhatsApp button: white on the light green is 2:1. WhatsApp's own
   darker green keeps it recognisable and clears the bar. */
.w2e-whatsapp,
a.w2e-whatsapp {
  background: #128c7e !important;
}

/* Estatik's own label colours. "Distress deal" was white on a light green at
   2.25:1. Only the label pills are restyled — the price badges beside them
   keep the grey they already had, so the row does not turn into a wall of
   navy and the label stays the thing that catches the eye. */
.es-badges--rounded .es-badge:not(.call-for-price):not(.es-badge--normal):not(.w2e-on-application),
.es-badge--label,
.es-label {
  background: var(--w2e-navy, #00335a) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   A visible focus ring

   The theme removes the outline from links, which leaves anyone working from a
   keyboard with no idea where they are. This puts one back — only for keyboard
   focus, so a mouse click does not draw a box round everything it touches.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--w2e-gold, #c99a49) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* On a dark ground the gold ring would disappear; white reads on both. */
.w2e-hero a:focus-visible,
.w2e-hero button:focus-visible,
.w2e-page-hero a:focus-visible,
.w2e-footer a:focus-visible,
.w2e-cta-band a:focus-visible,
.w2e-mobile-panel a:focus-visible,
.w2e-drawer a:focus-visible {
  outline-color: #fff !important;
}

/* The skip link should be reachable and visible when it is reached. */
.w2e-skip:focus,
.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 100000;
  background: var(--w2e-navy, #00335a);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 3px;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   Targets big enough to hit

   The carousel dots are eight pixels across. The dot stays the size it is; the
   area that answers to a finger grows around it.
   -------------------------------------------------------------------------- */

.slick-dots li {
  position: relative;
}

.slick-dots li button {
  position: relative;
}

.slick-dots li button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Reading on a phone

   Nothing below fourteen pixels in running text, and enough line height that a
   long paragraph does not close up.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .w2e-page p,
  .w2e-topic__text p,
  .w2e-insight__text {
    font-size: max(0.9375rem, 15px);
    line-height: 1.7;
  }

  .w2e-mark__name,
  .w2e-topic__figure figcaption,
  .w2e-insight__source {
    font-size: .8125rem;
  }
}

/* Someone who has asked their machine for less movement should get it. */
@media (prefers-reduced-motion: reduce) {
  .w2e-reveal,
  .w2e-home-pillar,
  .w2e-mark img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   The newsletter box
   -------------------------------------------------------------------------- */

.w2e-newsletter button,
.w2e-newsletter [type="submit"] {
  color: var(--w2e-navy, #00335a) !important;
  font-weight: 700;
}

.w2e-signup__status {
  font-family: var(--w2e-sans, "Plus Jakarta Sans", sans-serif);
  font-size: .8125rem;
  line-height: 1.55;
  margin: .6rem 0 0;
  flex-basis: 100%;
}

.w2e-signup__status:empty {
  display: none;
}

.w2e-signup__status.is-good {
  color: #9ce0b4;
}

.w2e-signup__status.is-bad {
  color: #ffb4ae;
}