/*
Theme Name:   AKASAKA BAKERY SOYBA
Theme URI:    https://soyba.jp/
Template:     hybridmag
Author:       SOYBA
Description:  Child theme for HybridMag recreating the original soyba.jp homepage and blog (SOYBA COLUMN) design.
Version:      1.0.0
Text Domain:  soyba-child
*/

/* ==========================================================================
   Single light (cream) design — opt out of browser/OS auto dark-mode.
   Without this, Chrome's "force dark" (and similar in other browsers)
   algorithmically inverts the whole cream palette for visitors browsing
   with OS/browser dark mode on, which turns the cream-background logo into
   an ugly bright box (and muddies every other color). Declaring the scheme
   tells the browser "this site manages its own colors, don't invert it."
   The site is intentionally light-only (the theme's own dark toggle is
   disabled), so "only light" is correct rather than "light dark".
   ========================================================================== */
html { color-scheme: only light; }
/* The hero and interior page banner use a 100vw full-bleed breakout; on a
   page with a vertical scrollbar, 100vw is a few px wider than the content
   box, which shows a stray horizontal scrollbar. Clip it at the root. */
html, body { overflow-x: hidden; }

/* ==========================================================================
   Design tokens (recreated from the recovered site content + screenshot)
   ========================================================================== */
:root {
	--soyba-cream: #f7f3ea;
	--soyba-cream-deep: #f1ecdf;
	--soyba-ink: #221f1a;
	--soyba-muted: #6f6a5e;
	--soyba-line: rgba(34, 31, 26, 0.35);
	--soyba-overlay: rgba(20, 16, 10, 0.42);
	--soyba-footer-bg: #ececea;
	--soyba-accent: #b5342a;
	--soyba-heading-font: "Zen Kaku Gothic New", "Noto Sans JP", "Yu Gothic", sans-serif;
	--soyba-body-font: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--soyba-section-gap: clamp(60px, 9vw, 130px);
}

body {
	background: var(--soyba-cream);
	color: var(--soyba-ink);
	font-family: var(--soyba-body-font);
}

a { color: inherit; }

/* ==========================================================================
   Site header / footer — fully owned by this theme (header.php / footer.php),
   not the parent's. Same .soyba-nav-list markup renders in both via
   soyba_nav_menu() in functions.php, so they never drift out of sync.
   ========================================================================== */
.soyba-site-header { background: var(--soyba-cream); border-bottom: 1px solid var(--soyba-line); padding: 18px 24px; }
.soyba-site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.soyba-site-header__logo { display: block; line-height: 0; }
.soyba-site-header__logo a { text-decoration: none; }
/* !important because the_custom_logo() sets explicit width/height HTML
   attributes from the Customizer's stored image dimensions — a plain CSS
   rule loses to those on some browsers' attribute-vs-stylesheet resolution
   otherwise. Also target .custom-logo directly as a backup in case the
   .soyba-site-header__logo descendant match ever breaks again. */
.soyba-site-header__logo img,
.soyba-site-header .custom-logo { height: 42px !important; width: auto !important; }
.soyba-site-header__mark {
	font-family: var(--soyba-heading-font);
	font-weight: 300;
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--soyba-ink);
}

.soyba-nav-list { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.soyba-nav-list li { position: relative; }
.soyba-nav-list a { text-decoration: none; font-size: 13px; letter-spacing: 0.05em; }
.soyba-nav-list a:hover { text-decoration: underline; }

.soyba-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.soyba-menu-toggle span { display: block; width: 100%; height: 1px; background: var(--soyba-ink); }

@media (max-width: 700px) {
	.soyba-menu-toggle { display: flex; }
	.soyba-site-header__nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--soyba-cream);
		border-bottom: 1px solid var(--soyba-line);
		padding: 8px 24px 20px;
	}
	.soyba-site-header { position: relative; }
	.soyba-site-header__nav.is-open { display: block; }
	.soyba-nav-list { flex-direction: column; gap: 16px; padding-top: 8px; }
}

.soyba-footer__inner { max-width: 720px; margin: 0 auto; }
.soyba-footer .soyba-nav-list { justify-content: center; flex-wrap: wrap; margin: 0 0 26px; }
.soyba-footer .soyba-nav-list a { font-size: 12px; }

