/*
Theme Name: Face X Clinic 2026
Theme URI: https://facexcliniclondon.com/
Author: Face X Clinic London
Description: The approved Face X Clinic design with native WordPress publishing.
Version: 1.0.15
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: facex-2026
*/

/* The visual system is built from src/styles.css. These rules only support WP states. */
.np-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fx-space-4, 1rem);
  margin: 0 auto var(--fx-space-12, 3rem);
  padding-inline: var(--fx-space-8, 2rem);
  font-family: var(--sc-font-text);
}
.np-pagination .page-numbers {
  color: var(--sc-accent);
  padding: .5rem;
  text-underline-offset: .25em;
}
.np-pagination .current {
  color: var(--sc-ink);
  font-weight: 800;
}
.np-empty {
  margin: var(--fx-space-12, 3rem) auto;
  max-width: 46rem;
  padding-inline: var(--fx-space-8, 2rem);
  font-family: var(--fx-font-th-body);
  color: var(--sc-ink);
}
.admin-bar .site-bar { top: 48px; }
@media (max-width: 782px) { .admin-bar .site-bar { top: 62px; } }
.np-post__body > img,
.np-post__body figure img { max-width: 100%; height: auto; }
/* Native featured images include width/height attributes; retain the approved CSS ratios. */
.np-item__img,
.np-post__cover { height: auto; }
.np-post__body :where(ul, ol) { padding-inline-start: 1.5em; }
.np-post__body :where(h2, h3, h4) {
  font-family: var(--sc-font-display);
  color: var(--sc-ink);
  margin-block: 1em .25em;
}
.np-post__body :where(a):focus-visible,
.np-pagination a:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 4px;
}

/* The approved desktop pill stays intact; the native disclosure fills its mobile gap. */
.fx26-mobile-menu { display: none; }
@media (max-width: 900px) {
  .site-bar {
    display: grid;
    grid-template-columns: minmax(56px, 1fr) auto minmax(0, 1.7fr);
    gap: 8px;
    padding: 12px;
  }
  .site-bar__mark {
    width: min(100%, 96px);
    justify-self: start;
  }
  .site-bar__cta {
    min-width: 0;
    min-height: 44px;
    max-width: 100%;
    justify-self: end;
    justify-content: center;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }
  .fx26-mobile-menu {
    display: block;
    pointer-events: auto;
    justify-self: center;
  }
  .fx26-mobile-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 68px;
    min-height: 44px;
    padding: 8px 10px;
    list-style: none;
    cursor: pointer;
    color: var(--sc-ink);
    font: 600 14px / 1.2 var(--sc-font-text);
    border: var(--fx-hairline);
    border-radius: var(--fx-radius-pill);
    background: var(--fx-frost);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .fx26-mobile-menu > summary::-webkit-details-marker { display: none; }
  .fx26-mobile-menu > summary svg {
    width: 12px;
    height: 12px;
    flex: none;
  }
  .fx26-mobile-menu[open] > summary svg { transform: rotate(180deg); }
  .fx26-mobile-menu > summary:focus-visible,
  .fx26-mobile-menu__nav a:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 3px;
  }
  .fx26-mobile-menu__nav {
    position: absolute;
    inset: calc(100% - 4px) 12px auto;
    display: grid;
    gap: 2px;
    max-height: min(70dvh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border: var(--fx-hairline);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(24, 24, 27, .14);
  }
  .fx26-mobile-menu:not([open]) > .fx26-mobile-menu__nav { display: none; }
  .fx26-mobile-menu__nav a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3em;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--sc-ink);
    font: 600 15px / 1.4 var(--sc-font-text);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .fx26-mobile-menu__nav a:hover,
  .fx26-mobile-menu__nav a[aria-current="page"] {
    color: var(--sc-accent);
    background: var(--fx-purple-100);
  }
  .tp-rail { top: 76px; }
}

@media (max-width: 760px) {
  .tp-family,
  .tp-family__head,
  .tp-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
  }
  .tp-family__intro,
  .tp-ledger,
  .tp-ledger__row,
  .tp-ledger__main,
  .tp-ledger__sub {
    min-width: 0;
    max-width: 100%;
  }
  .tp-family__head,
  .tp-ledger__name,
  .tp-ledger__detail,
  .tp-ledger__detail-en {
    overflow-wrap: anywhere;
  }
  .tp-ledger__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .tp-ledger__leader { display: none; }
  .tp-ledger__name { line-height: 1.4; }
  .tp-ledger__price {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  .tp-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .tp-rail a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    min-height: 44px;
    white-space: nowrap;
  }
  .admin-bar .tp-rail { top: 138px; }
}