/*
Theme Name: Daily Restore
Theme URI: https://dailyrestore.example
Description: Daily Restore — a premium European wellness & sports-recovery child theme for Twenty Twenty-Five. Calm editorial design, WooCommerce-ready, built entirely with Full Site Editing (theme.json, FSE templates, template parts and block patterns). No page builders, no custom theme rewrite.
Author: Daily Restore
Template: twentytwentyfive
Version: 1.1.5
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daily-restore
Tags: full-site-editing, block-patterns, blog, e-commerce, news, editorial
*/

/*
 * This is a BLOCK (FSE) child theme. Almost all styling lives in theme.json
 * and is applied through the Site Editor — this file only needs the header
 * above plus a few targeted rules the global-styles system can't express.
 * Parent + child stylesheets are enqueued from functions.php.
 */

/* Smooth in-page anchor scrolling (newsletter / TOC jumps). */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Subtle image zoom on editorial cards (add the class via pattern markup). */
.dr-card .wp-block-post-featured-image,
.dr-zoom { overflow: hidden; }
.dr-card .wp-block-post-featured-image img,
.dr-zoom img { transition: transform 600ms ease; }
.dr-card:hover .wp-block-post-featured-image img,
.dr-zoom:hover img { transform: scale(1.04); }

/* Eyebrow label utility (uppercase accent kicker). */
.dr-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Accent left-border pull quote inside post content. */
.dr-quote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 1.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
}

/* Reading-time + meta inline row. */
.dr-meta { color: var(--wp--preset--color--mute); font-size: var(--wp--preset--font-size--small); }

/* Pill primary button "tap collapse" feedback (matches the design system). */
.wp-block-button.is-style-fill .wp-block-button__link:active { transform: scale(0.96); opacity: 0.85; }
.wp-block-button .wp-block-button__link { transition: transform 120ms ease, opacity 120ms ease; }

/* === Review fixes (v1.0.1) === */

/* A2: footer link lists without markers. */
ul.is-style-no-bullets { list-style: none; padding-left: 0; margin-left: 0; }

/* A3: keep sticky header above hover/cover stacking contexts. */
.dr-header { z-index: 50; }

/* B2: hide the header CTA on very small screens to prevent overflow. */
@media (max-width: 480px) { .dr-header-cta { display: none; } }

/* B4: visible focus ring on buttons for keyboard users. */
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   SPLIDE CAROUSEL — GLOBAL FIX
   Forces all carousel images to fill their slide and centre
   correctly. Applies to every Splide carousel site-wide.
   Set once — do not duplicate per carousel.
   --------------------------------------------------------- */
.splide__slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block;
}

.splide__slide figure,
.splide__slide .wp-block-image {
    height: 100%;
    margin: 0;
}

.splide__track,
.splide__list,
.splide__slide {
    height: 100%;
}

.splide__track {
    overflow: hidden;
}

/* Splide: make each slide exactly fill the carousel */
.splide__track {
    overflow: hidden !important;
}

.splide__list {
    margin: 0 !important;
}

.splide__slide {
    width: 100% !important;
    margin: 0 !important;
}
/* ============================================================
   Mobile fixes v4 (v1.1.5)
   ============================================================ */

/* 1. LOGO */
@media (max-width: 600px) {
  .dr-header-cta { display: none !important; }
  .dr-header .wp-block-group:first-child {
    min-width: 0;
    overflow: hidden;
    flex-shrink: 1;
  }
  .dr-header .wp-site-title,
  .dr-header .wp-site-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    display: block;
  }
}

/* 2. NAV DRAWER */
@media (max-width: 782px) {
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 24px 28px !important;
    gap: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    border-bottom: 1px solid var(--wp--preset--color--hairline-soft) !important;
    padding: 18px 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child {
    border-bottom: none !important;
  }
}

/* 3. HERO — carousel column above text on mobile.
   On desktop: text (54%) left, carousel (46%) right.
   On mobile: columns stack. We push carousel FIRST so it's
   in-viewport on page load and Splide autoplay fires.
   Then cap the carousel height so it doesn't dominate. */
@media (max-width: 600px) {
  /* Make the hero columns container a column-reverse flex */
  .dr-hero .wp-block-columns {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  /* Carousel column: comes first visually (column-reverse puts last child on top) */
  .dr-hero .wp-block-column:last-child {
    width: 100% !important;
    flex-basis: 100% !important;
    order: -1;
  }
  /* Text column */
  .dr-hero .wp-block-column:first-child {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  /* Cap carousel height — overrides Splide's fixedHeight:690px */
  .dr-hero .splide,
  .dr-hero .splide__track,
  .dr-hero .splide__list,
  .dr-hero .splide__slide {
    height: 380px !important;
    max-height: 380px !important;
    min-height: unset !important;
  }
  .dr-hero .splide__slide img,
  .dr-hero .splide__slide figure,
  .dr-hero .splide__slide .wp-block-image {
    height: 380px !important;
    max-height: 380px !important;
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: unset !important;
  }
}