/*
Theme Name: The Seoul Dental EN
Theme URI: https://theseouldental.com/
Description: English-only child theme for The Seoul Dental (더서울치과), Seongnam. Carries the brand palette, logo and photography of the Korean parent site theseoul.org so the two read as one clinic, while targeting overseas patients: English-first copy, email/Instagram DM/Google Maps contact, and server-side Dentist + MedicalWebPage JSON-LD.
Author: The Seoul Dental
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theseoul-en
*/

/* ---------------------------------------------------------------------------
   Design tokens are declared in theme.json (palette, type scale, spacing) so
   the Site Editor can expose them. Only component CSS lives here.

   Brand colour is #cb9d6c (gold), verified as the dominant value across the
   parent site's five stylesheets - 29 occurrences. The teal #53bfc4 that an
   earlier reading assumed was primary occurs zero times in CSS; it is an
   inline one-off on the language switcher. Do not reintroduce it as a brand
   colour.
   --------------------------------------------------------------------------- */

:root {
	--tsd-radius-sm: 3px;
	--tsd-radius-md: 10px;
	--tsd-radius-lg: 30px;
	--tsd-header-h: 76px;
	--tsd-shadow: 0 8px 30px rgba(8, 8, 8, 0.08);
}

/* --- Header ---------------------------------------------------------------
   hd_logo.svg is solid white, so the header must stay dark for the logo to be
   visible at all. This is a constraint of the asset, not a style preference. */
.tsd-header {
	background: var(--wp--preset--color--ink-strong);
	color: #fff;
	min-height: var(--tsd-header-h);
}
.tsd-header a { color: #fff; text-decoration: none; }
.tsd-header a:hover { color: var(--wp--preset--color--brand); }
.tsd-header .wp-block-site-logo img { max-height: 40px; width: auto; }

.tsd-topbar {
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}
.tsd-topbar a { color: #fff; text-decoration: none; }

/* The header has to read as one solid band. WordPress inserts a block gap
   (24px here) between every pair of top-level siblings, which cut a white
   stripe between the gold top bar and the dark logo row, and another between
   the header and the page below it. On a phone, where the header stack is
   tall, it looked like three unrelated strips. */
.tsd-header-wrap > * + * { margin-block-start: 0 !important; }
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* --- Buttons -------------------------------------------------------------- */
.tsd-btn {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border-radius: var(--tsd-radius-md);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.tsd-btn--primary { background: var(--wp--preset--color--brand); color: #fff; }
.tsd-btn--primary:hover { background: var(--wp--preset--color--ink-strong); color: #fff; transform: translateY(-1px); }
.tsd-btn--ghost { border: 2px solid #fff; color: #fff; }
.tsd-btn--ghost:hover { background: #fff; color: var(--wp--preset--color--ink-strong); }

/* --- Contact strip -------------------------------------------------------- */
.tsd-contacts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; align-items: center; }
.tsd-contact { text-decoration: none; font-weight: 600; white-space: nowrap; }
.tsd-contact:hover { text-decoration: underline; }

/* --- Hero ----------------------------------------------------------------
   The 3-second rule from the foreign-patient spec: language guarantee, a
   high-contrast CTA, and location/contact all visible without scrolling. */
.tsd-hero {
	position: relative;
	min-height: clamp(420px, 62vh, 640px);
	display: flex;
	align-items: center;
	color: #fff;
	background-color: var(--wp--preset--color--ink-strong);
	background-size: cover;
	background-position: center 35%;
	/* Mobile first: the 768px variant is 14 KB. Larger variants are opted into
	   by min-width below, so a phone never downloads the 1920px file.
	   Source was 3840x2042 / 3.3 MB - serving that verbatim would blow the
	   2-second budget on its own. */
	background-image: url("assets/img/hero-768.webp");
}
@media (min-width: 769px) {
	.tsd-hero { background-image: url("assets/img/hero-1280.webp"); }
}
@media (min-width: 1281px) {
	.tsd-hero { background-image: url("assets/img/hero.webp"); }
}
.tsd-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.45) 55%, rgba(8, 8, 8, 0.2) 100%);
}
.tsd-hero__inner { position: relative; z-index: 1; max-width: 1240px; margin-inline: auto; padding: 3rem 1.25rem; width: 100%; }
.tsd-hero__eyebrow {
	display: inline-block;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: var(--tsd-radius-sm);
	margin-bottom: 1rem;
}
.tsd-hero h1 {
	color: #fff;
	font-size: var(--wp--preset--font-size--hero);
	margin: 0 0 0.75rem;
	max-width: 22ch;
}
.tsd-hero__sub { font-size: var(--wp--preset--font-size--lg); max-width: 46ch; margin: 0 0 1.75rem; }
.tsd-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.tsd-hero .tsd-contacts { gap: 0.35rem 1rem; font-size: 0.95rem; }

/* --- Trust bar ------------------------------------------------------------ */
.tsd-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border-radius: var(--tsd-radius-md);
	overflow: hidden;
}
.tsd-trust__item { background: var(--wp--preset--color--surface); padding: 1.5rem 1.25rem; text-align: center; }
.tsd-trust__item strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; margin-bottom: 0.25rem; }
.tsd-trust__item span { color: var(--wp--preset--color--muted); font-size: 0.9rem; }

/* --- Service cards -------------------------------------------------------- */
.tsd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.tsd-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tsd-radius-md);
	padding: 1.5rem;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.tsd-card:hover { box-shadow: var(--tsd-shadow); transform: translateY(-2px); border-color: var(--wp--preset--color--brand); }
