/*
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 so
   Chrome force-dark et al. never invert the cream palette or the logo.
   ========================================================================== */
html { color-scheme: only light; }

/* ==========================================================================
   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. Three-column commitments (豆乳のこだわり / 大豆粉のこだわり / プレミアムカヌレ)
   and 6. Store cards share the same dark photo-card component
   ========================================================================== */
.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;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
}
.soyba-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, var(--soyba-overlay) 100%);
}
.soyba-card__body { position: relative; 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;
}
.soyba-card__body p { font-size: 12.5px; line-height: 1.8; margin: 0; opacity: 0.92; }

/* Drop a same-named file into images/ (see README-INSTALL.txt) and it takes
   over automatically — these background-colors are just the until-then look. */
.soyba-card--soymilk    { background-color: #8a7a5c; background-image: url("images/feature-soymilk.jpg"); }
.soyba-card--soyflour   { background-color: #7c6a4d; background-image: url("images/feature-soyflour.jpg"); }
.soyba-card--canele     { background-color: #6b4c37; background-image: url("images/feature-canele.jpg"); }
.soyba-card--honten     { background-color: #4a4038; background-image: url("images/store-honten.jpg"); }
.soyba-card--takashimaya{ background-color: #544a3f; background-image: url("images/store-takashimaya.jpg"); }
.soyba-card--komazawa   { background-color: #5e5346; background-image: url("images/store-komazawa.jpg"); }

/* ==========================================================================
   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; }