/*
Theme Name: MIS Theme
Theme URI: https://fajarsebastian.my.id/wordpress-themes/mis-theme
Author: Fajar Sebastian
Author URI: https://fajarsebastian.my.id
Description: Premium WordPress 7.0 Block Theme for PT Mitra Inti Sukses - Trusted Partner in Healthcare Solutions (ICU, Operating Room, Lab and Management Systems).
Version: 2.1.4
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mis-theme
Tags: block-styles, full-site-editing, one-column, custom-colors, custom-menu, featured-images, portfolio, medical-services
*/

/* Core CSS Custom Variables matching vital_integrity/DESIGN.md */
:root {
	--mis-font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
	--mis-font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
	
	--mis-primary: #00285a;
	--mis-primary-container: #043e81;
	--mis-secondary: #ba071b;
	--mis-secondary-alt: #ba071b;
	--mis-tertiary: #202a36;
	--mis-tertiary-container: #36404d;
	--mis-background: #f7f9fb;
	--mis-surface: #f7f9fb;
	--mis-surface-lowest: #ffffff;
	--mis-surface-low: #f2f4f6;
	--mis-surface-container: #eceef0;
	--mis-surface-high: #e6e8ea;
	--mis-surface-highest: #e0e3e5;
	--mis-surface-dim: #d8dadc;
	
	--mis-on-surface: #191c1e;
	--mis-on-surface-variant: #434750;
	--mis-outline-variant: #c3c6d2;
	--mis-outline: #737782;
	--mis-error: #ba1a1a;
	--mis-error-container: #ffdad6;
	--mis-on-error-container: #93000a;
	
	--mis-primary-fixed: #d7e2ff;
	--mis-primary-fixed-dim: #abc7ff;
	--mis-on-primary-fixed: #001b3f;
	--mis-on-primary-fixed-variant: #134589;
	
	--mis-secondary-fixed: #ffdad6;
	--mis-secondary-fixed-dim: #ffb3ad;
	--mis-on-secondary-fixed: #410003;
	--mis-on-secondary-fixed-variant: #930012;
	
	--mis-tertiary-fixed: #d9e3f3;
	--mis-tertiary-fixed-dim: #bdc7d7;
	--mis-on-tertiary-fixed: #121c28;
	--mis-on-tertiary-fixed-variant: #3e4854;
}

/* Base Reset & Typography */
html, body {
	margin: 0;
	padding: 0;
	background-color: var(--mis-background);
	color: var(--mis-on-surface);
	font-family: var(--mis-font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Sticky Header styling inside FSE theme blocks */
header.mis-sticky-header,
.mis-sticky-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 900 !important;
	background-color: #ffffff !important;
}

.wp-site-blocks > header:first-child,
.wp-site-blocks > div:first-child:has(header) {
	position: sticky !important;
	top: 0 !important;
	z-index: 900 !important;
	background-color: #ffffff !important;
}

/* Fix WordPress Admin Bar Overlap when logged in */
body.admin-bar header.mis-sticky-header,
body.admin-bar .mis-sticky-header,
body.admin-bar .wp-site-blocks > header:first-child,
body.admin-bar .wp-site-blocks > div:first-child:has(header) {
	top: 32px !important;
}

body.admin-bar #misMobileMenuDrawer {
	top: 112px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar header.mis-sticky-header,
	body.admin-bar .mis-sticky-header,
	body.admin-bar .wp-site-blocks > header:first-child,
	body.admin-bar .wp-site-blocks > div:first-child:has(header) {
		top: 46px !important;
	}
	body.admin-bar #misMobileMenuDrawer {
		top: 126px !important;
	}
}

/* Tailwind Classes Fallback Overrides */
.bg-primary { background-color: var(--mis-primary) !important; }
.text-primary { color: var(--mis-primary) !important; }
.bg-primary-container { background-color: var(--mis-primary-container) !important; }
.text-on-primary { color: #ffffff !important; }

.bg-secondary { background-color: var(--mis-secondary) !important; }
.text-secondary { color: var(--mis-secondary) !important; }

.bg-surface { background-color: var(--mis-surface) !important; }
.bg-background { background-color: var(--mis-background) !important; }
.bg-surface-container-lowest { background-color: var(--mis-surface-lowest) !important; }
.bg-surface-container-low { background-color: var(--mis-surface-low) !important; }
.bg-surface-container { background-color: var(--mis-surface-container) !important; }
.bg-surface-dim { background-color: var(--mis-surface-dim) !important; }

.text-on-surface { color: var(--mis-on-surface) !important; }
.text-on-surface-variant { color: var(--mis-on-surface-variant) !important; }

.border-outline-variant { border-color: var(--mis-outline-variant) !important; }
.border-outline { border-color: var(--mis-outline) !important; }

/* Font Families */
.font-headline-md, .font-headline-lg, .font-display-lg, .font-headline-lg-mobile, .font-headline-sm {
	font-family: var(--mis-font-heading) !important;
}
.font-label-md {
	font-family: var(--mis-font-body) !important;
}
.font-body-md, .font-body-lg {
	font-family: var(--mis-font-body) !important;
}

/* Material Symbols Icon Tweaks */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

/* Color & Layout Utilities Fallbacks for Site Editor and Frontend */
.bg-primary { background-color: var(--mis-primary) !important; }
.text-primary { color: var(--mis-primary) !important; }

.bg-primary-container { background-color: var(--mis-primary-container) !important; }
.text-on-primary { color: #ffffff !important; }

.bg-secondary { background-color: var(--mis-secondary) !important; }
.text-secondary { color: var(--mis-secondary) !important; }

.bg-secondary-alt { background-color: var(--mis-secondary-alt) !important; }
.text-secondary-alt { color: var(--mis-secondary-alt) !important; }

.bg-tertiary { background-color: var(--mis-tertiary) !important; }
.text-on-tertiary { color: #ffffff !important; }
.text-on-tertiary-container { color: var(--mis-on-tertiary-fixed) !important; }

.bg-surface { background-color: var(--mis-surface) !important; }
.bg-surface-container-lowest { background-color: var(--mis-surface-lowest) !important; }
.bg-surface-container-low { background-color: var(--mis-surface-low) !important; }
.bg-surface-container-high { background-color: var(--mis-surface-high) !important; }

.px-margin-mobile { padding-left: 16px !important; padding-right: 16px !important; }
@media (min-width: 768px) {
	.px-margin-desktop { padding-left: 80px !important; padding-right: 80px !important; }
}

/* Gutenberg Query Loop Grid Layout Fix */
.wp-block-query ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 24px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

@media (min-width: 768px) {
	.wp-block-query ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.wp-block-query ul.wp-block-post-template li {
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none !important;
}

/* Custom styles for native Gutenberg Read More block */
.wp-block-read-more {
	font-family: var(--wp--preset--font-family--montserrat), sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--mis-primary) !important;
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
	cursor: pointer;
}

.wp-block-read-more:hover {
	text-decoration: underline !important;
	color: var(--mis-primary-container) !important;
}

.wp-block-read-more::after {
	content: " \2192"; /* Right arrow symbol */
	margin-left: 4px;
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	transition: transform 0.2s ease;
}

.wp-block-read-more:hover::after {
	transform: translateX(4px);
}

/* Fix Gutenberg post featured image container height and overflow */
.wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: inherit !important;
	border-radius: inherit !important;
}