/*
Theme Name: SurgCase
Theme URI: https://surgcase.com/
Description: Bilingual (English / Persian) medical Q&A case library. Classic PHP templates layered on top of the Twenty Twenty-Five block theme.
Author: SurgCase
Author URI: https://surgcase.com/
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: surgcase
Tags: education, medical, bilingual, rtl-language-support
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
	/* Surfaces and type — from the design. */
	--sc-bg: #fbfbfa;
	--sc-text: #1f2220;
	--sc-body: #33362f;
	--sc-mut: #5f625d;
	--sc-mut2: #696c67;
	--sc-mut3: #71746f;
	--sc-line: #e5e4e0;
	--sc-line2: #ebeae6;
	--sc-input-line: #e0dfda;

	/* Links / selection. */
	--sc-link: oklch(0.50 0.13 253);
	--sc-link-hover: oklch(0.40 0.13 253);
	--sc-sel-bg: oklch(0.955 0.025 253);
	--sc-sel-text: oklch(0.40 0.13 253);

	/* Tag chips. */
	--sc-tag-text: oklch(0.44 0.13 45);
	--sc-tag-bg: oklch(0.965 0.022 60);
	--sc-tag-line: oklch(0.90 0.045 55);

	/* Brand. */
	--sc-brand-blue: #4a90cf;
	--sc-brand-navy: #26314a;

	/* Additions used across the ported views (kept out of the spec list on
	   purpose: same literal values as the design's inline styles). */
	--sc-white: #ffffff;
	--sc-nav: #4a4d49;
	--sc-body2: #5c5f5b;
	--sc-mut4: #7b7e79;
	--sc-mut5: #71746f;
	--sc-disabled: #c2c4bf;
	--sc-pill: #f1f0ec;
	--sc-ph-bg: #f4f3f0;
	--sc-ph-stripe: #eceae5;
	--sc-sel-line: oklch(0.87 0.045 253);
	--sc-qnum: oklch(0.64 0.10 253);

	/* Layout. */
	--sc-maxw: 1180px;
	--sc-gut: 24px;
	--sc-header-top: 0px;
	--sc-sticky-top: 88px;
	--sc-anchor-offset: 72px;

	/* Fonts. */
	--sc-font-latin: "Source Sans 3", "Vazirmatn", Helvetica, Arial, sans-serif;
	--sc-font-fa: "Vazirmatn", "Source Sans 3", sans-serif;
}

/* The WP admin bar is fixed at the top: push everything sticky below it. */
body.admin-bar {
	--sc-header-top: 32px;
	--sc-sticky-top: 120px;
	--sc-anchor-offset: 104px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--sc-header-top: 46px;
		--sc-sticky-top: 134px;
		--sc-anchor-offset: 118px;
	}
}

/* =========================================================================
   2. Base
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 320px;
	background: var(--sc-bg);
	color: var(--sc-text);
	font-family: var(--sc-font-latin);
	-webkit-font-smoothing: antialiased;
}

[dir="rtl"] {
	font-family: var(--sc-font-fa);
}

a {
	color: var(--sc-link);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--sc-link-hover);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

input,
button,
select,
textarea {
	font-family: inherit;
}

:target {
	scroll-margin-top: var(--sc-anchor-offset);
}

/* Focus visibility — the design has none, so keep it unobtrusive but present. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--sc-link);
	outline-offset: 2px;
}

/* =========================================================================
   3. Site wrapper
   ========================================================================= */

.sc-site {
	min-height: 100vh;
	background: var(--sc-bg);
	display: flex;
	flex-direction: column;
}

.sc-site > main {
	width: 100%;
	flex: 1 0 auto;
}

.sc-wrap {
	max-width: var(--sc-maxw);
	margin: 0 auto;
	padding-inline: var(--sc-gut);
}

.sc-spacer {
	flex: 1;
}

.sc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sc-skip-link {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 100000;
	padding: 9px 14px;
	border-radius: 5px;
	background: var(--sc-brand-navy);
	color: var(--sc-white);
	font-size: 14px;
	font-weight: 600;
	transform: translateY(-160%);
	transition: transform 120ms ease-out;
}

.sc-skip-link:focus {
	color: var(--sc-white);
	text-decoration: none;
	transform: translateY(0);
}

