/*
 * SMAN 37 Jakarta — site styles for everything that is not an Elementor layout
 * (pages, posts, archives, search, 404) plus the legacy block presets the old
 * ecology-park content still references.
 */
:root {
	--sman-orange: #ff7029;       /* decorative accent (bars, lines, icons) */
	--sman-orange-text: #f26522;  /* orange behind large white text: 3.15:1 */
	--sman-navy: #202636;
	--sman-dark: #192127;
	--sman-hover: #1b1e3f;
	--sman-blue: #0693e3;         /* decorative blue */
	--sman-blue-text: #0679bf;    /* buttons/links with white or on white: 4.67:1 */
	--sman-grey: #c3c5cc;
	--sman-light: #eeeeee;
	--sman-ink: #1f2937;
	--sman-muted: #5b6270;
	--sman-radius: 14px;
	--sman-content: 1170px;
	--sman-font-head: "Rajdhani", "Segoe UI", system-ui, sans-serif;
	--sman-font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;

	/* legacy preset variables used by imported block content */
	--wp--preset--color--secondary: var(--sman-orange);
	--wp--preset--color--secondary-one: var(--sman-navy);
	--wp--preset--color--secaccent: var(--sman-dark);
	--wp--preset--color--hover: var(--sman-hover);
	--wp--preset--color--primary: var(--sman-blue);
	--wp--preset--color--accent: var(--sman-light);
	--wp--preset--color--secondary-two: var(--sman-grey);
	--wp--preset--font-family--rajdhani: var(--sman-font-head);
	--wp--preset--font-family--public-sans: var(--sman-font-body);
}

body {
	font-family: var(--sman-font-body);
	color: var(--sman-ink);
	background: #fff;
	line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--sman-font-head); color: #0b0f19; line-height: 1.2; }
a { color: var(--sman-blue-text); }
a:hover, a:focus { color: var(--sman-hover); }
:focus-visible { outline: 3px solid var(--sman-orange); outline-offset: 2px; }

