/**
 * Manager総研（Media）— Frontend Foundation.
 *
 * Phase 9-5B. Loaded ONLY in kakeai_is_media_context() (see functions.php
 * kakeai_enqueue_assets()) — never on Corporate pages. Everything in this
 * file is scoped under `.media-site` (the wrapper emitted by header.php/
 * footer.php) so it can never leak into Corporate markup even if this
 * stylesheet were ever loaded by mistake.
 *
 * This is Foundation only: design tokens, reset, typography, container/
 * layout primitives, spacing, image/link/button primitives, and the
 * Header/Footer shell. Page-specific and component-specific styling
 * (cards, TOC, share, pagination, breadcrumb, search, TOP sections, Article
 * body typography) is out of scope — later phases (9-5C onward) extend this
 * file or add sibling files (components.css / pages.css) without needing to
 * touch these tokens.
 *
 * Values below are measured from Production
 * (https://kakeai.co.jp/media/, kakeai-service-site.webflow.shared CSS),
 * not guessed — see Phase 9-5A/9-5A.1 research reports.
 */

/* ---------------------------------------------------------------------
 * Design tokens — scoped under .media-site, never on :root, so they can
 * never collide with Corporate tokens or leak if this file loads anywhere
 * else by mistake.
 * ------------------------------------------------------------------- */
