/*
Theme Name: The Padel Pals
Description: Generated by fse-converter
Version: 1.0.0-1777802186743
Template: twentytwentyfive
Text Domain: the-padel-pals
*/

:root {
  --wp--custom--nav-height: 72px;
}

.site-header.wp-block-group {
  --wp--custom--nav-height: 72px;
}

/* Multi-item grids — one rule per distinct column count used in the manifest (M5.10). */
.wp-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--60, 48px) !important; }
.wp-grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--60, 48px) !important; }
.wp-grid-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--60, 48px) !important; }
.wp-grid-6 { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--60, 48px) !important; }
.wp-grid-2 > .wp-block-column,
.wp-grid-3 > .wp-block-column,
.wp-grid-4 > .wp-block-column,
.wp-grid-6 > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}
@media (max-width: 960px) {
  .wp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .wp-grid-2 { grid-template-columns: 1fr !important; }
  .wp-grid-3 { grid-template-columns: 1fr !important; }
  .wp-grid-4 { grid-template-columns: 1fr !important; }
  .wp-grid-6 { grid-template-columns: 1fr !important; }
}
/* Generic "badge-on-media" pattern: any paragraph with a class token matching
 * *-badge gets absolute-positioned to the top-right of its nearest media parent.
 * Using attribute word-list selector [class~="x"] so WP's extra layout classes
 * (wp-block-group / is-layout-flow / wp-block-group-is-layout-flow) don't break
 * the match the way [class$="..."] would. Empty badges are hidden so patterns
 * can safely always emit the badge paragraph; content-presence drives visibility. */
.sc-m, .pc-m, .item-m, .card-m { position: relative; }
.sc-badge, .pc-badge, .item-badge, .card-badge, .new-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  z-index: 2;
}
.sc-badge:empty, .pc-badge:empty, .item-badge:empty, .card-badge:empty, .new-badge:empty { display: none; }

/* Filter tabs row — generic styling for any .shop-filter / .category-filter
 * etc. — simple flex row of pill-shaped items. First pill is treated as active
 * via the :first-child selector; patterns that want a different active choice
 * add a dedicated class. */