/* Section rhythm shared by the homepage's stacked blocks */
.soyba-section { padding: var(--soyba-section-gap) 0 0; }
.soyba-divider {
	max-width: 1200px;
	margin: 0 auto;
	border: none;
	border-top: 1px solid var(--soyba-line);
}
.soyba-narrow { max-width: 720px; margin: 0 auto; padding: 0 20px; text-align: center; }

/* Recreated heading treatment used across the old site
   (seen verbatim on the recovered recruit page: class="item catch common_headline rich_font_type3") */
.common_headline.rich_font_type3 {
	font-family: var(--soyba-heading-font);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.6;
}
h2.common_headline.rich_font_type3 {
	font-size: clamp(22px, 3vw, 30px);
	margin: 0 0 28px;
}
h1.common_headline.rich_font_type3 { font-size: clamp(26px, 4vw, 36px); margin: 0; }

.soyba-narrow p,
.soyba-lede { color: var(--soyba-muted); line-height: 2; font-size: 15px; }

/* ==========================================================================
   1. Hero
   ========================================================================== */
/* The original hero was a looping bakery video; ~140MB, not shipped here
   (see README). images/hero-dough.jpg (Pexels, license-free) stands in —
   swap the file for the real photo or a compressed video whenever ready. */
.soyba-hero {
	/* Full-bleed breakout: .soyba-hero now nests inside HybridMag's
	   .content-area.hm-container (~1200px, see header.php). This is the
	   classic 100vw trick to escape that and run edge-to-edge regardless. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	position: relative;
	height: 78vh;
	min-height: 420px;
	max-height: 720px;
	background: #2b2620 url("images/hero-dough.jpg") no-repeat center center / cover;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.soyba-hero__overlay { position: absolute; inset: 0; background: var(--soyba-overlay); }
.soyba-hero__mark {
	position: relative;
	font-family: var(--soyba-heading-font);
	font-weight: 300;
	font-size: clamp(40px, 7vw, 68px);
	letter-spacing: 0.08em;
	color: #fff;
}

.soyba-hero__news {
	position: absolute;
	left: 50%;
	bottom: 10%;
	transform: translateX(-50%);
	background: rgba(247, 243, 234, 0.94);
	padding: 18px 30px;
	max-width: 360px;
	width: 90%;
	text-align: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.soyba-hero__news a { display: block; text-decoration: none; font-size: 14px; letter-spacing: 0.04em; margin-top: 4px; }
.soyba-hero__news time { display: block; font-size: 11px; color: var(--soyba-muted); }

@media (max-width: 600px) {
	.soyba-hero { height: 60vh; }
	.soyba-hero__news { width: 85%; padding: 14px 18px; }
}

/* ==========================================================================
   2. Intro catch-copy ("おいしさがあたらしい。")
   ========================================================================== */
.soyba-intro { padding: var(--soyba-section-gap) 0; }

/* ==========================================================================
   3. Value-prop cards (実際に試す / 正直に伝える / くわしく解説) and
   6. Topic cards (健康・栄養 / 美容・ダイエット / 食品・お取り寄せ) share the
   same dark photo-card component. Topic cards are <a> links; value-prop
   cards are plain <div>s.
   ========================================================================== */
.soyba-grid3 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}
@media (max-width: 767px) {
	.soyba-grid3 { grid-template-columns: 1fr; gap: 16px; padding: 0 24px; }
}

.soyba-card {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #3a332a center / cover no-repeat;
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
}
/* Topic cards are links — give them a gentle hover so they read as clickable. */
a.soyba-card { transition: transform 0.25s ease; }
a.soyba-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(20, 16, 10, 0);
	transition: background 0.25s ease;
}
a.soyba-card:hover { transform: scale(1.015); }
a.soyba-card:hover::after { background: rgba(20, 16, 10, 0.18); }
/* Stronger bottom scrim than the old 42% flat overlay: the value-prop cards
   carry a full paragraph of white text and some images are light at the
   bottom (clean-white soy studio shots), so the text needs a reliable dark
   base to stay legible. Top of the card stays bright to show the photo. */
