/*
Theme Name: Sesama Labs Editorial
Theme URI: https://sesamalabs.id
Author: Sesama Labs
Author URI: https://sesamalabs.id
Description: Block theme editorial untuk portal riset & berita Sesama Labs — News, Research Breakdown, dan Topics.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sesamalabs
*/

/* ===========================================================
   BASE
=========================================================== */
body {
	-webkit-font-smoothing: antialiased;
}
img { height: auto; }
.wp-block-post-featured-image img,
.wp-block-query img { border: 1px solid var(--wp--preset--color--rule); }

.sesamalabs-eyebrow,
.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-deep) !important;
}
.wp-block-post-terms a { color: var(--wp--preset--color--gold-deep) !important; }

.sesamalabs-reading-time,
.sesamalabs-meta {
	font-size: 12px;
	color: var(--wp--preset--color--faint);
}

/* ===========================================================
   HEADER
=========================================================== */
.sesamalabs-header {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--ivory);
}
.sesamalabs-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1;
}
.sesamalabs-logo-tagline {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--charcoal);
	margin-top: 3px;
}
.sesamalabs-header .wp-block-navigation a {
	font-size: 14px;
	font-weight: 500;
}
.sesamalabs-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-deep); }

/* ===========================================================
   HERO (front page)
=========================================================== */
.sesamalabs-hero-grid {
	display: grid;
	grid-template-columns: 2.15fr 0.78fr;
	gap: 52px;
	align-items: start;
}
.sesamalabs-hero-grid > * { min-width: 0; }
.sesamalabs-hero-label { margin-bottom: 22px; }

.sesamalabs-featured-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.sesamalabs-featured-query .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 40px;
	align-items: start;
}
.sesamalabs-hero-text .wp-block-post-title {
	font-size: 40px !important;
	line-height: 1.14 !important;
	letter-spacing: -0.01em;
	margin: 20px 0 !important;
}
.sesamalabs-hero-text .wp-block-post-excerpt {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal);
	margin-bottom: 28px !important;
	max-width: 440px;
}
.sesamalabs-hero-text .wp-block-read-more a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	text-decoration: none !important;
	background: none !important;
}
.sesamalabs-hero-text .wp-block-read-more a:hover { color: var(--wp--preset--color--gold-deep); border-color: var(--wp--preset--color--gold-deep); }
.sesamalabs-hero-photo img { width: 100%; height: 430px; object-fit: cover; border: 1px solid var(--wp--preset--color--rule); }

.sesamalabs-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	text-decoration: none !important;
}
.sesamalabs-link-arrow:hover { color: var(--wp--preset--color--gold-deep); border-color: var(--wp--preset--color--gold-deep); }

.sesamalabs-trending-panel h2 {
	font-size: 13px !important;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--ink) !important;
	margin-bottom: 20px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sesamalabs-trending-panel .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.sesamalabs-trending-panel li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sesamalabs-trending-panel li:last-child { border-bottom: none; }
.sesamalabs-trending-panel .wp-block-post-featured-image { width: 58px; flex-shrink: 0; margin: 0 !important; }
.sesamalabs-trending-panel .wp-block-post-featured-image img { width: 58px; height: 58px; object-fit: cover; }
.sesamalabs-trending-panel .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.32 !important;
	margin: 0 0 6px !important;
}
.sesamalabs-trending-panel .wp-block-post-title a:hover { color: var(--wp--preset--color--gold-deep); }

/* ===========================================================
   SECTION GRIDS (News / Related / Archive)
=========================================================== */
.sesamalabs-section { border-top: 1px solid var(--wp--preset--color--rule); }
.sesamalabs-section-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.sesamalabs-news-grid .wp-block-post-template,
.sesamalabs-archive-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sesamalabs-archive-grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr); gap: 44px; }
.sesamalabs-news-grid .wp-block-post-featured-image img,
.sesamalabs-archive-grid .wp-block-post-featured-image img { width: 100%; height: 170px; object-fit: cover; margin-bottom: 18px; }
.sesamalabs-archive-grid .wp-block-post-featured-image img { height: 200px; }
.sesamalabs-news-grid .wp-block-post-title,
.sesamalabs-archive-grid .wp-block-post-title {
	font-size: 18px !important;
	line-height: 1.36 !important;
	margin: 12px 0 12px !important;
}
.sesamalabs-archive-grid .wp-block-post-title { font-size: 19px !important; }
.sesamalabs-news-grid .wp-block-post-title a:hover,
.sesamalabs-archive-grid .wp-block-post-title a:hover { color: var(--wp--preset--color--gold-deep); }
.sesamalabs-archive-grid .wp-block-post-excerpt {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--wp--preset--color--charcoal);
	margin-bottom: 12px !important;
}