.shop-filter { gap: 12px; margin: 40px 0; }
.shop-filter > * {
  padding: 8px 20px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  cursor: pointer;
  background: var(--wp--preset--color--grey-1, #efefed);
  color: var(--wp--preset--color--foreground, #111);
}
.shop-filter > :first-child {
  background: var(--wp--preset--color--foreground, #111);
  color: var(--wp--preset--color--base, #fff);
}

/* Generic FAQ / accordion styling for wp:details blocks. The pattern emits native
 * <details><summary> elements; the theme-assembler owns the visual shell:
 *
 *   - Hide the browser's default triangle marker (list-style: none)
 *   - Lay summary out as a flex row: question text left, +/- toggle icon right
 *   - Swap the icon when the <details> has the [open] attribute
 *   - Border-bottom on each item as a separator
 *   - Content padding + muted answer colour
 *
 * Works without !important because our selectors target block-level classes
 * (.wp-block-details) and pseudo-elements, which have the same or higher
 * specificity than WP's own block rules. Works for any fixture using wp:details. */
details.wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--grey-2, #e0dfdb);
  padding: 24px 0;
}
details.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--foreground, #111);
  padding: 4px 0;
}
details.wp-block-details > summary:focus,
details.wp-block-details > summary:focus-visible { outline: none; }
details.wp-block-details > summary::-webkit-details-marker { display: none; }
details.wp-block-details > summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--wp--preset--color--grey-6, #6f6e6a);
  transition: transform 0.2s ease;
}
details.wp-block-details[open] > summary::after {
  content: "−";
}
details.wp-block-details[open] > summary {
  padding-bottom: 12px;
}
details.wp-block-details > :not(summary) {
  color: var(--wp--preset--color--grey-6, #6f6e6a);
  line-height: 1.65;
  max-width: 780px;
}

/* Generic contact-form styling for the form-stamper output (M5.10d). Pattern
 * emits a <!-- FORM_BLOCK:fields --> marker inside a core/html block; the
 * stamper replaces it with a real <form class="contact-form-card"> built from
 * section.content.fields. No plugin required to render — theme CSS paints the
 * form on its own. action="" posts back to self; developer wires up CF7 /
 * WPForms / custom endpoint to actually process submissions. */
.contact-form-card {
  background: var(--wp--preset--color--cream, #f5efe6);
  padding: 48px 44px;
  border-radius: var(--wp--custom--radius--card, 12px);
}
.contact-form-title {
  font-size: var(--wp--preset--font-size--large, 28px);
  margin: 0 0 6px;
  color: var(--wp--preset--color--foreground, #111);
}
.contact-form-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--wp--preset--color--grey-6, #6f6e6a);
  margin: 0 0 36px;
}
.contact-form-card .fg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.contact-form-card .fg label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-6, #6f6e6a);
}
.contact-form-card .fg input,
.contact-form-card .fg select,
.contact-form-card .fg textarea {
  font: inherit;
  padding: 12px 14px !important;
  border: 1px solid var(--wp--preset--color--grey-2, #e0dfdb) !important;
  border-radius: 6px !important;
  background: var(--wp--preset--color--base, #fff) !important;
  color: var(--wp--preset--color--foreground, #111) !important;
  width: 100%;
  box-sizing: border-box;
}
.contact-form-card .fg textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form-card .fg input:focus,
.contact-form-card .fg select:focus,
.contact-form-card .fg textarea:focus {
  outline: 2px solid var(--wp--preset--color--foreground, #111);
  outline-offset: -1px;
  border-color: transparent;
}
.contact-form-submit {
  width: 100%;
  padding: 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--wp--preset--color--foreground, #111);
  color: var(--wp--preset--color--base, #fff);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  margin-top: 8px;
}
.contact-form-submit:hover {
  opacity: 0.9;
}

/* M7.11 — site navigation. Header uses native wp:navigation block; the responsive
 * overlay (mobile hamburger, focus trap, ESC-to-close) is handled by core/navigation.
 * Theme-assembler only contributes minor link-colour overrides for the transparent
 * header variant — see the .site-header--transparent block below for those.
 */

/* Reveal-on-scroll animations (M7.10). reveal-stamper adds the "reveal" class to
 * the outer wrapper of every section block in inc/page-content.php; reveal.js
 * attaches an IntersectionObserver that adds ".in" when the element scrolls into
 * view, which triggers the transition.
 *
 * Three movement variants (.reveal default fade-up, .reveal-l slide-from-left,
 * .reveal-r slide-from-right) and a delay scale (.reveal-d2..d6) so a future
 * pattern audit can produce cascading fade-ins on grid children. Default .reveal
 * is fade-up — the most universal and least prone to clipping at viewport edges.
 *
 * prefers-reduced-motion: reduce short-circuits the animation: elements appear
 * in their final state immediately. Accessibility baseline; matches the OS
 * "Reduce motion" toggle. */
.reveal,
.reveal-l,
.reveal-r {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal { transform: translateY(36px); }
.reveal-l { transform: translateX(-40px); }
.reveal-r { transform: translateX(40px); }
.reveal.in,
.reveal-l.in,
.reveal-r.in {
  opacity: 1;
  transform: none;
}
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.22s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.42s; }
.reveal-d6 { transition-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-l,
  .reveal-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* M7.11 — wp:navigation styling. Header carries the navigation block, so link
 * typography is overridden here to match prototype convention (uppercase tracking,
 * 13px). The transparent-variant link colour rules further down catch <a>
 * elements inside .wp-block-navigation automatically — same selector depth. */
.site-header .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Ensure the responsive (mobile) overlay paints opaque so the menu is readable
 * even on dark transparent headers. WP defaults the overlay background to white
 * with foreground text — match that explicitly so theme-level link overrides
 * (white at rest, dark on scroll) don't leak through into the open overlay.
 *
 * Width/inset overrides: when .site-header has position:fixed it becomes the
 * containing block for descendant position:fixed elements. WP's overlay relies
 * on inset:0 + position:fixed → which prefers the viewport, but the fixed-header
 * ancestor intercepts and sizes the overlay to the header's content-box (~311px
 * on a 375px viewport with 32px padding). Force 100vw + 100vh and viewport-anchor
 * insets so the overlay covers the screen regardless of ancestor positioning. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--foreground, #111);
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  inset: 0 !important;
  padding: 0 !important;
  z-index: 1000;
}
/* Inside the overlay, force every wrapper to fill the container and apply
 * comfortable padding on the innermost content layer. Doing this at content
 * level (not at the overlay container) keeps the close button — which is a
 * sibling of the content wrapper — anchored to the overlay's edges. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 80px 32px 32px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  padding: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--foreground, #111) !important;
  font-size: 22px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Close (×) button — pin to the top-right of the overlay. position:absolute
 * resolves against .wp-block-navigation__responsive-container (which has the
 * iAPI identity transform → it's the containing block). Overlay is 100vw, so
 * top:24px / right:24px lands inside the viewport's top-right corner. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  color: var(--wp--preset--color--foreground, #111) !important;
  z-index: 1001;
}

/* WP admin bar pushes <html> down by 46px on mobile / 32px on desktop. Our
 * overlay is position:fixed with inset:0 → it ignores html margin-top and ends
 * up underneath the admin bar. Offset the overlay to clear it for logged-in users. */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
  top: 46px !important;
  height: calc(100vh - 46px) !important;
  height: calc(100dvh - 46px) !important;
}
@media screen and (min-width: 783px) {
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
  }
}

.site-header.site-header--transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 72px;
  background: transparent;
  transition: background 0.28s ease, box-shadow 0.28s ease, backdrop-filter 0.28s ease;
}

.site-header.site-header--transparent a { color: rgba(255, 255, 255, 0.85); }
.site-header.site-header--transparent a:hover { color: #ffffff; }

.site-header.site-header--transparent.site-header--scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.site-header.site-header--transparent.site-header--scrolled p,
.site-header.site-header--transparent.site-header--scrolled a {
  color: var(--wp--preset--color--foreground, #111) !important;
}

/* Inner pages (not the home page) have no hero — keep the header solid at rest. */
body:not(.home) .site-header.site-header--transparent {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}
body:not(.home) .site-header.site-header--transparent p,
body:not(.home) .site-header.site-header--transparent a {
  color: var(--wp--preset--color--foreground, #111) !important;
}

/* Hero cover section — extends under the transparent fixed nav (100vh), content offset down */
.wp-block-cover.is-hero-section {
  min-height: 100vh;
}
.wp-block-cover.is-hero-section .wp-block-cover__inner-container {
  padding-top: 72px;
}

/* Pages without a hero still need space for the fixed nav (page-header etc.) */
main > .wp-block-group:first-child:not(.is-hero-section),
main > .wp-block-cover:first-child:not(.is-hero-section) {
  padding-top: calc(72px + var(--wp--preset--spacing--60, 48px));
}