.tsd-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.tsd-card h3 a { text-decoration: none; }
.tsd-card p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.95rem; }

/* --- Case index (/cases/ and category archives) ---------------------------
   The posts index shows summaries only; the full write-up lives on the post.
   Styling the post-template <li> rather than adding a wrapper block keeps the
   markup that core generates intact - no extra div to drift out of sync. */
.tsd-caselist { gap: 1.5rem !important; }
.tsd-caselist > li {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tsd-radius-md);
	padding: 1.5rem;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.tsd-caselist > li:hover {
	box-shadow: var(--tsd-shadow);
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--brand);
}
.tsd-caselist h2 { line-height: 1.4; }
.tsd-caselist h2 a { text-decoration: none; }
.tsd-caselist h2 a:hover { text-decoration: underline; }
.tsd-caselist .wp-block-post-excerpt { margin: 0; }
.tsd-caselist .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); }
/* Push the read-more to the bottom edge so cards of unequal text still line up. */
.tsd-caselist .wp-block-post-excerpt__more-text { margin-top: auto; padding-top: 0.85rem; }
.tsd-caselist .wp-block-post-excerpt__more-link {
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--brand);
}
.tsd-caselist .wp-block-post-excerpt__more-link::after { content: " \2192"; }
.tsd-caselist .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }

.tsd-topicnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}
.tsd-topicnav__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	margin-right: 0.25rem;
}
.tsd-topicnav a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink-soft);
}
.tsd-topicnav a:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* --- Map ----------------------------------------------------------------- */
.tsd-map { line-height: 0; border-radius: var(--tsd-radius-md); overflow: hidden; }
.tsd-map iframe { display: block; }