/* ===========================================================
   RESEARCH BREAKDOWN (asymmetric grid)
=========================================================== */
.sesamalabs-breakdown-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; }
.sesamalabs-breakdown-feature img { width: 100%; height: 340px; object-fit: cover; border: 1px solid var(--wp--preset--color--rule); margin-bottom: 22px !important; }
.sesamalabs-breakdown-feature .wp-block-post-title { font-size: 27px !important; line-height: 1.24 !important; margin: 16px 0 !important; }
.sesamalabs-breakdown-feature .wp-block-post-excerpt { font-size: 15.5px; line-height: 1.72; color: var(--wp--preset--color--charcoal); max-width: 520px; }

.sesamalabs-breakdown-side { display: flex; flex-direction: column; gap: 36px; }
.sesamalabs-breakdown-side > .wp-block-group + .wp-block-group { border-top: 1px solid var(--wp--preset--color--rule); padding-top: 36px; }
.sesamalabs-breakdown-side img { width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--wp--preset--color--rule); margin-bottom: 16px !important; }
.sesamalabs-breakdown-side .wp-block-post-title { font-size: 18px !important; line-height: 1.34 !important; margin: 10px 0 !important; }
.sesamalabs-breakdown-side .wp-block-post-excerpt { font-size: 14px; line-height: 1.62; color: var(--wp--preset--color--charcoal); }

/* ===========================================================
   TOPIC TAG CLOUD
=========================================================== */
.sesamalabs-tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.sesamalabs-tag-cloud a {
	border: 1px solid var(--wp--preset--color--rule);
	padding: 11px 20px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none !important;
}
.sesamalabs-tag-cloud a:hover { border-color: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--gold-deep); }

/* ===========================================================
   NEWSLETTER BAND
=========================================================== */
.sesamalabs-newsletter-band {
	background: var(--wp--preset--color--ivory-deep);
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: center;
}
.sesamalabs-newsletter-band form { display: flex; justify-content: center; max-width: 440px; margin: 0 auto; }
.sesamalabs-newsletter-band input[type="email"] {
	flex: 1; padding: 14px 18px; border: 1px solid var(--wp--preset--color--ink); border-right: none;
	background: var(--wp--preset--color--ivory); font-size: 14px; font-family: inherit; color: var(--wp--preset--color--ink);
}
.sesamalabs-newsletter-band button { border-radius: 0; border: 1px solid var(--wp--preset--color--ink); cursor: pointer; }

/* ===========================================================
   BREADCRUMB
=========================================================== */
.sesamalabs-breadcrumb { font-size: 13px; color: var(--wp--preset--color--faint); }
.sesamalabs-breadcrumb a:hover { color: var(--wp--preset--color--gold-deep); }

/* ===========================================================
   SINGLE ARTICLE
=========================================================== */
.sesamalabs-dek {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal);
	max-width: 680px;
}
.sesamalabs-byline {
	font-size: 13.5px;
	color: var(--wp--preset--color--faint);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 18px;
}
.entry-content { max-width: 700px; font-size: 17px; line-height: 1.82; color: var(--wp--preset--color--charcoal); }
.entry-content h2 { scroll-margin-top: 100px; margin-top: 44px !important; }
.entry-content p { margin-bottom: 24px; }

/* Findings box pattern */
.sesamalabs-findings-box {
	background: var(--wp--preset--color--ivory-deep);
	border-left: 3px solid var(--wp--preset--color--gold);
	padding: 26px 32px;
}
.sesamalabs-findings-box ul { margin: 0; }
.sesamalabs-findings-box li { font-size: 15.5px; line-height: 1.65; color: var(--wp--preset--color--charcoal); margin-bottom: 10px; }
.sesamalabs-findings-box li::marker { color: var(--wp--preset--color--gold-deep); }

/* Sidebar */
.sesamalabs-sidebar-title {
	font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--faint); border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 14px; margin-bottom: 18px !important;
}
#sesamalabs-toc { list-style: none; margin: 0; padding: 0; }
#sesamalabs-toc li { margin-bottom: 12px; }
#sesamalabs-toc a { font-size: 14px; color: var(--wp--preset--color--charcoal); text-decoration: none; }
#sesamalabs-toc a:hover, #sesamalabs-toc a.active { color: var(--wp--preset--color--gold-deep); }

.sesamalabs-related-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.sesamalabs-related-query li { padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.sesamalabs-related-query li:last-child { border-bottom: none; padding-bottom: 0; }
.sesamalabs-related-query .wp-block-post-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.35 !important; margin: 0 0 6px !important;
}
.sesamalabs-related-query .wp-block-post-title a:hover { color: var(--wp--preset--color--gold-deep); }

.sesamalabs-sidebar-newsletter input { width: 100%; padding: 11px 12px; border: 1px solid var(--wp--preset--color--rule); background: transparent; font-size: 13.5px; font-family: inherit; margin-bottom: 10px; }
.sesamalabs-sidebar-newsletter button { width: 100%; border-radius: 0; }

