/*
Theme Name: Saint FAUCON
Description: サンフォコン(ジビエフレンチ)用のブロックテーマ。バーガンディとゴールドを基調に、文章・画像・メニュー・ボタンのリンクをすべてサイトエディタで編集できます。
Version: 4.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: saint-faucon
*/

/* ---------------------------------------------------------
   Base
--------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

.wp-site-blocks > * { margin-block-start: 0 !important; }

/* Sections sit flush against each other */
.bt-hero,
.bt-banner,
.bt-section { margin-block: 0 !important; }

.bt-section { padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px); }

/* Links inherit colour on dark sections */
.bt-chef a,
.bt-info a,
.bt-banner a,
.bt-hero a,
.site-footer a,
.site-header a { color: inherit; }

/* Signature motif: a hairline gold frame (block style "金の細枠") */
.is-style-gold-frame { position: relative; }
.is-style-gold-frame::after {
	content: "";
	position: absolute;
	inset: clamp(14px, 2.4vw, 28px);
	border: 1px solid rgba(209, 174, 98, 0.6);
	pointer-events: none;
	z-index: 3;
}
.bt-photo.is-style-gold-frame::after { inset: 14px; border-color: rgba(209, 174, 98, 0.75); }

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
/* Header stays at the top while scrolling.
   Front end: fixed to the top of the screen (works regardless of parent elements).
   Editor canvas: sticky, so it does not cover the content while editing. */
:root { --bt-header-h: 64px; }

.bt-header-inner { min-height: var(--bt-header-h); box-sizing: border-box; border-bottom: 1px solid rgba(209, 174, 98, 0.45); }

body:not(.editor-styles-wrapper) .wp-site-blocks > header,
body:not(.editor-styles-wrapper) header.wp-block-template-part,
body:not(.editor-styles-wrapper) .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
}
body:not(.editor-styles-wrapper) .wp-site-blocks { padding-top: var(--bt-header-h); }

.admin-bar:not(.editor-styles-wrapper) .wp-site-blocks > header,
.admin-bar:not(.editor-styles-wrapper) header.wp-block-template-part,
.admin-bar:not(.editor-styles-wrapper) .site-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar:not(.editor-styles-wrapper) .wp-site-blocks > header,
	.admin-bar:not(.editor-styles-wrapper) header.wp-block-template-part,
	.admin-bar:not(.editor-styles-wrapper) .site-header { top: 46px; }
}

.editor-styles-wrapper .site-header { position: sticky; top: 0; z-index: 100; }

/* In-page jumps stop below the fixed header */
html { scroll-padding-top: 80px; }

.bt-header-inner { padding: 14px clamp(20px, 4vw, 48px); align-items: center; }
.bt-header-inner p { margin: 0; }

.bt-logo { margin: 0; line-height: 1.2; }
.bt-logo a {
	font-family: var(--wp--preset--font-family--serif-en);
	font-size: 26px;
	letter-spacing: 0.14em;
	text-decoration: none;
}
.bt-header-right { gap: 28px; align-items: center; }
.bt-reserve-link a {
	font-size: 13px;
	letter-spacing: 0.3em;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold);
	padding-bottom: 2px;
}