/* --- Footer -------------------------------------------------------------- */
.tsd-footer { background: var(--wp--preset--color--ink-strong); color: #cfcfcf; }
.tsd-footer a { color: #fff; }
.tsd-footer h2, .tsd-footer h3 { color: #fff; }
.tsd-footer .wp-block-site-logo img { max-height: 36px; width: auto; }

/* --- Article -------------------------------------------------------------
   Case posts arrive from the translation pipeline as long-form HTML with many
   clinical photos, so images need sane defaults rather than per-post styling. */
.tsd-article img { border-radius: var(--tsd-radius-md); height: auto; max-width: 100%; }
.tsd-article figure { margin-inline: 0; }
/* clear: both so the next bio's heading starts below a floated portrait rather
   than tucking in beside it. */
.tsd-article h2 { margin-top: 2.5rem; clear: both; }
.tsd-article h3 { margin-top: 1.75rem; }

/* Photographs on the hub pages, added 2026-08-25. Those pages had been text
   only - the director noticed the site had no pictures on them. The caption is
   part of the point: it says what the room is, so the photograph carries
   information rather than decorating the page. */
.tsd-figure { margin: 1.75rem 0 2rem; }
.tsd-figure img { border-radius: var(--tsd-radius-md); display: block; height: auto; max-width: 100%; }
.tsd-figure figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* A dentist portrait is a head-and-shoulders shot, not a scene: at full column
   width it would tower over the bio it belongs to. Floated so the qualifications
   run beside it, and unfloated on a phone where there is no room to sit beside
   anything. */
.tsd-figure--portrait { float: right; width: 190px; margin: 0 0 1rem 1.75rem; }
.tsd-figure--portrait img { background: var(--wp--preset--color--surface-soft); }

@media (max-width: 599.98px) {
	/* Centred on purpose, not by accident: with no room to sit beside the text
	   the portrait becomes a header for the bio below it, and a 150px picture
	   pushed against the left margin reads as a stray thumbnail. margin-inline
	   is stated explicitly so this does not depend on the block layout's own
	   auto margins. */
	.tsd-figure--portrait { float: none; width: 150px; margin: 0 auto 1rem; }
}

/* FAQ blocks emitted by the pipeline. <details> passes the WAF, unlike script. */
.tsd-faq details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--tsd-radius-md);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var(--wp--preset--color--surface-soft);
}
.tsd-faq summary { font-weight: 700; cursor: pointer; font-family: var(--wp--preset--font-family--display); }
.tsd-faq details[open] summary { margin-bottom: 0.6rem; color: var(--wp--preset--color--brand); }

/* --- Utilities ----------------------------------------------------------- */
.tsd-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tsd-section--soft { background: var(--wp--preset--color--surface-soft); }
.tsd-eyebrow { color: var(--wp--preset--color--brand); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.tsd-lede { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--ink-soft); }

/* Medical-content notice appended to every post. Deliberately quiet: it is a
   legal statement readers should be able to find, not a banner competing with
   the article. Mirrors the Korean source blog's compliance image as text. */
.tsd-medical-notice {
	margin-block-start: 3rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--surface-soft);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}
.tsd-medical-notice h2 {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--ink);
}
.tsd-medical-notice p { margin: 0 0 0.6rem; }
.tsd-medical-notice p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.tsd-hero { min-height: 380px; background-position: center; }
	.tsd-hero::after { background: rgba(8, 8, 8, 0.66); }
	.tsd-hero h1 { max-width: none; }

	/* The eyebrow wrapped onto a second line, which turned it from a small tag
	   into a full-width gold slab above the headline. At 360px the label is
	   48 characters, so the size, tracking and padding all have to come down
	   together to keep it on one line. */
	.tsd-hero__eyebrow { font-size: 0.66rem; letter-spacing: 0.03em; padding: 0.3rem 0.6rem; }
	.tsd-hero__inner { padding: 2.25rem 1.25rem; }
	.tsd-hero__sub { margin-bottom: 1.25rem; }
	.tsd-hero .tsd-contacts { font-size: 0.85rem; gap: 0.3rem 0.9rem; }

	/* Phone, email, Instagram and Google Maps also sit in the hero and in the
	   footer. In the top bar they cost two lines above the logo and add nothing
	   the CTA in the header does not already offer. */
	.tsd-topbar .tsd-contacts { display: none; }
	.tsd-topbar p { font-size: 0.8rem !important; line-height: 1.45; }
}

/* --- Phone action bar -----------------------------------------------------
   Desktop never sees it: the header CTA and the contact strip are both on
   screen there. Kept out of the flow entirely rather than hidden, so it costs
   nothing above 600px. */
.tsd-actionbar { display: none; }

@media (max-width: 599.98px) {
	.tsd-actionbar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		position: fixed;
		inset: auto 0 0 0;
		/* Below the navigation overlay (WordPress puts that at 100000) so an
		   open menu covers the bar instead of the bar floating over it. */
		z-index: 90;
		background: var(--wp--preset--color--ink-strong);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tsd-actionbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 0.5rem 0.15rem 0.55rem;
		color: #fff;
		/* Five tiles since LINE joined the bar (2026-08-25). At 320px that is
		   64px each, and a fixed 0.72rem "Instagram" no longer fits, so the
		   label scales with the viewport instead of overflowing its tile. */
		font-size: clamp(0.6rem, 2.5vw, 0.72rem);
		font-weight: 600;
		text-decoration: none;
		line-height: 1.2;
		min-width: 0;
		white-space: nowrap;
	}
	.tsd-actionbar__item + .tsd-actionbar__item { border-left: 1px solid rgba(255, 255, 255, 0.13); }
	.tsd-actionbar__item--primary { background: var(--wp--preset--color--brand); }
	.tsd-actionbar__item:active { filter: brightness(0.88); }

	/* The bar is fixed, so the last line of the footer would sit under it.
	   The footer's own padding is an inline style from the block template,
	   which is why this has to be !important. */
	.tsd-footer { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important; }
}

