/*
Theme Name:   HybridMag Front
Theme URI:    https://www.maruhachiseika.jp/
Description:  Child theme for HybridMag. Adds a custom front page: fixed photo slideshow, news grid, gallery strip, category cards and a link column. All content comes from the site's own posts, categories and menus.
Author:       dwain
Template:     hybridmag
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hybridmag-front
*/

/* --------------------------------------------------------------------------
   Design tokens.
   Colours build on the parent's --hybridmag-* custom properties wherever one
   exists, so the dark mode toggle (html.hm-dark) carries the front page with
   no extra rules. --hmf-accent is the one deliberate literal: it is the
   layout's own blue. Change it here and every button follows.

   Defined on :root, not on .hmf-front — .content-area wraps the front page's
   <main> and needs these too, and custom properties only inherit downward.
   -------------------------------------------------------------------------- */

:root {
	--hmf-accent: #9ec4ea;
	--hmf-accent-ink: #23405c;
	--hmf-panel-alpha: 90%;
	--hmf-gap: var(--hybridmag-post-cols-gap, 35px);
	--hmf-radius: var(--hybridmag-global-border-radius, 6px);

	/* Hero. Tuning knobs — the right values depend on the photos and the logo.
	   Logo width suits a roughly square mark; a wide wordmark wants more. */
	--hmf-hero-height: 70vh;
	--hmf-hero-logo-width: 200px;

	/* Gallery stage height. Slides are contained, not cropped, so this caps the
	   tallest image rather than forcing a shape on them. */
	--hmf-gallery-height: 360px;
}

/* --------------------------------------------------------------------------
   Fixed slideshow layer.
   Sits at z-index -1, which paints above the canvas but below page content —
   so the body background must be transparent for any of it to show.
   Keyframes and per-slide delays are generated in inc/bg-css.php.
   -------------------------------------------------------------------------- */

.hmf-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.hmf-bg span {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	will-change: opacity;
}

body.home,
body.home #page,
body.home #content {
	background: transparent;
}

/* Header floats over the photos. */
body.home .site-header,
body.home .hm-header-inner-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Hero.
   The header becomes a tall region showing the fixed slideshow, with the logo
   centred in it and the primary nav riding the bottom edge in its own bar,
   meeting the content panel below. Front page only — every other page keeps
   HybridMag's normal compact header.
   -------------------------------------------------------------------------- */

body.home .site-header {
	min-height: var(--hmf-hero-height);
	display: flex;
	flex-direction: column;
}