.soyba-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 16, 10, 0) 20%, rgba(20, 16, 10, 0.5) 58%, rgba(20, 16, 10, 0.84) 100%);
}
.soyba-card__body { position: relative; z-index: 3; padding: 22px 24px; }
.soyba-card__body h3 {
	font-family: var(--soyba-heading-font);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-wrap: balance;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.soyba-card__body p { font-size: 12.5px; line-height: 1.8; margin: 0; opacity: 0.95; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }

/* Soy/food/wellness card imagery, matching the site's actual content.
   These load from the Pexels CDN (free license, no attribution required)
   rather than local files, because the live server's theme /images/ can't be
   replaced through the tools used to edit it — a CDN URL updates instantly.
   Value-prop row (try/honest/explain): a cohesive clean-white soy studio
   series. Topic row (health/beauty/food): varied colorful food shots. */
.soyba-card--try     { background-color: #b8ad97; background-image: url("https://images.pexels.com/photos/4518599/pexels-photo-4518599.jpeg?auto=compress&cs=tinysrgb&w=1200"); }
.soyba-card--honest  { background-color: #bcb2a0; background-image: url("https://images.pexels.com/photos/4518589/pexels-photo-4518589.jpeg?auto=compress&cs=tinysrgb&w=1200"); }
.soyba-card--explain { background-color: #b8ad97; background-image: url("https://images.pexels.com/photos/4518616/pexels-photo-4518616.jpeg?auto=compress&cs=tinysrgb&w=1200"); }
.soyba-card--health  { background-color: #6f7a4a; background-image: url("https://images.pexels.com/photos/6811339/pexels-photo-6811339.jpeg?auto=compress&cs=tinysrgb&w=1200"); }
.soyba-card--beauty  { background-color: #9a6a6a; background-image: url("https://images.pexels.com/photos/7656388/pexels-photo-7656388.jpeg?auto=compress&cs=tinysrgb&w=1200"); }
.soyba-card--food    { background-color: #7c6a4d; background-image: url("https://images.pexels.com/photos/6120237/pexels-photo-6120237.jpeg?auto=compress&cs=tinysrgb&w=1200"); }

/* ==========================================================================
   4. Philosophy ("ベーカリー名に込められた想い")
   ========================================================================== */
.soyba-philosophy { padding: var(--soyba-section-gap) 0; }

/* ==========================================================================
   5. Materials + gallery CTA ("素材へのこだわり")
   ========================================================================== */
.soyba-materials { padding: var(--soyba-section-gap) 0; }
/* Recent-posts feed: a live feed of the latest blog entries, styled as the
   same photo-grid the old "materials" section used for its gallery preview.
   flex + justify-content:center (not grid) on purpose: a grid with fixed
   columns strands a short final row (or a nearly-empty feed, early on)
   against the left edge instead of centering it. */
.soyba-recent-posts {
	max-width: 1200px;
	margin: 44px auto 0;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}
.soyba-recent-posts__item {
	position: relative;
	flex: 0 1 calc(20% - 13px);
	aspect-ratio: 1 / 1;
	background-color: #ded5c0;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: flex-end;
	text-align: center;
	justify-content: center;
	text-decoration: none;
	overflow: hidden;
}
@media (max-width: 900px) { .soyba-recent-posts__item { flex-basis: calc(33.333% - 11px); } }
@media (max-width: 560px) { .soyba-recent-posts__item { flex-basis: calc(50% - 8px); } }
.soyba-recent-posts__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(20, 16, 10, 0.6) 100%);
}
.soyba-recent-posts__caption {
	position: relative;
	font-size: 12px;
	line-height: 1.6;
	color: #fff;
	padding: 10px;
}

.soyba-btn {
	display: inline-block;
	margin-top: 36px;
	padding: 16px 64px;
	border: 1px solid var(--soyba-ink);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.soyba-btn:hover { background: var(--soyba-ink); color: var(--soyba-cream); }
@media (max-width: 480px) { .soyba-btn { padding: 15px 40px; } }

/* ==========================================================================
   7. News strip
   ========================================================================== */
.soyba-news {
	padding: var(--soyba-section-gap) 0 calc(var(--soyba-section-gap) * 0.6);
}
/* flex + justify-content:center, same reasoning as .soyba-recent-posts —
   soyba_news_query() can return 1-3 items and a fixed 3-col grid would
   strand fewer than 3 at the left edge instead of centering them. */
.soyba-news__grid {
	max-width: 1200px;
	margin: 32px auto 0;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.soyba-news__item {
	flex: 0 1 340px;
	border-top: 1px solid var(--soyba-line);
	border-bottom: 1px solid var(--soyba-line);
	padding: 18px 4px;
	text-align: center;
}
/* Explicit rather than relying on inheritance from .soyba-news__item — the
   "no news yet" fallback is just a bare <p>, make its centering unambiguous. */
.soyba-news__item p { margin: 0; text-align: center; color: var(--soyba-muted); }
.soyba-news__item time { display: block; font-size: 11px; color: var(--soyba-muted); margin-bottom: 8px; }
.soyba-news__item a { font-size: 13px; text-decoration: none; line-height: 1.7; }
.soyba-news__item a:hover { text-decoration: underline; }

/* ==========================================================================
   Scroll-to-top chip (small red square seen bottom-right in the screenshot)
   ========================================================================== */
.soyba-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	background: var(--soyba-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 18px;
	z-index: 40;
}

/* ==========================================================================
   Footer content (see footer.php — this theme owns the whole template now,
   HybridMag's own footer markup is never generated in the first place)
   ========================================================================== */
.soyba-footer { background: var(--soyba-footer-bg); padding: 56px 20px 24px; text-align: center; }
.soyba-footer__mark {
	font-family: var(--soyba-heading-font);
	font-weight: 300;
	font-size: 22px;
	letter-spacing: 0.1em;
	margin-bottom: 22px;
}
.soyba-footer__copyright { font-size: 11px; color: var(--soyba-muted); }

/* ==========================================================================
   Recovered subpage content (access / gallery / recruit / privacy-policy …)
   These class names are exactly what's already baked into the recovered
   HTML content next to this theme, so pasting that content into a WP page
   needs no markup rewriting — it picks this styling up as-is.
   ========================================================================== */
.post_content { max-width: 820px; margin: 0 auto; padding: 20px; line-height: 1.9; }
.post_content.clearfix::after { content: ""; display: table; clear: both; }
.post_content .styled_h2 {
	font-family: var(--soyba-heading-font);
	font-size: 22px;
	letter-spacing: 0.06em;
	margin: 48px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--soyba-line);
}
.post_content .styled_h3 {
	font-size: 18px;
	letter-spacing: 0.04em;
	margin: 36px 0 16px;
	padding-left: 12px;
	border-left: 3px solid var(--soyba-accent);
}
.post_content .styled_h4 { font-size: 15px; margin: 26px 0 10px; color: var(--soyba-muted); }
.post_content img { max-width: 100%; height: auto; }

/* page_header: the dark hero banner used on interior pages like SOYBA COLUMN.
   Same 100vw breakout as .soyba-hero — see the comment there. */
#page_header {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	position: relative;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #3a332a;
}
#page_header .bg_image {
	position: absolute;
	inset: 0;
	background-position: center top;
	background-size: cover;
}
#page_header .overlay {
	position: absolute;
	inset: 0;
	background: var(--soyba-overlay);
}
#page_header .headline_area { position: relative; text-align: center; color: #fff; }
#page_header .headline { color: #fff; }

/* ==========================================================================
   Blog index — "SOYBA COLUMN" (see home.php)
   ========================================================================== */
#main_contents { max-width: 1200px; margin: 0 auto; padding: 50px 20px 80px; }
#blog_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 28px;
}
@media (max-width: 900px) { #blog_list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #blog_list { grid-template-columns: 1fr; } }

#blog_list article.item { position: relative; }
#blog_list .image_wrap {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #e7e1d2;
}
#blog_list .image_wrap .image { position: absolute; inset: 0; background-position: center center; background-size: cover; }

#blog_list .date_area {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: rgba(247, 243, 234, 0.94);
	padding: 6px 10px;
	text-align: center;
	line-height: 1.1;
}
#blog_list .date_area .year { display: block; font-size: 10px; color: var(--soyba-muted); }
#blog_list .date_area .entry-date { display: block; font-size: 16px; font-weight: 500; }
#blog_list .date_area .line { display: block; width: 14px; height: 1px; background: var(--soyba-line); margin: 3px auto; }

#blog_list .content_inner { padding: 14px 2px; }
#blog_list .category {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--soyba-accent);
	text-decoration: none;
	margin-bottom: 8px;
}
#blog_list .title { font-size: 14px; line-height: 1.7; margin: 0; font-weight: 400; }
#blog_list .title a { text-decoration: none; }
#blog_list .title a:hover { text-decoration: underline; }

.soyba-pagination { text-align: center; margin-top: 60px; font-size: 13px; letter-spacing: 0.05em; }
.soyba-pagination a, .soyba-pagination span { margin: 0 8px; text-decoration: none; }
.soyba-pagination a:hover { text-decoration: underline; }