.media-site {
	--media-color-primary: #383874;
	--media-color-text: #333333;
	--media-color-gray-97: #f7f7f7;
	--media-color-gray-93: #eeeeee;
	--media-color-gray-82: #d1d1d1;
	--media-color-gray-62: #9e9e9e;
	--media-color-gray-46: #757575;
	--media-color-gray-41: #686868;
	--media-color-white: #ffffff;
	--media-color-black: #000000;

	/* Phase 9-5G (Single Article) additions — both confirmed via
	   `CSS.getMatchedStylesForNode` against live Production Single Article
	   pages, not present on any page measured in earlier phases.
	   --media-color-link: `.bl_m_article_rich.is-main a`'s own color.
	   --media-color-gray-73: Production's own `--dull-grey75` (Webflow's
	   literal variable name, kakeai-service-site.webflow.css) — the share
	   button's "already copied" reset state color — renamed to this file's
	   own gray-NN-by-lightness naming convention rather than importing
	   Webflow's unrelated naming. */
	--media-color-link: #1565c0;
	--media-color-gray-73: #b6b6c0;

	/* Phase 9-5G.5 correction: Single Article `<blockquote>`'s own real
	   border-left color (#d9d9d9) — confirmed via `CSS.getMatchedStylesForNode`
	   against 4 live Production articles (0087/0212/0002/and a cross-check) —
	   is NOT the same gray as --media-color-gray-82 (#d1d1d1), which
	   single.css's original blockquote rule mistakenly reused without
	   verifying the exact hex value matched. */
	--media-color-gray-85: #d9d9d9;

	/* Container: measured from Production .ly_m_container / .ly_m_wrapper. */
	--media-container-max: 73.5rem; /* 1176px */
	--media-container-padding: 3%;

	/* Spacing scale — conservative Foundation set; page/component phases
	   add their own local values as real layouts are built. */
	--media-space-xs: 0.5rem;
	--media-space-sm: 1rem;
	--media-space-md: 2rem;
	--media-space-lg: 3.5rem;
	--media-space-xl: 5rem;

	/* Typography. Noto Sans JP only for now (Foundation-level body/heading
	   font) — Production also loads IBM Plex Sans/Manrope (Latin/numeral
	   accents) and Zen Old Mincho/Shippori Mincho B1 (decorative feature
	   headlines); those are deferred to the specific components that
	   actually need them (TOP Hero, Feature cards) rather than loaded
	   Foundation-wide on every Media page. */
	--media-font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
	--media-line-height-base: 1.8;
	--media-line-height-heading: 1.5;

	color: var(--media-color-text);
	background-color: var(--media-color-white);
	font-family: var(--media-font-base);
	line-height: var(--media-line-height-base);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
 * Minimal reset / box-sizing — scoped, so Corporate's own reset is
 * untouched.
 * ------------------------------------------------------------------- */
.media-site,
.media-site *,
.media-site *::before,
.media-site *::after {
	box-sizing: border-box;
}

.media-site img,
.media-site picture,
.media-site video,
.media-site svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.media-site button,
.media-site input,
.media-site textarea,
.media-site select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.media-site button {
	cursor: pointer;
	background: none;
	border: none;
	/* Human Visual Review correction #4: Chrome's UA stylesheet gives <button>
	   a default `padding: 1px 6px`, never reset here before. Combined with
	   `box-sizing: border-box` (see the reset above), that silently shrank
	   any fixed-size icon button's content box (e.g. a 24×24px search
	   trigger lost 12px of width to padding, leaving only a 12px content box
	   for its `max-width:100%` SVG) — the real cause of the Search icon
	   "looking smaller than Production" reported in Correction #4, not an
	   SVG asset/viewBox issue. */
	padding: 0;
}

/* ---------------------------------------------------------------------
 * Base typography.
 * ------------------------------------------------------------------- */
.media-site p {
	margin: 0 0 var(--media-space-sm);
}

.media-site h1,
.media-site h2,
.media-site h3,
.media-site h4,
.media-site h5,
.media-site h6 {
	margin: 0 0 var(--media-space-sm);
	font-weight: 700;
	line-height: var(--media-line-height-heading);
	color: var(--media-color-text);
}

.media-site h1 {
	font-size: 1.75rem;
}

.media-site h2 {
	font-size: 1.5rem;
}

.media-site h3 {
	font-size: 1.25rem;
}

.media-site h4,
.media-site h5,
.media-site h6 {
	font-size: 1.125rem;
}

.media-site small {
	font-size: 0.875rem;
}

.media-site strong {
	font-weight: 700;
}

.media-site ul,
.media-site ol {
	margin: 0 0 var(--media-space-sm);
	padding-left: 1.25em;
}

/* ---------------------------------------------------------------------
 * Link foundation — Article Body links / Navigation links / Card links
 * are expected to override color/decoration in their own component CSS;
 * this is only the sane global default.
 * ------------------------------------------------------------------- */
.media-site a {
	color: var(--media-color-primary);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s ease;
}

.media-site a:hover {
	text-decoration-color: currentColor;
}

.media-site a:focus-visible,
.media-site button:focus-visible,
.media-site input:focus-visible,
.media-site textarea:focus-visible {
	outline: 2px solid var(--media-color-primary);
	outline-offset: 2px;
}

/* Foundation-level visually-hidden helper (skip links, SR-only labels). */
.media-site .u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.media-site * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------
 * Button primitive — Header/Footer/CTA reuse this as a base; full visual
 * variants (filled/outline/size) are a later Phase (9-5C/D).
 * ------------------------------------------------------------------- */
.media-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6em 1.2em;
	border: 1px solid var(--media-color-primary);
	border-radius: 999px;
	color: var(--media-color-primary);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	background: var(--media-color-white);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.media-button:hover {
	background-color: var(--media-color-primary);
	color: var(--media-color-white);
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Container / layout primitives.
 * ------------------------------------------------------------------- */
/* Human Visual Review correction #2: Production uses a two-layer structure
   — an outer wrapper with side padding, and an inner max-width container
   with NO padding of its own (just margin:auto centering). Combining
   max-width AND padding on the SAME element (as this rule originally did)
   shrinks the usable content area by 2× the padding at any viewport wide
   enough for the max-width to be the binding constraint (confirmed via
   Production DOM measurement: at 1440px the padding never actually
   constrains Production's layout — the container simply centers at its
   full 1176px). That was the root cause of "everything looks smaller"
   reported on PC Human Review. Padding now lives on the callers
   (.media-header__upper, .media-footer__main, .media-footer__sub) instead. */
.media-container {
	width: 100%;
	max-width: var(--media-container-max);
	margin-left: auto;
	margin-right: auto;
}

.media-section {
	padding-top: var(--media-space-lg);
	padding-bottom: var(--media-space-lg);
}

.media-stack > * + * {
	margin-top: var(--media-space-md);
}

/* ---------------------------------------------------------------------
 * Page wrapper.
 * ------------------------------------------------------------------- */
.media-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Targets the existing <main id="main-content"> landmark (index.php and
   every future page template) by descendant selector rather than requiring
   templates to add a class — avoids touching non-Media-specific files. */
.media-site > main {
	flex: 1 0 auto;
}

/* Header/Footer/Nav/Search/Menu/CTA visuals live in components.css as of
 * Phase 9-5C (Production parity rebuild) — this file's earlier Phase 9-5B
 * placeholder rules for .media-header*/.media-footer* were removed rather
 * than left alongside the new ones: their selectors (e.g.
 * ".media-header__brand img") had higher specificity than components.css's
 * single-class rules (e.g. ".media-header__logo-img") and were silently
 * winning the cascade, which is what caused the Header logo to render at
 * the old Phase 9-5B size (2rem) instead of Phase 9-5C's measured
 * Production size — a real bug found via Human Visual Review, not a
 * hypothetical one, so the old rules are deleted rather than just
 * shadowed.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Tablet / small-desktop sanity (Production-measured breakpoints:
 * 479 / 767-768 / 991 / 1440 — see Phase 9-5A research). No page-specific
 * grid collapse rules live here yet; this is only where the Foundation
 * container/spacing scale itself needs a Tablet-range adjustment.
 * ------------------------------------------------------------------- */
@media (max-width: 991px) {
	.media-section {
		padding-top: var(--media-space-md);
		padding-bottom: var(--media-space-md);
	}
}

@media (max-width: 479px) {
	.media-site {
		--media-container-padding: 5%;
	}
}