.sc-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sc-sr-only:focus {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

/* =========================================================================
   4. Site header
   ========================================================================= */

.sc-header {
	border-bottom: 1px solid var(--sc-line);
	background: var(--sc-white);
	position: sticky;
	top: var(--sc-header-top);
	z-index: 20;
}

.sc-header__inner {
	max-width: var(--sc-maxw);
	margin: 0 auto;
	padding: 0 var(--sc-gut);
	min-height: 56px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.sc-brand {
	display: flex;
	align-items: center;
	color: var(--sc-text);
	text-decoration: none;
	flex: none;
}

.sc-brand picture {
	display: block;
	width: 196px;
	height: 48px;
}

.sc-brand:hover,
.sc-brand:focus {
	color: var(--sc-text);
	text-decoration: none;
}

.sc-brand__logo {
	display: block;
	width: 196px;
	height: auto;
}

.sc-brand--custom,
.sc-brand--custom .custom-logo-link {
	display: flex;
	align-items: center;
}

.sc-brand--custom .custom-logo {
	display: block;
	width: auto;
	max-width: 180px;
	height: auto;
	max-height: 38px;
}

.sc-nav {
	display: flex;
	align-items: center;
	margin-inline-start: 8px;
}

.sc-primary-menu,
.sc-footer-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-primary-menu a {
	display: block;
	padding: 6px 11px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--sc-mut);
	background: transparent;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.sc-primary-menu a:hover,
.sc-primary-menu a:focus {
	color: var(--sc-text);
	text-decoration: none;
}

.sc-primary-menu .current-menu-item > a,
.sc-primary-menu .current-menu-ancestor > a {
	color: var(--sc-text);
	background: var(--sc-pill);
	font-weight: 500;
}

.sc-langtoggle {
	border: 1px solid var(--sc-input-line);
	background: var(--sc-white);
	color: var(--sc-nav);
	border-radius: 4px;
	padding: 5px 11px;
	font-size: 12.5px;
	cursor: pointer;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	flex: none;
}

.sc-langtoggle:hover,
.sc-langtoggle:focus {
	color: var(--sc-text);
	text-decoration: none;
	background: var(--sc-bg);
}

/* =========================================================================
   5. Site footer
   ========================================================================= */

.sc-footer {
	border-top: 1px solid var(--sc-line);
	background: var(--sc-white);
	margin-top: auto;
}

.sc-footer__inner {
	max-width: var(--sc-maxw);
	margin: 0 auto;
	padding: 22px var(--sc-gut);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	font-size: 12.5px;
	color: var(--sc-mut2);
}

.sc-footer-nav,
.sc-footer-menu {
	display: flex;
	align-items: center;
}

.sc-footer-menu {
	gap: 18px;
}

.sc-footer-menu a {
	color: var(--sc-mut2);
}

/* =========================================================================
   6. Shared primitives
   ========================================================================= */

/* Uppercase micro-label: "CATEGORIES", "CLINICAL DESCRIPTION", "ON THIS PAGE". */
.sc-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sc-mut2);
}

/* Search input in the library header row. */
.sc-input {
	border: 1px solid var(--sc-input-line);
	background: var(--sc-white);
	border-radius: 5px;
	padding: 7px 11px;
	font-size: 13.5px;
	color: var(--sc-text);
	width: 100%;
	min-height: 38px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sc-input:hover {
	border-color: var(--sc-mut3);
}

.sc-input:focus {
	border-color: var(--sc-link);
	box-shadow: 0 0 0 3px var(--sc-sel-bg);
}

/*
 * NOTE: `.sc-field` is NOT an input primitive. templates/page-contact.php uses
 * it on the <label> wrapper (caption above control), matching the design; the
 * control itself carries `.sc-input`. The rule lives in assets/css/pages.css.
 */

/* Bordered white button (same shape as the language toggle). */
.sc-btn {
	border: 1px solid var(--sc-input-line);
	background: var(--sc-white);
	color: var(--sc-nav);
	border-radius: 4px;
	padding: 5px 11px;
	font-size: 12.5px;
	cursor: pointer;
	font-weight: 500;
	text-decoration: none;
}

/* Filled blue button — "Send message". */
.sc-btn-primary {
	align-self: flex-start;
	background: var(--sc-link);
	color: var(--sc-white);
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}

.sc-btn-primary:hover,
.sc-btn-primary:focus {
	background: var(--sc-link-hover);
	color: var(--sc-white);
	text-decoration: none;
}

/* Orange tag pill — used on case rows and on the case page. */
.sc-tag {
	font-size: 11.5px;
	color: var(--sc-tag-text);
	background: var(--sc-tag-bg);
	border: 1px solid var(--sc-tag-line);
	border-radius: 3px;
	padding: 2px 7px;
	line-height: 1.5;
	display: inline-block;
}

/* Generic page container for the narrow (About / Contact) views. */
.sc-narrow {
	max-width: 720px;
	margin: 0 auto;
	padding: 52px var(--sc-gut) 90px;
}

.sc-page-title {
	margin: 0 0 18px;
	color: var(--sc-text);
	font-size: 29px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

/* =========================================================================
   7. Responsive — the design's container queries as plain media queries
   ========================================================================= */

/*
 * The design's @container site (max-width: 560px) block, verbatim: the header
 * tightens its gap and the nav loses its inline offset. Its 900px block does
 * not touch the header, so there is nothing to port here for that breakpoint.
 */
@media (max-width: 560px) {
	:root {
		--sc-anchor-offset: 132px;
	}

	body.admin-bar {
		--sc-anchor-offset: 178px;
	}

	.sc-header__inner {
		padding-block: 8px;
		gap: 8px;
	}

	.sc-brand {
		margin-inline-end: auto;
	}

	.sc-header__inner > .sc-spacer {
		display: none;
	}

	.sc-brand__logo {
		width: 158px;
	}

	.sc-brand picture {
		width: 158px;
		height: 39px;
	}

	.sc-nav {
		order: 3;
		flex: 1 0 100%;
		margin-inline-start: 0;
		border-top: 1px solid var(--sc-line2);
		padding-top: 7px;
	}

	.sc-primary-menu {
		width: 100%;
		gap: 0;
	}

	.sc-primary-menu > li {
		flex: 1;
	}

	.sc-primary-menu a {
		flex: 1;
		min-height: 38px;
		text-align: center;
	}

	.sc-langtoggle {
		min-height: 36px;
	}

}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sc-skip-link,
	.sc-input {
		transition: none;
	}
}

/* =========================================================================
   8. Print
   ========================================================================= */

@media print {
	.no-print {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.sc-site {
		background: #fff;
	}

	a {
		color: #000;
		text-decoration: none;
	}
}