/*
Theme Name: Beaupage
Theme URI: https://example.com/
Author: Salon's Lab
Description: 美容・サロン向けのランディングページ専用ブロックテーマ。ヒーロー・悩み・解決・選ばれる理由・ご利用の流れ・お客様の声・強み・キャンペーン・FAQ・オーナー紹介・アクセスまで、LP1枚分のセクションをパターンとして収録。ヘッダーからフッター・スマホ固定CTAバーまでページ本文で組み立てるので、クライアントは通常のページ編集ですべて調整できます。配色は theme.json と4つのカラースタイル（暖色／寒色／ローズ／グリーン）でワンクリック着せ替え。編集ロックはなく、崩れても各セクションを削除して入れ直せます。LocalBusiness／HairSalon の構造化データ（JSON-LD）を出力しSEO/MEOに対応。Meta広告の受け皿となるスマホ流入LPを想定した設計です。
Version: 1.7.3
Requires at least: 6.5
Tested up to: 6.8
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: salon-lp
Tags: full-site-editing, block-patterns, landing-page, one-column, custom-colors, custom-menu
*/

/*
 * Almost all styling lives in theme.json (design tokens).
 * Only put here what theme.json cannot express.
 */

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Sticky footer CTA bar — shown on mobile & tablet (main devices), hidden on wide desktop.
   1280px covers iPad landscape (1180–1366px); plain "tablet" breakpoints like 1024px do not.
   Background follows the accent dial, so it re-skins with the theme color. */
.slp-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: none;
  background: var(--wp--preset--color--accent);
  padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.14);
}
.slp-stickybar .wp-block-buttons { margin: 0; gap: 0.5rem; }
.slp-stickybar .wp-block-button { flex: 1 1 0; margin: 0; }
.slp-stickybar .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
@media (max-width: 1280px) {
  .slp-stickybar { display: block; }
  body { padding-bottom: 5rem; }
}

/* Hero height: vh includes the collapsed mobile URL bar, so 78vh can
   overflow the first view on phones. Prefer svh where supported.
   !important is needed because the cover block writes min-height inline. */
@supports (min-height: 1svh) {
  .slp-hero { min-height: 78svh !important; }
}

/* Hero text sits over a dimmed photo, so it defaults to light. The colour
   is set here (not baked onto the blocks) so the client can freely recolour
   the hero eyebrow / headline / sub-copy — a colour picked in the editor
   overrides this default. */
.slp-hero .wp-block-cover__inner-container { color: var(--wp--preset--color--paper); }

/* Centered LP headings: balance line lengths and (where supported)
   wrap Japanese at phrase boundaries instead of mid-word */
h1, h2, h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* Hover & focus: the :hover in theme.json loses to preset background
   classes (they ship with !important), so buttons with an explicit
   background (hero, CTA band, sticky bar) had no hover feedback at all.
   One restrained rule set here covers every button consistently:
   light buttons dim slightly, ink buttons lift slightly. */
.wp-block-button__link {
  transition: filter 0.18s ease, background-color 0.18s ease;
}
.wp-block-button__link:hover {
  filter: brightness(0.94);
}
.wp-block-button__link.has-ink-background-color:hover {
  filter: brightness(1.9);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* Forward reservation CTAs: socie puts a small right-pointing chevron on
   its "予約はこちら" buttons. Draw it in CSS (no icon font) on the web
   CTAs only — the arrow reads as "go / proceed", so tel buttons keep none.
   Asymmetric right padding mirrors socie's 15px/30px button. */
.slp-cta--web a.wp-block-button__link {
  position: relative;
  padding-right: 2.6rem;
}
.slp-cta--web a.wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.35rem;
  width: 0.42em;
  height: 0.42em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.85;
}

/* Image slots: every image with a reserved aspect-ratio box (the guide
   placeholders and, once replaced, the uploaded photos) fills that box
   edge to edge. Without this, an SVG guide renders at its own intrinsic
   size and looks too small; this makes guide and real photo behave the
   same in every slot (reasons, strengths, owner, flow, before/after). */
.wp-block-image img[style*="aspect-ratio"] { width: 100%; height: 100%; object-fit: cover; }

/* Map embed slot (access section). Google hands out its embed code with
   width/height attributes baked in — typically 600x450. Pasted into the
   reserved ratio box, which is only as tall as its padding and centres what
   it holds, a 450px iframe overflowed 114px above and below and painted over
   the reservation CTA sitting directly above it. Invisible on desktop, where
   the map and the CTA are side by side in separate columns; obvious on a
   phone, where the columns stack.

   Matched by class for new markup and by the inline ratio for pages built
   before the class existed — pattern edits do not reach content already
   inserted. !important because a pasted embed carries its own inline height.
   overflow:hidden is the backstop: whatever is dropped in here, it can no
   longer paint outside its slot. */
.slp-mapbox,
.wp-block-column [style*="padding-top:66%"] {
  position: relative;
  overflow: hidden;
}
.slp-mapbox > span,
.wp-block-column [style*="padding-top:66%"] > span { position: absolute; inset: 0; }
.slp-mapbox iframe,
.wp-block-column [style*="padding-top:66%"] iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Access store-info table: the zebra stripes + full cell grid read as a
   dated spreadsheet. Replace with a clean hairline list — thin rules
   between rows only, serif (Mincho) values — closer to socie's shop info. */
