/*
Theme Name:   ART Clinic Child
Theme URI:    https://art-clinic.co.uk
Description:  Child theme of Astra for ART Clinic. Holds only the CSS that native Elementor cannot do (scroll-state classes, focus rings, Astra overrides, reduced motion).
Author:       ART Clinic
Template:     astra
Version:      1.3.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  art-clinic-child
*/

/* ==========================================================================
   HOW THIS FILE WORKS
   --------------------------------------------------------------------------
   1. Design tokens (colours, fonts, sizes) live in Elementor as V4 Variables
      (labels prefixed "art-"). This file only reads them, always with a
      fallback, e.g. var(--art-ink, #1A140F). Change a colour in Elementor,
      not here.
   2. Typography and component styles (eyebrow, buttons, links, fields) live
      in Elementor as Global Classes. Elementor renders class labels as real
      class names, so this file can target them (.art-btn, .art-eyebrow...).
   3. Parent theme is Astra. Scope: every rule sits under body.art-site
      (added in functions.php).
      Where a rule must beat Elementor's atomic base styles, it is scoped to
      ".art-site .elementor" for the extra specificity.
   4. Breakpoints mirror Elementor Site Settings:
        mobile  <= 860px   (single-column layouts)
        tablet  <= 1100px  (nav collapses to burger)
      If those values change in Elementor, update the media queries below.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Tokens that are not editable in Elementor (motion, header offset)
   -------------------------------------------------------------------------- */
:root {
  --art-ease: cubic-bezier(.22, .61, .36, 1);
  --art-header-offset: calc(var(--art-header-h, 94px) + var(--wp-admin--admin-bar--height, 0px));
}


/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

/* Astra sets html { font-size: 93.75% } (1rem = 15px). Every Elementor
   size token is in rem and assumes 1rem = 16px, so restore the browser
   default. html:root outranks Astra's plain "html" selector. */
html:root {
  font-size: 100%;
}