/* ===========================================================
   FOOTER
=========================================================== */
.sesamalabs-footer { background: var(--wp--preset--color--ink); color: rgba(248,245,238,0.68); }
.sesamalabs-footer h4 { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248,245,238,0.38); font-weight: 600; font-family: var(--wp--preset--font-family--body); }
.sesamalabs-footer a { color: rgba(248,245,238,0.72); text-decoration: none; }
.sesamalabs-footer a:hover { color: var(--wp--preset--color--gold); }
.sesamalabs-footer .wp-block-navigation a { color: rgba(248,245,238,0.72); font-size: 13.5px; }
.sesamalabs-footer-bottom { border-top: 1px solid rgba(248,245,238,0.12); font-size: 12px; color: rgba(248,245,238,0.4); }
.sesamalabs-footer-bottom a { color: rgba(248,245,238,0.4); }



/* ===========================================================
   SAFETY RESET (prevents horizontal scroll / overflow bugs)
=========================================================== */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

/* ===========================================================
   NAVIGATION — hamburger / overlay menu styling
=========================================================== */
.wp-block-navigation .wp-block-navigation__responsive-container-open {
	background: none;
	border: none;
	color: var(--wp--preset--color--ink);
	padding: 6px;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ivory) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px !important;
	font-weight: 600;
	color: var(--wp--preset--color--ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* ===========================================================
   RESPONSIVE — tablet (≤ 1100px)
=========================================================== */
@media (max-width: 1100px) {
	.sesamalabs-hero-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.sesamalabs-trending-panel { grid-column: 1 / -1; margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--rule); }
	.sesamalabs-breakdown-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ===========================================================
   RESPONSIVE — small tablet / large phone (≤ 900px)
=========================================================== */
@media (max-width: 900px) {
	/* Container padding: 40px is far too wide once the viewport itself
	   is only ~360–430px. Target every section wrapper carrying the
	   original 40px inline padding, regardless of which template it's in. */
	[style*="padding-left:40px"] { padding-left: 24px !important; }
	[style*="padding-right:40px"] { padding-right: 24px !important; }
	[style*="padding: 22px 40px"] { padding: 16px 20px !important; }

	.sesamalabs-hero-grid { grid-template-columns: 1fr; }
	.sesamalabs-featured-query .wp-block-post-template > li {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.sesamalabs-hero-photo img,
	.sesamalabs-hero-photo img[style*="height:430px"] { height: 240px !important; }
	.sesamalabs-hero-text .wp-block-post-title { font-size: 30px !important; line-height: 1.2 !important; }

	.sesamalabs-news-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.sesamalabs-archive-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); gap: 28px; }

	.sesamalabs-breakdown-feature img { height: 220px !important; }
	.sesamalabs-breakdown-side img { height: 130px !important; }

	/* Single article */
	.wp-block-post-featured-image img[style*="height:440px"] { height: 220px !important; }
	h1.wp-block-post-title[style*="font-size:38px"],
	.wp-block-post-title[style*="font-size:38px"] { font-size: 27px !important; line-height: 1.22 !important; }
	.sesamalabs-dek { font-size: 16.5px !important; }
	.entry-content { font-size: 16px !important; }
	.sesamalabs-findings-box { padding: 20px !important; }

	.sesamalabs-newsletter-band h2 { font-size: 26px !important; }
	[style*="padding-top:70px"] { padding-top: 44px !important; }
	[style*="padding-bottom:70px"] { padding-bottom: 44px !important; }
	[style*="padding-top:110px"] { padding-top: 60px !important; }
	[style*="padding-bottom:120px"] { padding-bottom: 60px !important; }
}

/* ===========================================================
   RESPONSIVE — phone (≤ 600px)
=========================================================== */
@media (max-width: 600px) {
	[style*="padding-left:40px"] { padding-left: 18px !important; }
	[style*="padding-right:40px"] { padding-right: 18px !important; }

	.sesamalabs-logo-tagline { display: none; }
	.sesamalabs-header .wp-block-button { display: none; }
	.sesamalabs-header .wp-block-search { width: 32px; overflow: hidden; }

	.sesamalabs-news-grid .wp-block-post-template,
	.sesamalabs-archive-grid .wp-block-post-template,
	.sesamalabs-breakdown-side { grid-template-columns: 1fr !important; }

	.sesamalabs-tag-cloud a { padding: 9px 14px; font-size: 13px; }

	.sesamalabs-newsletter-band form { flex-direction: column; gap: 10px; }
	.sesamalabs-newsletter-band input[type="email"] { border-right: 1px solid var(--wp--preset--color--ink); }

	.sesamalabs-footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
	.wp-block-columns .wp-block-column { margin-bottom: 28px !important; }
}