/* ==========================================================================
   Flyerboyamisty — decorations for the Japanese design.
   Colours, fonts and sizes live in theme.json (editable in Appearance → Editor → Styles).
   This file adds the extras: wave pattern, red labels, red ticks, stamps, cards.
   Loaded on the website AND inside the editor, so what you edit is what you get.
   ========================================================================== */

/* Sections touch each other (no white gaps between coloured bands) */
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.fb-home > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 90px; }

/* Coloured words (WordPress "text colour" marks) never get a yellow highlight */
mark.has-inline-color { background-color: transparent; }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.fb-header { border-top: 4px solid var(--wp--preset--color--shu); border-bottom: 1px solid var(--wp--preset--color--sand); }
.fb-brand .wp-block-site-title a { text-decoration: none; }
.fb-wordmark { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; line-height: 1; }
.fb-wordmark a { color: var(--wp--preset--color--sumi); text-decoration: none; }
.fb-footer .fb-wordmark a { color: var(--wp--preset--color--washi); }
.fb-nav a { text-decoration: none; }
.fb-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--shu); }
.fb-header-btn .wp-block-button__link { padding: 11px 18px; font-size: 12px; }
@media (max-width: 700px) {
	.wp-block-buttons.fb-header-btn { display: none; }
	.fb-header .fb-wordmark { letter-spacing: .24em; font-size: 12px; }
}

/* ---------- Footer ---------- */
.fb-footer a { color: var(--wp--preset--color--washi); text-decoration: none; }
.fb-footer a:hover { color: var(--wp--preset--color--shu); }
.fb-footer .wp-block-site-logo img { filter: brightness(0) invert(1); }
.fb-footer .wp-block-site-title a { color: var(--wp--preset--color--washi); }
.fb-footer .fb-nav { font-size: 13px; }

/* ---------- Red label: "市場 · The Market" (Paragraph → Styles → Red label) ---------- */
p.is-style-fb-label {
	color: var(--wp--preset--color--shu);
	font-size: 13px; font-weight: 700; line-height: 1.5;
	letter-spacing: var(--wp--custom--label--tracking, .26em); text-transform: uppercase;
}
p.is-style-fb-label::before {
	content: ""; display: inline-block; vertical-align: middle;
	width: 34px; height: 2px; margin: -3px 14px 0 0; background: currentColor;
}
p.is-style-fb-label mark { font-family: var(--wp--preset--font-family--mincho); letter-spacing: .12em; white-space: nowrap; }

/* ---------- Big red kanji numeral (Paragraph → Styles → Big red kanji) ---------- */
p.is-style-fb-kanji {
	font-family: var(--wp--preset--font-family--mincho); font-weight: 800;
	font-size: 60px; line-height: 1; color: var(--wp--preset--color--shu); margin-bottom: 18px;
}

/* ---------- Red tick list (List → Styles → Red ticks) ---------- */
ul.is-style-fb-ticks { list-style: none; padding-left: 0; }
ul.is-style-fb-ticks li {
	position: relative; padding: 10px 0 10px 30px; font-weight: 500; line-height: 1.55;
	border-bottom: 1px dashed var(--wp--preset--color--sand);
}
ul.is-style-fb-ticks li:last-child { border-bottom: 0; }
ul.is-style-fb-ticks li::before {
	content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px;
	background: var(--wp--preset--color--shu);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-sumi-background-color ul.is-style-fb-ticks li,
.fb-panel ul.is-style-fb-ticks li { border-bottom-color: var(--wp--preset--color--line-dark); }

/* ---------- Image with red shadow (Image → Styles → Red shadow) ---------- */
.wp-block-image.is-style-fb-shadow img { box-shadow: 18px 18px 0 var(--wp--preset--color--shu); }
@media (max-width: 781px) { .wp-block-image.is-style-fb-shadow img { box-shadow: 10px 10px 0 var(--wp--preset--color--shu); } }
.fb-stamp img { width: 92px; height: auto; }

/* ---------- Wave backgrounds (Group → Styles → Wave …) ---------- */
.is-style-fb-wave { background-image: url("../img/seigaiha.svg"); }
.is-style-fb-wave-sand { background-image: url("../img/seigaiha-sand.svg"); }
.is-style-fb-wave-dark { background-image: url("../img/seigaiha-dark.svg"); }
.fb-footer.is-style-fb-wave-dark { background-image: linear-gradient(180deg, var(--wp--preset--color--sumi) 0%, rgba(22, 19, 15, .9) 100%), url("../img/seigaiha-dark.svg"); }

/* Hero: soft wave band along the bottom */
.fb-hero { position: relative; overflow: hidden; }
.fb-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; opacity: .7; pointer-events: none;
	background: url("../img/seigaiha.svg");
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 75%); mask-image: linear-gradient(180deg, transparent, #000 75%);
}
.fb-hero > * { position: relative; z-index: 1; }