html {
  background: var(--art-paper, #F3F0EB);
  scroll-behavior: smooth;
}

body.art-site {
  background: var(--art-paper, #F3F0EB);
  color: var(--art-ink, #1A140F);
  font-family: var(--art-sans, 'Jost'), 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Astra colours every link (a, a:hover, a:focus) with its own palette.
   Plain inline links inherit the surrounding text colour instead.
   :not([class]) leaves Elementor buttons and classed links alone. */
:where(.art-site) a:not([class]),
:where(.art-site) a:not([class]):hover,
:where(.art-site) a:not([class]):focus {
  color: inherit;
}

.art-site ::selection {
  background: var(--art-taupe, #C2B9B0);
  color: var(--art-ink, #1A140F);
}

/* Astra boxes page content in .ast-container (max-width 1240px, 20px side
   padding), even on Elementor Full Width pages. Unbox it wherever the
   container holds an Elementor document (pages, Theme Builder templates),
   so full-bleed sections can reach the viewport edges. */
.art-site .site-content > .ast-container:has(> [data-elementor-type]) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Astra's scroll-to-top button is not part of the approved design.
   Astra shows it with an inline style on scroll, hence !important. */
.art-site #ast-scroll-top {
  display: none !important;
}

/* Anchor links land below the sticky header */
.art-site [id] {
  scroll-margin-top: calc(var(--art-header-offset) + 16px);
}


/* --------------------------------------------------------------------------
   2. Typography refinements
   -------------------------------------------------------------------------- */

/* Balanced line breaks on display headings */
.art-site .elementor :is(h1, h2) {
  text-wrap: balance;
}

/* Emphasis inside display headings: lighter italic, same colour */
.art-site .elementor :is(h1, h2) em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

/* Opt-in: softer ink on the emphasised word ("How we think about treatment") */
.art-site .elementor .art-em-soft em {
  color: var(--art-ink-soft, rgba(26,20,15,.73));
}

/* Hard breaks inside headings behave on every browser */
.art-site .elementor :is(h1, h2) br {
  display: block;
}


/* --------------------------------------------------------------------------
   3. Buttons & text links (motion + focus; visual styles live in Elementor)
   -------------------------------------------------------------------------- */
.art-site .elementor :is(.art-btn, .art-text-link) {
  cursor: pointer;
  transition-property: transform, background-color, border-color, color;
  transition-duration: .25s;
  transition-timing-function: var(--art-ease);
}

/* Visible keyboard focus */
.art-site :focus-visible {
  outline: 2px solid var(--art-deep-dark, #463C35);
  outline-offset: 3px;
}

.art-site .elementor :is(.art-btn-light, .art-text-link-light):focus-visible {
  outline-color: var(--art-cream, #F3F0EB);
}


/* --------------------------------------------------------------------------
   4. Header (Theme Builder header site part)
   Hooks: .art-header (root), .art-nav, .art-burger, .art-burger-line
   JS adds .is-scrolled once the hero photo has scrolled past, and
   .is-menu-open when the burger is used.
   -------------------------------------------------------------------------- */
.art-site .elementor-location-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 80;
}

.art-site .elementor .art-header {
  background: var(--art-paper, #F3F0EB);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background-color .3s var(--art-ease);
}

.art-site .elementor .art-header.is-scrolled {
  background: rgba(243, 240, 235, .82);
}

/* Mobile menu (<= 1100px, Elementor tablet breakpoint). The nav's panel
   layout lives in Elementor (class art-nav); this only reveals it. */
@media (max-width: 1100px) {
  .art-site .elementor .art-header.is-menu-open .art-nav {
    display: flex;
  }
}

/* Burger lines morph into a cross when the menu is open */
.art-site .elementor .art-burger-line {
  transition: transform .25s var(--art-ease), opacity .25s var(--art-ease);
}

.art-site .elementor .art-header.is-menu-open .art-burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.art-site .elementor .art-header.is-menu-open .art-burger-line:nth-child(2) {
  opacity: 0;
}

.art-site .elementor .art-header.is-menu-open .art-burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Nav links: Elementor wraps the <a> inside the .art-nav-link span, so the
   link only covers the text. Stretch it over the whole row (matters for
   the tall, full-width rows in the mobile menu). */
.art-site .elementor .art-nav-link {
  position: relative;
}

.art-site .elementor .art-nav-link > a::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* --------------------------------------------------------------------------
   4b. Footer (Theme Builder footer site part)
   Hooks: .art-footer (dark section). Its column links are inline <a> tags
   inside Elementor paragraphs, which Elementor styles cannot reach.
   Layout note: the booking box at the top of the footer overlaps the last
   page section by 148px (110px on mobile), so give each page's final section
   at least that much bottom padding.
   -------------------------------------------------------------------------- */
.art-site .elementor .art-footer a:not([class]) {
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color .25s var(--art-ease);
}

.art-site .elementor .art-footer a:not([class]):hover,
.art-site .elementor .art-footer a:not([class]):focus-visible {
  color: var(--art-cream, #F3F0EB);
  text-decoration-line: underline;
}

.art-site .elementor .art-footer :focus-visible {
  outline-color: var(--art-cream, #F3F0EB);
}

/* Pages NOT built with Elementor (Astra-rendered: legal pages, posts, 404,
   archives) get room for the booking box automatically. Elementor pages
   handle this with their final section's bottom padding. Skipped when the
   page uses the minimal footer (.art-footer-minimal), which has no box. */
.art-site:not(.elementor-page):not(:has(.art-footer-minimal)) .site-content {
  padding-bottom: 180px;
}

@media (max-width: 860px) {
  .art-site:not(.elementor-page):not(:has(.art-footer-minimal)) .site-content {
    padding-bottom: 140px;
  }
}


/* --------------------------------------------------------------------------
   5. Mobile (mirrors Elementor mobile breakpoint: 860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --art-header-offset: calc(78px + var(--wp-admin--admin-bar--height, 0px));
  }
}


/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .art-site .elementor :is(.art-btn, .art-text-link),
  .art-site .elementor :is(.art-btn, .art-text-link):hover {
    transform: none;
    transition-duration: .01ms;
  }
}