/* ---------- title banner ---------- */
.sman37-title-banner {
	position: relative;
	padding: clamp(56px, 9vw, 110px) 20px clamp(40px, 6vw, 72px);
	background: var(--sman-navy) var(--banner-image, none) center / cover no-repeat;
	color: #fff;
	isolation: isolate;
}
.sman37-title-banner::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(25, 33, 39, .92) 0%, rgba(32, 38, 54, .78) 55%, rgba(32, 38, 54, .55) 100%);
}
.sman37-title-banner__inner {
	max-width: var(--sman-content);
	margin: 0 auto;
	border-left: 5px solid var(--sman-orange);
	padding-left: clamp(16px, 2.4vw, 28px);
}
.sman37-title-banner__kicker {
	margin: 0 0 .35rem;
	font-family: var(--sman-font-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--sman-orange);
}
.sman37-title-banner__title {
	margin: 0; color: #fff;
	font-size: clamp(28px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.5px;
}
.sman37-breadcrumb { margin-top: .9rem; font-size: 14px; color: var(--sman-grey); }
.sman37-breadcrumb a { color: #fff; text-decoration: none; }
.sman37-breadcrumb a:hover { text-decoration: underline; color: #fff; }
.sman37-breadcrumb span[aria-hidden] { margin: 0 .35rem; color: var(--sman-orange); }

/* ---------- main content ---------- */
.site-main.sman37-main {
	max-width: var(--sman-content);
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px) 20px clamp(48px, 7vw, 88px);
}
.sman37-main .page-content { font-size: 17px; }
.sman37-main .page-content > * + * { margin-top: 1.05em; }
.sman37-main .page-content h2 { font-size: clamp(26px, 3.2vw, 36px); margin-top: 1.6em; }
.sman37-main .page-content h3 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 1.4em; }
.sman37-main .page-content img { max-width: 100%; height: auto; border-radius: var(--sman-radius); }
.sman37-main .page-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 16px; }
.sman37-main .page-content td, .sman37-main .page-content th { padding: .45em .7em; border-bottom: 1px solid #e5e7eb; vertical-align: top; text-align: left; }
.sman37-main .page-content tr:nth-child(even) td { background: #f8f9fb; }
.sman37-main .page-content table div { margin: 0; }
/* legacy tables carry fixed width/height attributes (e.g. width="996"): fit them, scroll on small screens */
.sman37-main .page-content table { width: 100% !important; height: auto !important; }
@media (max-width: 767px) {
	.sman37-main .page-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.sman37-main .page-content blockquote, .sman37-main .page-content .wp-block-quote {
	border-left: 5px solid var(--sman-orange); margin-left: 0; padding: .6em 1.2em; background: #fff7f2; border-radius: 0 var(--sman-radius) var(--sman-radius) 0;
}
.sman37-main .page-content .wp-block-separator, .sman37-main .page-content hr { border: 0; border-top: 2px solid var(--sman-light); margin: 2em 0; }
.sman37-main .page-content .wp-block-table { overflow-x: auto; }
.sman37-main .page-content ul, .sman37-main .page-content ol { padding-left: 1.4em; }
.sman37-main .page-content .has-text-align-center { text-align: center; }
.sman37-main .page-content .wp-block-file { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; }
.sman37-main .page-content .wp-block-file__embed { width: 100%; min-height: 600px; border: 1px solid #e5e7eb; border-radius: var(--sman-radius); }

.sman37-post-meta { color: var(--sman-muted); font-size: 15px; margin: 0 0 1.2rem; }
.sman37-featured { margin: 0 0 1.6rem; }
.sman37-featured img { width: 100%; height: auto; border-radius: var(--sman-radius); }
.sman37-post-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 2px solid var(--sman-light); font-family: var(--sman-font-head); font-weight: 600; }
.sman37-post-nav a { text-decoration: none; }

/* ---------- buttons (block buttons + generic) ---------- */
.wp-block-button__link, .wp-element-button, button, input[type="submit"], .sman37-btn {
	font-family: var(--sman-font-head); font-weight: 600; font-size: 16px;
	background: var(--sman-blue-text); color: #fff; border: 0; border-radius: 999px;
	padding: .7em 1.6em; text-decoration: none; display: inline-block;
}
.wp-block-button__link:hover, .wp-element-button:hover, button:hover, input[type="submit"]:hover, .sman37-btn:hover { background: var(--sman-hover); color: #fff; }

/* ---------- legacy preset classes from ecology-park ---------- */
.has-secondary-color { color: var(--sman-orange-text) !important; }
.has-secondary-background-color { background-color: var(--sman-orange-text) !important; }
.has-secondary-one-color { color: var(--sman-navy) !important; }
.has-secondary-one-background-color { background-color: var(--sman-navy) !important; }
.has-secaccent-background-color { background-color: var(--sman-dark) !important; }
.has-primary-color { color: var(--sman-blue-text) !important; }
.has-primary-background-color { background-color: var(--sman-blue-text) !important; }
.has-accent-background-color { background-color: var(--sman-light) !important; }
.has-rajdhani-font-family { font-family: var(--sman-font-head) !important; }
.has-public-sans-font-family { font-family: var(--sman-font-body) !important; }

/* ---------- news grid (archives, search) ---------- */
.sman37-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1024px) { .sman37-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sman37-post-grid { grid-template-columns: 1fr; } }
.sman37-card { background: #fff; border: 1px solid #eceef2; border-radius: var(--sman-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.sman37-card:hover { box-shadow: 0 12px 30px rgba(25, 33, 39, .12); transform: translateY(-2px); }
.sman37-card__media { display: block; aspect-ratio: 16 / 10; background: var(--sman-navy); }
.sman37-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sman37-card__body { padding: 18px 20px 22px; }
.sman37-card__date { margin: 0 0 .3rem; font-size: 14px; color: var(--sman-muted); }
.sman37-card__title { margin: 0 0 .5rem; font-size: 21px; line-height: 1.25; }
.sman37-card__title a { color: #0b0f19; text-decoration: none; }
.sman37-card__title a:hover { color: var(--sman-blue-text); }
.sman37-card__excerpt { margin: 0; font-size: 15px; color: var(--sman-muted); }
.navigation.pagination { margin-top: 2.5rem; font-family: var(--sman-font-head); font-weight: 600; }
.navigation.pagination .page-numbers { display: inline-block; padding: .35em .8em; border-radius: 8px; text-decoration: none; }
.navigation.pagination .page-numbers.current { background: var(--sman-navy); color: #fff; }

/* ---------- search form & 404 ---------- */
.search-form { display: flex; gap: .5rem; max-width: 520px; margin: 1rem 0 2rem; }
.search-form .search-field { flex: 1; padding: .7em 1em; border: 1px solid var(--sman-grey); border-radius: 999px; font: inherit; }
.sman37-404__links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: 0; list-style: none; font-family: var(--sman-font-head); font-weight: 600; font-size: 18px; }

/* ---------- Elementor helpers used by the generated layouts ---------- */
.sman37-label {
	display: block; width: 100%;
	background: var(--sman-orange-text); color: #fff;
	font-family: var(--sman-font-head); font-weight: 700; font-size: 19px; letter-spacing: .05em; text-transform: uppercase;
	border-radius: 8px; padding: 6px 20px; margin: 0;
}
.sman37-sticky-header { position: sticky; top: 0; z-index: 99; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.sman37-doc-missing { padding: .8em 1.1em; border-left: 5px solid var(--sman-orange); background: #fff7f2; border-radius: 0 10px 10px 0; font-style: italic; }

/* ---------- sortable table (page 858) ---------- */
.sman37-sortable table { font-size: 15px; }
.sman37-sortable thead th { background: var(--sman-navy); color: #fff; cursor: pointer; white-space: nowrap; font-family: var(--sman-font-head); font-size: 15px; letter-spacing: .03em; }
.sman37-sortable thead th::after { content: " \2195"; opacity: .45; }
.sman37-sortable thead th[aria-sort="ascending"]::after { content: " \25B2"; opacity: 1; }
.sman37-sortable thead th[aria-sort="descending"]::after { content: " \25BC"; opacity: 1; }

/* ---------- Elementor layouts (header, footer, home) ---------- */
.sman37-brand__name .elementor-heading-title { display: flex; flex-direction: column; gap: 3px; }
.sman37-brand__tagline { display: block; font-family: var(--sman-font-body); font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--sman-muted); line-height: 1.2; }
.sman37-brand__name a { color: inherit; text-decoration: none; }
.sman37-topbar a { text-decoration: none; }
.sman37-topbar .elementor-icon-list-text { transition: color .15s ease; }
.sman37-topbar a:hover .elementor-icon-list-text { color: #fff; }
.sman37-topbar__search .hfe-search-icon-toggle i, .sman37-topbar__search .hfe-search-icon-toggle svg { color: #fff; fill: #fff; }

.sman37-label.sman37-label--center .elementor-heading-title { text-align: center; }
.sman37-label .elementor-heading-title {
	display: block; background: var(--sman-orange-text); color: #fff;
	font-family: var(--sman-font-head); font-weight: 700; font-size: 19px; letter-spacing: .06em; text-transform: uppercase;
	border-radius: 8px; padding: 6px 20px; line-height: 1.4;
}

/* hero */
.sman37-hero { overflow: hidden; }
.sman37-slide__box { border-left: 5px solid var(--sman-orange); padding-left: clamp(16px, 2.2vw, 28px); }
.sman37-slide--noimg { background-image: linear-gradient(120deg, #202636 0%, #202636 45%, #7a3417 100%); }
.sman37-hero .slick-dots { position: absolute; bottom: 22px; left: 0; right: 0; }
.sman37-hero .premium-carousel-wrapper { position: relative; }

/* videos */
.sman37-video-card .elementor-custom-embed-image-overlay, .sman37-video-card .elementor-wrapper { border-radius: 14px; overflow: hidden; }
.sman37-video-card { background: #fff; border-radius: 16px; padding: 12px 12px 18px !important; box-shadow: 0 10px 28px rgba(25,33,39,.08); }

/* badges */
.sman37-badge .elementor-icon-box-title { margin: 0 0 2px; }

/* services grid */
.sman37-service .elementor-image-box-img img { width: 100%; max-width: 92px; aspect-ratio: 1; object-fit: contain; transition: transform .2s ease; }
.sman37-service a:hover img { transform: translateY(-3px) scale(1.04); }
.sman37-service .elementor-image-box-title { line-height: 1.2; margin-top: 4px; }
.sman37-service .elementor-image-box-title a { color: var(--sman-navy); text-decoration: none; }
.sman37-service .elementor-image-box-description:empty { display: none; }

/* news grid (Essential Addons post grid) */
.sman37-news .eael-grid-post-holder { border-radius: var(--sman-radius); overflow: hidden; border: 1px solid #eceef2; box-shadow: none; transition: box-shadow .2s ease, transform .2s ease; height: 100%; }
.sman37-news .eael-grid-post-holder:hover { box-shadow: 0 12px 30px rgba(25, 33, 39, .12); transform: translateY(-2px); }
.sman37-news .eael-entry-thumbnail img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.sman37-news .eael-entry-title a { color: var(--sman-navy); }
.sman37-news .eael-post-elements-readmore-btn { font-family: var(--sman-font-head); font-weight: 700; color: var(--sman-blue-text); }
.sman37-news .eael-entry-meta, .sman37-news .eael-posted-on { color: var(--sman-muted); font-size: 14px; }

/* footer */
.sman37-footer a { text-decoration: none; }
.sman37-footer__contact .elementor-icon-box-title a, .sman37-footer__contact .elementor-icon-box-description a { color: inherit; }
.sman37-footer__main { border-top: 1px solid rgba(195, 197, 204, .15); }
.sman37-footer__menu .hfe-nav-menu__layout-vertical .menu-item a.hfe-menu-item { padding-left: 0 !important; }
.sman37-copyright, .sman37-copyright a, .sman37-copyright .hfe-copyright-wrapper { color: var(--sman-grey); font-size: 14px; }

/* Elementor-built page banner (Kabar Terkini) */
.sman37-page-banner > .e-con-inner { border-left: 5px solid var(--sman-orange); padding-left: clamp(16px, 2.4vw, 28px); }

/* header on tablet/mobile: the HFE dropdown must not push the row wider than the screen */
@media (max-width: 1024px) {
	.sman37-header .sman37-nav { flex: 0 0 auto !important; min-width: 0; margin-left: auto; position: static !important; }
	.sman37-header .sman37-nav .elementor-widget-container { position: static; }
	.sman37-header .sman37-nav nav.hfe-dropdown { background: #fff; box-shadow: 0 16px 30px rgba(25, 33, 39, .15); border-radius: 0 0 12px 12px; }
	.sman37-header .sman37-nav nav.hfe-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 50; }
	.sman37-header > .e-con-inner { position: relative; }
	.sman37-brand { flex-wrap: nowrap !important; min-width: 0; }
	.sman37-brand__name { min-width: 0; }
}
@media (max-width: 767px) {
	.sman37-brand__logo img { width: 42px !important; }
	.sman37-brand__tagline { font-size: 11px; }
}