/* Full-screen menu */
.wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--wine); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; gap: 0.2em; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif-en);
	font-size: clamp(28px, 5vw, 44px);
	letter-spacing: 0.16em;
	text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold-light); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.wp-block-cover.bt-hero {
	min-height: min(92vh, 900px);
	background: radial-gradient(ellipse at 30% 20%, #7a1a38 0%, #5b0f26 60%, #440b1c 100%);
	text-align: center;
}
.bt-hero__title {
	font-weight: 400;
	font-size: clamp(40px, 8vw, 96px);
	letter-spacing: 0.14em;
	line-height: 1.1;
	animation: bt-hero-in 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bt-hero__copy {
	letter-spacing: 0.3em;
	animation: bt-fade-in 2s 1.4s both;
}
@keyframes bt-hero-in {
	from { opacity: 0; letter-spacing: 0.42em; }
	to   { opacity: 1; letter-spacing: 0.14em; }
}
@keyframes bt-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------
   Sections
--------------------------------------------------------- */
.bt-concept { text-align: center; }
.bt-concept h2 { letter-spacing: 0.12em; margin-bottom: 1.6em; }
.bt-signature {
	font-family: var(--wp--preset--font-family--serif-en);
	font-style: italic;
	font-size: 22px;
	margin-top: 2em;
}
.bt-more { margin-top: 2.4em; font-size: 14px; letter-spacing: 0.12em; }
.bt-concept .bt-more a { color: var(--wp--preset--color--gold-light); }

/* Photos (cover blocks without an image = placeholders; click to add a photo) */
.wp-block-cover.bt-photo {
	min-height: 0;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, #7a1a38, #4d0c20 75%);
}
.wp-block-cover.bt-photo--portrait { aspect-ratio: 3 / 4; }

/* Feature rows */
.bt-features .bt-feature { gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(72px, 10vw, 140px); }
.bt-features .bt-feature:last-child { margin-bottom: 0; }
.bt-label {
	font-family: var(--wp--preset--font-family--serif-en);
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	margin: 0 0 0.3em;
}
.bt-feature h3 { letter-spacing: 0.1em; margin-bottom: 1.2em; }

/* Chef */
.bt-chef .bt-chef__cols { gap: clamp(32px, 6vw, 96px); }
.bt-chef h2 { font-weight: 400; letter-spacing: 0.12em; margin-bottom: 0.8em; }
.bt-awards {
	margin-top: 2em;
	padding-top: 1.4em;
	border-top: 1px solid rgba(209, 174, 98, 0.5);
	font-size: 14px;
	line-height: 1.9;
}
.bt-chef .bt-more a:hover,
.bt-info .bt-more a:hover { color: var(--wp--preset--color--gold-light); }

/* Info */
.bt-info-name { letter-spacing: 0.2em; margin-bottom: clamp(48px, 7vw, 80px); }
.bt-info-cols { gap: 48px clamp(32px, 6vw, 80px); }
.bt-info-title {
	font-size: 24px;
	letter-spacing: 0.14em;
	font-weight: 400;
	border-bottom: 1px solid rgba(209, 174, 98, 0.55);
	padding-bottom: 0.3em;
	margin-bottom: 1em;
	line-height: 1.5;
}
.bt-reserve { margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.bt-tel a { font-family: var(--wp--preset--font-family--serif-en); font-size: 32px; letter-spacing: 0.12em; text-decoration: none; }
.bt-map iframe { display: block; width: 100%; height: clamp(300px, 45vw, 460px); border: 0; }
.bt-map { margin-bottom: clamp(48px, 7vw, 80px); }

/* Buttons */
.wp-block-button__link {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--serif-en);
	font-size: 17px;
	letter-spacing: 0.2em;
	padding: 0.9em 2.6em;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; }
.wp-block-button.is-style-outline > .has-gold-light-color:hover {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--wine);
	border-color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------
   Banner for sub pages
--------------------------------------------------------- */
.bt-banner {
	padding: clamp(80px, 12vw, 130px) 24px clamp(64px, 9vw, 100px);
	text-align: center;
	background: var(--wp--preset--color--wine);
	border-bottom: 1px solid rgba(209, 174, 98, 0.35);
}
.bt-banner__en { font-weight: 400; font-size: clamp(36px, 6vw, 68px); letter-spacing: 0.16em; line-height: 1.2; margin: 0; }
.bt-banner__ja { margin-top: 18px; font-size: 14px; letter-spacing: 0.3em; }

/* ---------------------------------------------------------
   Footer / plain pages
--------------------------------------------------------- */
.bt-footer { padding: 72px 24px 40px; border-top: 1px solid rgba(209, 174, 98, 0.45); }
.bt-footer__tag { font-size: 13px; letter-spacing: 0.3em; margin: 0; }
.bt-footer__logo { font-family: var(--wp--preset--font-family--serif-en); font-size: 38px; letter-spacing: 0.16em; margin: 0.1em 0 0; line-height: 1.3; }
.bt-footer__sub { font-size: 14px; letter-spacing: 0.3em; margin: 0; }
.bt-footer__cols { gap: 40px; margin-top: 3rem; text-align: left; font-size: 14px; line-height: 2; }
.bt-footer__cols p { margin: 0 0 1em; }
.bt-footer__tags { margin: 2.5rem 0 0; font-size: 12px; opacity: 0.7; line-height: 1.9; }
.bt-footer__copy { margin: 1.5rem 0 0; font-size: 12px; letter-spacing: 0.1em; }
.bt-footer a { text-decoration: underline; text-underline-offset: 3px; }

.bt-plain { padding: clamp(64px, 10vw, 120px) 24px; }

/* ---------------------------------------------------------
   Saint FAUCON additions
--------------------------------------------------------- */
.bt-hero__kicker { font-size: 14px; letter-spacing: 0.4em; margin-bottom: 1.2em; }
.bt-hero__copy { line-height: 2; }

/* Intro text: a little narrower and calmer than the section default */
.bt-concept p { margin-bottom: 1.6em; }
.bt-concept a { color: var(--wp--preset--color--gold-light); text-underline-offset: 3px; }

/* Reservation band */
.wp-block-cover.bt-band {
	min-height: 360px;
	padding: clamp(56px, 8vw, 96px) 24px;
	background: linear-gradient(160deg, #6b1530, #5b0f26 70%);
}
.wp-block-cover.bt-band--closing { min-height: 300px; background: linear-gradient(200deg, #5b0f26, #4d0c20 80%); }
.bt-band .wp-block-buttons { gap: 16px; }
.bt-band .bt-buttons-main { margin-bottom: 1.6em; }
.bt-band .bt-buttons-main .wp-block-button__link { font-size: 22px; padding: 1em 3.6em; }
.bt-buttons-sub { gap: 16px; }
.bt-buttons-sub .wp-block-button__link { font-size: 15px; letter-spacing: 0.18em; padding: 0.8em 2em; }

/* Seasons */
.bt-seasons-title { letter-spacing: 0.14em; margin-bottom: clamp(56px, 8vw, 96px); }
.bt-season-note { font-size: 14px; margin-top: 1.6em; }

/* Photos that are not 4:5 */
.wp-block-cover.bt-photo--wide { aspect-ratio: 16 / 9; margin-bottom: clamp(40px, 6vw, 72px); }

/* Prose pages (ジビエについて / お問い合わせ) */
.bt-prose p { margin-bottom: 1.6em; }
.bt-prose h2 { margin-top: clamp(48px, 7vw, 88px); }
.bt-prose h2:first-child { margin-top: 0; }
.bt-prose h2.has-text-align-center { margin-bottom: 1.6em; }
.bt-contact-h { letter-spacing: 0.12em; border-bottom: 1px solid rgba(209, 174, 98, 0.4); padding-bottom: 0.4em; margin-bottom: 1.2em; }
.bt-price-title { margin-bottom: 0.6em; }
.bt-prose .bt-buttons-sub { margin: 2em 0; }

/* Owner chef */
.bt-profiles { gap: clamp(40px, 6vw, 96px); }
.bt-profile__en { font-size: clamp(26px, 3vw, 36px); font-weight: 400; letter-spacing: 0.1em; margin: 0; }
.bt-profile__jp { letter-spacing: 0.3em; margin: 0 0 1.8em; }
.bt-profiles p { margin-bottom: 1.4em; }

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 781px) {
	.bt-logo a { font-size: 21px; }
	.bt-band .bt-buttons-main .wp-block-button__link { font-size: 18px; padding: 0.9em 2.4em; }
	.bt-footer__logo { font-size: 30px; }
	.bt-header-right { gap: 16px; }
	.bt-reserve-link a { font-size: 12px; letter-spacing: 0.2em; }
	.wp-block-cover.bt-photo { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------
   v4.0.1  Phones: no sideways sway / no left shift, and even season rows
--------------------------------------------------------- */

/* Nothing may push the page wider than the screen. A single over-wide element makes phones
   zoom out and slide the page sideways, which also looks like everything is shifted left. */
html { overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip; touch-action: pan-y pinch-zoom; }
.wp-site-blocks { max-width: 100%; overflow-x: clip; }
.wp-site-blocks > *,
.wp-site-blocks main > * { max-width: 100%; }
.wp-block-cover,
.wp-block-group,
.wp-block-columns,
.wp-block-buttons,
.wp-block-image img { max-width: 100%; }
.wp-block-button__link { max-width: 100%; white-space: normal; }

/* Season rows: identical rhythm for spring, summer, autumn and winter,
   no matter how long the text is. Photo and text are centred on each other,
   and the space between rows is always the same. */
.bt-features .bt-feature { align-items: center; margin-top: 0; margin-bottom: clamp(72px, 10vw, 140px); }
.bt-features .bt-feature:last-child { margin-bottom: 0; }
.bt-feature > .wp-block-column { min-width: 0; }
.bt-feature > .wp-block-column > :first-child { margin-top: 0; }
.bt-feature > .wp-block-column > :last-child { margin-bottom: 0; }
.bt-feature p { margin-top: 0; margin-bottom: 1em; line-height: 2.1; }
.bt-feature .bt-label { margin-bottom: 0.3em; }
.bt-feature h3 { margin-top: 0; margin-bottom: 1.2em; }
.bt-feature .bt-season-note { margin-top: 1.6em; margin-bottom: 0; }

@media (max-width: 781px) {
	/* long words and URLs wrap instead of stretching the page */
	p, h1, h2, h3, h4, li { overflow-wrap: break-word; }

	/* the title can never be wider than the screen */
	.bt-hero__title { font-size: clamp(32px, 10vw, 52px); letter-spacing: 0.08em; }
	.bt-hero__kicker,
	.bt-hero__copy { letter-spacing: 0.16em; }

	/* even padding on both sides */
	.bt-section { padding-left: 20px; padding-right: 20px; }
	.wp-block-cover { padding-left: 20px; padding-right: 20px; }

	/* stacked rows: same gap between photo and text, same space between rows */
	.bt-features .bt-feature { gap: 28px; margin-bottom: 72px; }
	.bt-features .bt-feature:last-child { margin-bottom: 0; }
	.bt-footer { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.bt-hero__title { animation-name: bt-hero-in-sm; }
}
@keyframes bt-hero-in-sm {
	from { opacity: 0; letter-spacing: 0.3em; }
	to   { opacity: 1; letter-spacing: 0.08em; }
}

/* ---------------------------------------------------------
   v4.0.2  Phones: columns always stack at full width
   (fixes season text and other columns shrinking to one character wide)
--------------------------------------------------------- */
@media (max-width: 781px) {
	.bt-features .wp-block-columns,
	.bt-profiles,
	.bt-info-cols,
	.bt-footer__cols {
		display: block !important;
	}
	.bt-features .wp-block-columns > *,
	.bt-profiles > *,
	.bt-info-cols > *,
	.bt-footer__cols > * {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		flex: none !important;
		margin-left: 0;
		margin-right: 0;
		word-break: normal;
	}
	.bt-features .wp-block-columns > * + *,
	.bt-profiles > * + *,
	.bt-info-cols > * + *,
	.bt-footer__cols > * + * { margin-top: 28px; }

	/* text always runs left to right, top to bottom */
	.bt-features,
	.bt-features * { writing-mode: horizontal-tb !important; }
	.bt-features p,
	.bt-features h3 { width: auto; max-width: 100%; }
}

/* ---------------------------------------------------------
   v4.1.0  Header icons (Instagram / LINE / SMS)
--------------------------------------------------------- */
.bt-header-icons { gap: 12px; align-items: center; }
.bt-header-icons .wp-block-image { margin: 0; line-height: 0; }
.bt-header-icons .wp-block-image a { display: block; opacity: 0.9; transition: opacity 0.2s; }
.bt-header-icons .wp-block-image a:hover { opacity: 1; }
.bt-header-icons .wp-block-image img { display: block; width: 22px; height: 22px; max-width: none; }

@media (max-width: 781px) {
	.bt-header-right { gap: 12px; }
	.bt-header-icons { gap: 8px; }
	.bt-header-icons .wp-block-image img { width: 20px; height: 20px; }
	.bt-logo a { letter-spacing: 0.08em; }
}
@media (max-width: 359px) {
	.bt-logo a { font-size: 17px; }
	.bt-header-icons { gap: 6px; }
	.bt-header-right { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bt-hero__title, .bt-hero__copy { animation: none; }
}