/* Takes the slack, so the logo centres in the photo and the nav is pushed down. */
body.home .hm-header-inner-wrapper {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Centred logo — the parent only offers Default and Large header layouts. */
body.home .hm-header-inner {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 14px;
	text-align: center;
	width: 100%;
}

/*
 * Logo above site name, with an underlay so both read against busy photos.
 * The theme already stacks them: .site-branding-container holds .site-logo
 * (the_custom_logo) and then .site-branding (.site-title) as siblings.
 *
 * The scrim is mixed from the theme's own surface colour, so it inverts under
 * html.hm-dark exactly as the text on top of it does — white behind dark text,
 * near-black behind light text. It fades to nothing well inside its box, so
 * there is no visible edge over the photo.
 */
body.home .site-branding-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 34px 64px;
	/* The parent sets margin-right:auto here to push branding left and gadgets right
	   in its horizontal header. An auto margin beats align-items, so without this the
	   whole block pins to the left edge on wide screens. The theme's own centred
	   variant does the same thing, but only under .hm-h-lg. */
	margin-inline: auto;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 78%);
	background: radial-gradient(ellipse at center,
		color-mix(in srgb, var(--hybridmag-color-bg-cl-sep-content, #fff) 80%, transparent) 0%,
		color-mix(in srgb, var(--hybridmag-color-bg-cl-sep-content, #fff) 55%, transparent) 50%,
		transparent 78%);
}

body.home .site-logo {
	line-height: 0;
	/* The parent gives .site-logo a 16px right margin to separate it from the title
	   in its horizontal header. Stacked, that just pushes the logo 8px off centre. */
	margin: 0;
}

/* Beats the parent's own .site-logo img cap on the front page only. */
body.home .site-logo img {
	width: auto;
	max-width: min(var(--hmf-hero-logo-width), 55vw);
	height: auto;
}

body.home .site-title {
	font-size: clamp(1.75rem, 5vw, 3rem);
	margin: 0;
}

/* The nav bar at the foot of the hero. .hm-main-menu is .desktop-only, so the
   mobile hamburger is untouched by any of this. */
body.home .hm-main-menu {
	display: flex;
	justify-content: center;
	margin-top: auto;
}

body.home .hm-menu-wrapper {
	flex: 0 1 auto;
	width: auto;
	margin: 0;
	padding-inline: 10px;
	background: rgba(255, 255, 255, 0.92);
	background: color-mix(in srgb, var(--hybridmag-color-bg-cl-sep-content, #fff) 92%, transparent);
	border-radius: var(--hmf-radius) var(--hmf-radius) 0 0;
}

/* The nav bar sits on the panel's top edge rather than floating above it.
   #content carries 35px of top padding by default; the panel's own top margin is
   dropped in the panel rule below, which has to win on source order. */
body.home #content {
	padding-top: 0;
}

/*
 * Honour the parent's own Header > Menu Alignment setting on the default header layout.
 * It already emits a .menu-align-center body class (inc/template-functions.php:73), but the
 * only rule for it is scoped to .hm-h-lg — so choosing Center on the default layout sets the
 * class and nothing happens. This does nothing unless that option is actually selected.
 */
.menu-align-center .hm-menu-wrapper {
	justify-content: center;
}

/*
 * Honour the parent's own Header > Menu Alignment setting on the default header layout.
 * It already emits a .menu-align-center body class (inc/template-functions.php:73), but the
 * only rule for it is scoped to .hm-h-lg — so choosing Center on the default layout sets the
 * class and nothing happens. This does nothing unless that option is actually selected.
 */
.menu-align-center .hm-menu-wrapper {
	justify-content: center;
}

/* The content panel the layout floats on. */
body.home .content-area {
	background: rgba(243, 243, 243, 0.9);
	background: color-mix(in srgb, var(--hybridmag-color-bg-cl-sep-content, #fff) var(--hmf-panel-alpha, 90%), transparent);
	border-radius: var(--hmf-radius);
	padding: 40px 30px;
	/* No top margin: the hero's nav bar lands on this edge. The auto sides are
	   load-bearing — .hm-container centres itself with margin:auto, so zeroing
	   them here pins the whole panel to the left on wide screens. */
	margin: 0 auto 40px;
}

@media (prefers-reduced-motion: reduce) {
	.hmf-bg span {
		animation: none !important;
	}
	.hmf-bg span:first-child {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Shared section furniture.
   -------------------------------------------------------------------------- */

.hmf-section {
	margin-bottom: calc(var(--hmf-gap) * 1.5);
}

.hmf-section:last-child {
	margin-bottom: 0;
}

.hmf-heading {
	text-align: center;
	font-size: var(--hybridmag-font-size-xxl, 1.625rem);
	color: var(--hybridmag-color-text-headings);
	margin: 0 0 0.4em;
}

.hmf-section__intro {
	text-align: center;
	color: var(--hybridmag-color-text-light);
	font-size: var(--hybridmag-font-size-sm, 0.938rem);
	margin: 0 0 1.5em;
}

.hmf-rule {
	border: 0;
	border-top: 1px solid var(--hybridmag-color-border);
	margin: 0 0 var(--hmf-gap);
}

/* --------------------------------------------------------------------------
   News grid.
   -------------------------------------------------------------------------- */

.hmf-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--hmf-gap);
}

.hmf-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hmf-card__media {
	overflow: hidden;
	border-radius: var(--hmf-radius);
	margin-bottom: 0.75em;
}

.hmf-card__media img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hmf-card__link:hover .hmf-card__media img,
.hmf-card__link:focus-visible .hmf-card__media img {
	transform: scale(1.04);
}

.hmf-card__date {
	display: block;
	font-size: var(--hybridmag-font-size-xxxs, 0.75rem);
	color: var(--hybridmag-color-text-light);
	margin-bottom: 0.3em;
}

.hmf-card__title {
	font-size: var(--hybridmag-font-size-md, 1.063rem);
	line-height: var(--hybridmag-line-height-headings, 1.3);
	color: var(--hybridmag-color-text-headings);
	margin: 0;
}

.hmf-card__link:hover .hmf-card__title {
	color: var(--hybridmag-color-link-hover);
}

/* --------------------------------------------------------------------------
   Gallery: one large slide, arrows either side, thumbnail strip below.
   -------------------------------------------------------------------------- */

.hmf-gallery__viewer {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hmf-gallery__stage {
	position: relative;
	flex: 1 1 auto;
	height: var(--hmf-gallery-height);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.hmf-gallery__slide {
	display: none;
	max-width: 100%;
	max-height: 100%;
}

.hmf-gallery__slide.is-active {
	display: block;
}

/* contain, not cover: featured images vary in aspect and the originals were
   shown whole rather than cropped. */
.hmf-gallery__slide img {
	display: block;
	max-height: var(--hmf-gallery-height);
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.hmf-gallery__nav {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
	color: var(--hybridmag-color-text-light);
	transition: color 0.2s ease;
}

.hmf-gallery__nav:hover,
.hmf-gallery__nav:focus-visible {
	color: var(--hybridmag-color-text-headings);
}

.hmf-gallery__thumbs {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	padding-bottom: 6px;
}

.hmf-gallery__thumb {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, outline-color 0.2s ease;
	outline: 2px solid transparent;
	outline-offset: -2px;
}

.hmf-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hmf-gallery__thumb:hover,
.hmf-gallery__thumb:focus-visible {
	opacity: 0.85;
}

.hmf-gallery__thumb.is-active {
	opacity: 1;
	outline-color: var(--hmf-accent);
}

/* --------------------------------------------------------------------------
   Feature cards.
   -------------------------------------------------------------------------- */

.hmf-features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--hmf-gap);
}

.hmf-feature {
	text-align: center;
}

.hmf-feature__title {
	font-size: var(--hybridmag-font-size-lg, 1.313rem);
	margin: 0 0 0.5em;
}

.hmf-feature__title a {
	text-decoration: none;
	color: var(--hybridmag-color-text-headings);
}

.hmf-feature__title a:hover {
	color: var(--hybridmag-color-link-hover);
}

.hmf-feature__media {
	display: block;
	border-radius: var(--hmf-radius);
	overflow: hidden;
	margin-bottom: 0.75em;
}

.hmf-feature__media img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.hmf-feature__text {
	font-size: var(--hybridmag-font-size-sm, 0.938rem);
	line-height: var(--hybridmag-line-height-article, 1.7);
	color: var(--hybridmag-color-text-main);
	text-align: left;
}

.hmf-feature__text p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Search buttons: 2 x 2, equal cells, equal gaps.
   -------------------------------------------------------------------------- */

.hmf-search__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 460px;
	margin-inline: auto;
}

.hmf-search__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 18px;
	border-radius: var(--hmf-radius);
	background: var(--hmf-accent);
	color: var(--hmf-accent-ink);
	text-align: center;
	text-decoration: none;
	font-size: var(--hybridmag-font-size-sm, 0.938rem);
	transition: filter 0.2s ease;
}

.hmf-search__btn:hover,
.hmf-search__btn:focus-visible {
	filter: brightness(0.93);
	color: var(--hmf-accent-ink);
}

/* --------------------------------------------------------------------------
   Footer.
   Site-wide, not front-page only — a footer that centred on one page and not
   the next would read as a bug.
   -------------------------------------------------------------------------- */

/*
 * The parent lays this out as a flex row with justify-content:space-between and two
 * children — .hm-footer-copyright and the .hm-designer-credit added on the
 * hybridmag_after_copyright hook — which pins one hard left and the other hard right.
 * Stacking centres the copyright properly instead of merely centring the pair as a
 * group, which would still leave the text off to one side.
 */
.hm-footer-bottom-content {
	flex-direction: column;
	align-items: center;
	row-gap: 6px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Small screens.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--hmf-hero-height: 45vh;
		--hmf-hero-logo-width: 150px;
	}

	/* 64px of side padding costs a third of a phone screen and squeezes the title. */
	body.home .site-branding-container {
		padding: 22px 24px;
	}

	body.home .content-area {
		padding: 24px 16px;
		margin-bottom: 20px;
	}

	.hmf-heading {
		font-size: var(--hybridmag-font-size-xl, 1.5rem);
	}
}