/* ---------------------------------------------------------------------------
   Phone header. Reported by the clinic 2026-08-14: the top of every page was
   untidy on a phone. Nothing overflowed - the header row simply wrapped as one
   block, so the logo sat alone on the first line and the hamburger plus a
   full-size CTA were stranded together on the second, left-aligned under it.
   Roughly 290 px of every page was chrome before any content.

   599.98px, not 600px, because that is where core switches the navigation to
   the overlay ("overlayMenu":"mobile"). Above it the inline menu is back and
   these rules must not apply.
   --------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
	.tsd-header .tsd-logo img { height: 32px !important; }

	/* display:contents dissolves the nav+CTA wrapper so its two children become
	   items of the header row itself. Only then can the hamburger sit on the
	   logo's line (space-between puts it hard right) and the CTA take a line of
	   its own. Without it they wrap together as one unit. */
	.tsd-header .is-content-justification-right { display: contents; }
	.tsd-header .is-content-justification-right > nav { order: 1; }
	.tsd-header .is-content-justification-right > p { order: 2; flex: 1 0 100%; margin: 0.15rem 0 0; }
	.tsd-header .is-content-justification-right > p > .tsd-btn {
		display: block;
		text-align: center;
		padding: 0.7rem 1rem;
	}

	/* Overlay menu. Inherited blockGap is 1.5rem, which spread 16 links over
	   ~2,000 px and forced the reader to scroll a menu. Tighten to a list, and
	   mark the parent items rather than indenting the children off the page. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		gap: 0 !important;
	}
	/* Core's own overlay rules use these exact selectors and are printed after
	   this stylesheet, so the spacing declarations have to be !important to
	   land. Colour and type below win on specificity alone. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 0.5rem 0 !important;
		display: block;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin-bottom: 0 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding-bottom: 0.35rem;
		margin-bottom: 0.35rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 0.8rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--brand);
	}
	/* Core indents the open submenu by 2rem and pads it by a full block gap,
	   which pushed the treatment links a third of the way across the screen. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding: 0 0 0 0.9rem !important;
		border-left: 2px solid var(--wp--preset--color--line);
		margin: 0 0 0 0.1rem !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1rem;
		font-weight: 500;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsd-btn, .tsd-card, .tsd-caselist > li { transition: none; }
	.tsd-btn--primary:hover, .tsd-card:hover, .tsd-caselist > li:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Fee schedule tables (/pricing/). Long tables on a phone are the whole point
   of this page, so each table scrolls inside its own box rather than forcing
   the page body sideways.
   --------------------------------------------------------------------------- */
.tsd-fees {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
	display: block;
	overflow-x: auto;
}
.tsd-fees caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--tsd-gold-dark, #8a6d3b);
	padding: 0 0 0.5rem;
}
.tsd-fees thead th {
	text-align: left;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	border-bottom: 2px solid #e5e7eb;
	padding: 0.5rem 0.75rem 0.5rem 0;
	white-space: nowrap;
}
.tsd-fees thead th:last-child,
.tsd-fees tbody td { text-align: right; white-space: nowrap; }
.tsd-fees tbody th {
	text-align: left;
	font-weight: 400;
	padding: 0.6rem 1.25rem 0.6rem 0;
	border-bottom: 1px solid #f0f0f0;
}
.tsd-fees tbody td {
	font-variant-numeric: tabular-nums;
	padding: 0.6rem 0 0.6rem 0.75rem;
	border-bottom: 1px solid #f0f0f0;
}
.tsd-fees tbody tr:last-child th,
.tsd-fees tbody tr:last-child td { border-bottom: none; }