.wp-block-table.slp-infotable table { border-collapse: collapse; width: 100%; }
.wp-block-table.slp-infotable th,
.wp-block-table.slp-infotable td {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 0.95rem 0.2rem;
  text-align: left;
  vertical-align: top;
  word-break: normal;
}
.wp-block-table.slp-infotable tr:last-child th,
.wp-block-table.slp-infotable tr:last-child td { border-bottom: 0; }
.wp-block-table.slp-infotable th {
  width: 6em;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--graphite);
}
.wp-block-table.slp-infotable td {
  font-family: var(--wp--custom--dial--display-font);
  color: var(--wp--preset--color--ink);
}

/* Typeface rule: all headings are Mincho (the display dial). FAQ questions
   use the native <summary> (not an h-tag), so bring them onto the dial here
   to keep every heading-level element on the same serif. Body, buttons,
   eyebrow labels and table labels stay sans. */
.wp-block-details summary {
  font-family: var(--wp--custom--dial--display-font);
}

/* "非表示" style. On the front this file is followed by an inline
   display:none (functions.php) that removes the block entirely. In the
   editor there is no such inline rule, so the block stays visible but
   dimmed and outlined — the client can still select it and switch the
   style back to show it. */
.is-style-slp-hidden {
  opacity: 0.4;
  outline: 1px dashed var(--wp--preset--color--mist);
  outline-offset: -1px;
}

/* Section color styles — background and text always change together, so
   picking any of these from the block Styles panel can't break contrast.
   These replace the old per-pattern backgroundColor/textColor attributes;
   a plain CSS rule here beats WP's :where()-scoped (0 specificity) global
   heading color without needing !important. */
.wp-block-group.is-style-slp-standard { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.wp-block-group.is-style-slp-surface  { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }

.wp-block-group.is-style-slp-invert { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

.wp-block-group.is-style-slp-accent { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); }
/* An accent-gold label or hairline is invisible on an accent-gold section —
   flip it to white instead of letting it disappear. Higher specificity
   than core's own .has-accent-color rule wins even though both carry
   !important. */
.wp-block-group.is-style-slp-accent .has-accent-color { color: var(--wp--preset--color--white) !important; }
.wp-block-group.is-style-slp-accent .has-accent-background-color { background-color: var(--wp--preset--color--white) !important; }

.wp-block-group.is-style-slp-blush { background-color: #ecdad4; color: var(--wp--preset--color--ink); }
.wp-block-group.is-style-slp-sand  { background-color: #ece1cf; color: var(--wp--preset--color--ink); }
.wp-block-group.is-style-slp-sage  { background-color: #dde2d6; color: var(--wp--preset--color--ink); }
.wp-block-group.is-style-slp-mist  { background-color: #d9e1e3; color: var(--wp--preset--color--ink); }

/* Body alignment — "中央配置の左揃え".

   Centred *placement*, left-aligned *lines*. Plain text-align:left would
   flush the copy against the left edge of the 680px column and leave it
   visibly detached from the centred heading above; fit-content shrinks the
   box to its longest line and the auto inline margins put it back in the
   middle, so the block still reads as centred while every line starts from
   the same left edge.

   Only <p>, so headings, buttons, table cells and FAQ summaries keep their
   own alignment. Eyebrow labels are paragraphs too, but they carry the
   label-size dial and belong centred, so they are excluded.

   Set per section from the block Inspector (本文レイアウト) — see
   assets/js/section-align.js. Deliberately an attribute rather than a block
   style: WordPress keeps one active block style per block, and every section
   already carries a colour style, so a style-based control would drop the
   background.

   Both rules sit one class above the site-wide rule functions.php emits, so
   a section's own choice beats the Customizer toggle without !important. The
   centre override is last so a section inside a left-aligned parent wins the
   tie. The :root prefix is required: WordPress 7.0 emits
   ":root .has-text-align-center" at (0,2,0), and without it these lose on
   text-align while still applying their widths — the feature then looks
   half-broken rather than off.

   The copy in these patterns is written with deliberate line breaks, which
   is what gives fit-content something to shrink to. A paragraph left to wrap
   on its own is wider than the column, so it stays full width and simply
   left-aligns — a sane fallback, but worth knowing. */
:root .wp-block-group.slp-textleft p:not([style*="dial--label-size"]) {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
:root .wp-block-group.slp-textcenter p:not([style*="dial--label-size"]) {
  width: auto;
  margin-inline: 0;
  text-align: center;
}

/* Numbered step marker for the "flow" pattern.
   The marker sits in a nowrap flex row beside the step's copy. Once a photo
   goes into that column the row runs out of width, and the browser shrinks
   whichever flex items it is allowed to — squashing the circle into an oval.
   flex:0 0 auto opts the marker out of that, and min-width:0 lets the copy
   column absorb the pressure instead of overflowing (a flex item defaults to
   min-width:auto, so it would otherwise refuse to shrink). */
.slp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.slp-step__num + .wp-block-group { min-width: 0; }