/* Black band */
.fb-band-text { font-size: 15px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.fb-band-text mark { font-family: var(--wp--preset--font-family--mincho); letter-spacing: .1em; white-space: nowrap; }
@media (max-width: 600px) { .fb-band-text { font-size: 12px; letter-spacing: .16em; } }

/* Japanese title (酒田コード) */
.fb-jp-title { font-weight: 800; line-height: 1 !important; letter-spacing: .06em; color: var(--wp--preset--color--sumi); margin-bottom: 4px; }
.fb-jp-small { letter-spacing: .24em; font-weight: 700; margin-top: 6px !important; }

/* Offer panel */
.fb-panel { position: relative; overflow: hidden; }
.fb-panel::after {
	content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px;
	border-radius: 50%; background: url("../img/seigaiha-dark.svg"); pointer-events: none; z-index: 0;
}
.fb-panel > * { position: relative; z-index: 1; }
@media (max-width: 781px) { .fb-panel::after { display: none; } }

/* ---------- Pillars & cards (Column → Styles) ---------- */
.wp-block-column.is-style-fb-pillar { border-top: 2px solid var(--wp--preset--color--sumi); padding-top: 26px; }
.wp-block-column.is-style-fb-pillar h3 { margin-bottom: 0; line-height: 1.3; }
.wp-block-column.is-style-fb-card {
	position: relative; background: rgba(35, 30, 24, .95); border: 1px solid var(--wp--preset--color--line-dark);
	padding: 34px 30px 30px; transition: transform .35s ease, border-color .35s ease;
}
.wp-block-column.is-style-fb-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 44px; height: 4px; background: var(--wp--preset--color--shu); }
.wp-block-column.is-style-fb-card:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--shu); }
.fb-level { letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--muted); }
.fb-card-link a { color: #E36A4F; text-decoration: none; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fb-card-link a:hover { color: var(--wp--preset--color--white); }

/* Signature line */
.fb-sign { font-size: 13px; font-weight: 700; letter-spacing: .5em; color: var(--wp--preset--color--sumi); }

/* ---------- Buttons: outline style ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--sumi); border: 1.5px solid var(--wp--preset--color--sumi);
	padding: 18px 30px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--sumi); color: var(--wp--preset--color--washi); }
.wp-block-button__link { transition: background .25s, color .25s, transform .25s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
	.fb-home .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.fb-home .wp-block-button { width: 100%; }
	.fb-home .wp-block-button__link { width: 100%; text-align: center; }
}

/* Book Two: show the picture first on phones */
@media (max-width: 781px) { .wp-block-columns.fb-reverse-mobile { flex-direction: column-reverse; } }

/* ---------- Price (shortcode [fba_price]) ---------- */
.fba-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.fba-price__amount { font-family: var(--wp--preset--font-family--mincho); font-weight: 800; font-size: clamp(44px, 5vw, 58px); line-height: 1; color: var(--wp--preset--color--washi); }
.fba-price__amount del { font-size: .45em; color: var(--wp--preset--color--muted); margin-right: 8px; }
.fba-price__amount ins { text-decoration: none; }
.fba-price__note { font-size: 14px; color: #A89C88; letter-spacing: .06em; }

/* ---------- Newsletter form (shortcode [fba_newsletter]) ---------- */
.subscribe { display: flex; border: 1.5px solid var(--wp--preset--color--sumi); background: var(--wp--preset--color--washi); }
.subscribe input[type="email"] { flex: 1; min-width: 0; border: 0; padding: 0 20px; font: inherit; font-size: 16px; background: transparent; color: var(--wp--preset--color--sumi); }
.subscribe input[type="email"]:focus { outline: none; }
.subscribe:focus-within { box-shadow: 0 0 0 3px rgba(194, 59, 34, .25); }
.subscribe button {
	border: 0; margin: -1.5px -1.5px -1.5px 0; cursor: pointer; padding: 18px 26px;
	background: var(--wp--preset--color--shu); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.subscribe button:hover { background: var(--wp--preset--color--shu-dark); }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
.fba-notice { padding: 12px 18px; margin: 0 0 12px; font-weight: 500; }
.fba-notice--ok { background: #E6EEDC; color: #2F5320; }
.fba-notice--err { background: #F6DFD7; color: #8A2414; }
@media (max-width: 480px) {
	.subscribe { flex-direction: column; }
	.subscribe input[type="email"] { padding: 16px; }
	.subscribe button { margin: 0; }
}

/* ---------- WooCommerce touches ---------- */
.woocommerce .wp-element-button, .wc-block-components-button { border-radius: 2px; }

/* ---------- Picture sizes (match the original design) ---------- */
.fb-hero .wp-block-image img { width: 100%; max-width: 600px; height: auto; }
.wp-block-image.fb-book-img img { width: 100%; max-width: 470px; height: auto; }
.wp-block-image.fb-offer-img img { width: 100%; max-width: 480px; height: auto; }
.wp-block-image.fb-author-img img { width: 100%; max-width: 500px; height: auto; }
.wp-block-columns.fb-offer-cols { gap: clamp(32px, 6vw, 90px); }
.fb-panel .wp-block-column > .wp-block-list { margin-top: 18px; margin-bottom: 28px; }
.fb-panel .wp-block-column > .wp-block-shortcode { margin-bottom: 22px; }