/* ==========================================================================
   DSM Design System — CSS Custom Properties
   Source: UI UX Pro Max v2.2.3 — design-system/diabetes-society-of-maldives/MASTER.md
   Style:  Accessible & Ethical (WCAG AAA)
   ========================================================================== */

:root {
	/* ── Colors (Medical Blue) ── */
	--dsm-primary:       #76c5f0;  /* Primary Blue */
	--dsm-secondary:     #22D3EE;  /* Secondary Cyan */
	--dsm-cta:           #0369a1;  /* CTA / Accent Blue */
	--dsm-background:    #f0f9ff;  /* Light Sky Background */
	--dsm-text:          #0C4A6E;  /* Navy Blue Text */
	--dsm-white:         #FFFFFF;
	--dsm-border:        #E2E8F0;  /* Border Gray */
	--dsm-muted:         #475569;  /* Muted Text (slate-600 minimum) */
	--dsm-footer-bg:     #0C4A6E;  /* Sky-900 (footer, dark sections — primary blue family) */
	--dsm-footer-link:   #CFFAFE;  /* cyan-100 — high contrast on dark cyan footer (AA) */
	--dsm-on-dark:       #F8FAFC;  /* Primary text on dark surfaces */
	--dsm-on-dark-muted: #E0F2FE;  /* Secondary text on dark surfaces (sky-100) */
	--dsm-on-dark-accent: #67E8F9; /* Accent/icon color on dark surfaces (cyan-300) */
	--dsm-border-subtle: rgba(12, 74, 110, 0.1);
	--dsm-ring:          rgba(118, 197, 240, 0.35);

	/* ── shadcn-style semantic aliases (use with new components) ── */
	--background:        #f1f5f9;
	--foreground:        var(--dsm-text);
	--card:              #ffffff;
	--card-foreground:   var(--dsm-text);
	--primary:           var(--dsm-primary);
	--primary-foreground: #0C4A6E;
	--muted:             #f1f5f9;
	--muted-foreground:  var(--dsm-muted);
	--border:            var(--dsm-border);
	--ring:              var(--dsm-ring);

	/* ── Typography (MASTER.md: Figtree + Noto Sans) ── */
	--dsm-font-heading:  'Figtree', system-ui, sans-serif;
	--dsm-font-body:     'Noto Sans', system-ui, sans-serif;

	/* Font weights */
	--dsm-fw-light:      300;
	--dsm-fw-regular:    400;
	--dsm-fw-medium:     500;
	--dsm-fw-semibold:   600;
	--dsm-fw-bold:       700;

	/* ── Spacing Scale ── */
	--dsm-space-xs:      4px;   /* 0.25rem — Tight gaps */
	--dsm-space-sm:      8px;   /* 0.5rem  — Icon gaps, inline spacing */
	--dsm-space-md:      16px;  /* 1rem    — Standard padding */
	--dsm-space-lg:      24px;  /* 1.5rem  — Section padding */
	--dsm-space-xl:      32px;  /* 2rem    — Large gaps */
	--dsm-space-2xl:     48px;  /* 3rem    — Section margins */
	--dsm-space-3xl:     64px;  /* 4rem    — Hero padding */
	--dsm-space-4xl:     96px;  /* 6rem    — Extra large */

	/* ── Border Radius ── */
	--dsm-radius-btn:    8px;
	--dsm-radius-card:   12px;
	--dsm-radius-modal:  16px;
	--dsm-radius-sm:     4px;

	/* ── Shadows ── */
	--dsm-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.04);
	--dsm-shadow-md:     0 4px 12px rgba(15, 23, 42, 0.06);
	--dsm-shadow-lg:     0 12px 24px rgba(15, 23, 42, 0.08);
	--dsm-shadow-xl:     0 20px 40px rgba(15, 23, 42, 0.1);

	/* ── Glassmorphism ── */
	--dsm-glass-bg:        rgba(255, 255, 255, 0.72);
	--dsm-glass-bg-strong: rgba(255, 255, 255, 0.90);
	--dsm-glass-blur:      blur(14px);
	--dsm-glass-blur-sm:   blur(8px);
	--dsm-glass-inset:     inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.85);

	/* ── Transitions ── */
	--dsm-transition:    200ms ease;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */
/* html body beats Kadence `body` when our sheet loads later (priority 999). */
html body {
	font-family: var(--dsm-font-body), system-ui, sans-serif;
	font-weight: var(--dsm-fw-regular);
	font-size: 16px;
	line-height: 1.6;
	color: var(--foreground);
	background-color: var(--background) !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dsm-font-heading);
	font-weight: var(--dsm-fw-semibold);
	color: var(--dsm-footer-bg);
	line-height: 1.3;
}

/* ── Minimum font size 16px+ for accessibility ── */
p, li, td, th, label, input, textarea, select {
	font-size: 1rem;
}

/* ==========================================================================
   Links — underline for body content; none for UI (buttons, nav, cards)
   ========================================================================== */
a {
	color: var(--dsm-primary);
	text-decoration: none;
	transition: color var(--dsm-transition), text-decoration-color var(--dsm-transition);
}

a:hover {
	color: #4da8d4;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:focus-visible {
	outline: 3px solid var(--dsm-primary);
	outline-offset: 2px;
	border-radius: var(--dsm-radius-sm);
}

.dsm-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--dsm-primary) 40%, transparent);
}

.dsm-prose a:hover {
	text-decoration-color: var(--dsm-primary);
}

a.dsm-btn,
a.dsm-btn:hover,
a.dsm-btn:focus,
a.dsm-btn:focus-visible,
.custom-logo-link,
.custom-logo-link:hover,
#masthead .primary-navigation a,
#masthead .mobile-navigation a,
.drawer-nav-drop-wrap a,
#colophon a,
.dsm-breadcrumbs-wrap a,
a.dsm-service-card,
a.dsm-service-card:hover {
	text-decoration: none;
}

#masthead ul.menu a,
#masthead .header-html-inner a,
.mobile-drawer ul.menu a {
	text-decoration: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.dsm-btn {
	font-family: var(--dsm-font-heading);
	font-weight: var(--dsm-fw-semibold);
	font-size: 1rem;
	border-radius: var(--dsm-radius-btn);
	padding: 12px 24px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dsm-space-sm);
	transition: background-color var(--dsm-transition), color var(--dsm-transition), border-color var(--dsm-transition), box-shadow var(--dsm-transition), transform var(--dsm-transition);
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
	box-shadow: var(--dsm-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dsm-btn:hover,
.dsm-btn:focus,
.dsm-btn:focus-visible {
	text-decoration: none;
}

.dsm-btn:focus-visible {
	outline: 3px solid var(--dsm-primary);
	outline-offset: 2px;
}

.dsm-btn-primary {
	background-color: var(--dsm-primary);
	color: var(--dsm-footer-bg);
}

.dsm-btn-primary:hover {
	background-color: #4da8d4;
	color: var(--dsm-footer-bg);
	transform: translateY(-1px);
	box-shadow: var(--dsm-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dsm-btn-secondary {
	background-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--dsm-primary);
	border: 2px solid var(--dsm-primary);
}

.dsm-btn-secondary:hover {
	background-color: var(--dsm-primary);
	color: var(--dsm-footer-bg);
	box-shadow: var(--dsm-shadow-md);
}

.dsm-btn-donate {
	background-color: var(--dsm-cta);
	color: var(--dsm-white);
}

.dsm-btn-donate:hover {
	background-color: #075985;
	color: var(--dsm-white);
	transform: translateY(-1px);
	box-shadow: var(--dsm-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.dsm-card {
	background: var(--dsm-glass-bg);
	backdrop-filter: var(--dsm-glass-blur);
	-webkit-backdrop-filter: var(--dsm-glass-blur);
	color: var(--card-foreground);
	border: 1px solid var(--dsm-border-subtle);
	border-radius: var(--dsm-radius-card);
	padding: var(--dsm-space-lg);
	box-shadow: var(--dsm-shadow-sm), var(--dsm-glass-inset);
	transition: box-shadow var(--dsm-transition), border-color var(--dsm-transition), transform var(--dsm-transition);
	cursor: pointer;
}

.dsm-card:hover {
	box-shadow: var(--dsm-shadow-md), var(--dsm-glass-inset);
	border-color: color-mix(in srgb, var(--dsm-primary) 18%, var(--dsm-border));
	transform: translateY(-1px);
}

.dsm-card:focus-within {
	outline: 3px solid var(--dsm-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Form Inputs
   ========================================================================== */
.dsm-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
	padding: 12px 16px;
	border: 1px solid var(--dsm-border);
	border-radius: var(--dsm-radius-btn);
	font-family: var(--dsm-font-body);
	font-size: 16px;
	color: var(--dsm-text);
	background-color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: border-color var(--dsm-transition);
	min-height: 44px;
}

.dsm-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--dsm-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--dsm-ring);
}

/* ==========================================================================
   Modals
   ========================================================================== */
.dsm-modal-overlay {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.dsm-modal {
	background: var(--dsm-glass-bg-strong);
	backdrop-filter: var(--dsm-glass-blur);
	-webkit-backdrop-filter: var(--dsm-glass-blur);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--dsm-radius-modal);
	padding: var(--dsm-space-xl);
	box-shadow: var(--dsm-shadow-xl), var(--dsm-glass-inset);
	max-width: 500px;
	width: 90%;
}

/* ==========================================================================
   Accessibility — Focus States & Skip Links
   ========================================================================== */
*:focus-visible {
	outline: 3px solid var(--dsm-primary);
	outline-offset: 2px;
}

.dsm-skip-link {
	position: absolute;
	top: -100%;
	left: var(--dsm-space-md);
	background: var(--dsm-primary);
	color: var(--dsm-footer-bg);
	padding: var(--dsm-space-sm) var(--dsm-space-md);
	border-radius: var(--dsm-radius-btn);
	z-index: 9999;
	font-weight: var(--dsm-fw-semibold);
}

.dsm-skip-link:focus {
	top: var(--dsm-space-md);
}

/* ==========================================================================
   Accessibility — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Touch targets — 44px for controls (not every inline link)
   ========================================================================== */
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select:not([size]),
summary {
	min-height: 44px;
}

textarea {
	min-height: 44px;
}

.dsm-floating-actions__action {
	min-height: 44px;
}

/* ==========================================================================
   Utility — Cursor Pointer on Clickable Elements
   ========================================================================== */
button,
[role="button"],
a,
label[for],
select,
summary,
.dsm-card,
.dsm-btn {
	cursor: pointer;
}

/* ==========================================================================
   Responsive Container
   ========================================================================== */
.dsm-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--dsm-space-md);
	padding-right: var(--dsm-space-md);
}

/* ==========================================================================
   Responsive Breakpoints: 375px, 768px, 1024px, 1440px
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--dsm-space-3xl: 32px;
		--dsm-space-2xl: 24px;
	}

	.dsm-footer-columns {
		grid-template-columns: 1fr !important;
		gap: var(--dsm-space-xl) !important;
		padding: var(--dsm-space-2xl) var(--dsm-space-md) !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.dsm-footer-columns {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (min-width: 1441px) {
	.dsm-container {
		max-width: 1320px;
	}
}

/* ==========================================================================
   Header — Hide site title (logo-only branding)
   ========================================================================== */
.site-branding .site-title-wrap {
	display: none;
}

/* ==========================================================================
   Header — Site logo size (all sticky states)
   Avoid max-width: none on scroll (intrinsic PNG dimensions dominate the layout).
   ========================================================================== */
#masthead .site-branding a.custom-logo-link img,
#masthead .site-branding a.brand img {
	max-width: 220px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 767px) {
	#masthead .site-branding a.custom-logo-link img,
	#masthead .site-branding a.brand img {
		max-width: 180px;
		max-height: 52px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Top accent stripe */
.dsm-footer-accent {
	height: 4px;
	background: linear-gradient(90deg, var(--dsm-secondary), var(--dsm-primary));
}

/* Widget/column headings */
.dsm-site-footer .widget-title,
.dsm-site-footer h4.widget-title {
	font-family: var(--dsm-font-heading) !important;
	font-size: 0.8125rem !important;
	font-weight: var(--dsm-fw-semibold) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dsm-on-dark-accent) !important;
	margin-bottom: var(--dsm-space-md) !important;
	padding-bottom: var(--dsm-space-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Links */
.dsm-site-footer a {
	color: var(--dsm-footer-link);
	text-decoration: none;
	transition: color var(--dsm-transition);
}

.dsm-site-footer a:hover {
	color: var(--dsm-on-dark-accent) !important;
	text-decoration: none;
}

.dsm-site-footer a:focus-visible {
	outline: 2px solid var(--dsm-on-dark-accent);
	outline-offset: 2px;
	border-radius: var(--dsm-radius-sm);
}

/* Copyright bar text */
.dsm-footer-copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dsm-breadcrumbs-wrap {
	background-color: var(--dsm-white);
	border-top: 1px solid rgba(12, 74, 110, 0.08);
	border-bottom: 1px solid rgba(12, 74, 110, 0.08);
	padding: 12px 0;
}

.dsm-breadcrumbs-wrap .kadence-breadcrumbs,
.dsm-breadcrumbs-wrap .yoast-bc-wrap,
.dsm-breadcrumbs-wrap .rankmath-bc-wrap,
.dsm-breadcrumbs-wrap .seopress-bc-wrap {
	font-family: var(--dsm-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--dsm-muted);
}

.dsm-breadcrumbs-wrap .kadence-breadcrumbs a,
.dsm-breadcrumbs-wrap .yoast-bc-wrap a,
.dsm-breadcrumbs-wrap .rankmath-bc-wrap a,
.dsm-breadcrumbs-wrap .seopress-bc-wrap a {
	color: var(--dsm-primary);
	text-decoration: none;
}

.dsm-breadcrumbs-wrap .kadence-breadcrumbs a:hover,
.dsm-breadcrumbs-wrap .yoast-bc-wrap a:hover,
.dsm-breadcrumbs-wrap .rankmath-bc-wrap a:hover,
.dsm-breadcrumbs-wrap .seopress-bc-wrap a:hover {
	color: var(--dsm-secondary);
	text-decoration: underline;
}

.dsm-breadcrumbs-wrap .kadence-bread-current,
.dsm-breadcrumbs-wrap .breadcrumb_last {
	color: var(--dsm-text);
	font-weight: var(--dsm-fw-semibold);
}

.dsm-breadcrumbs-wrap .bc-delimiter {
	color: var(--dsm-muted);
	opacity: 0.7;
}

.dsm-floating-actions {
	position: fixed;
	right: var(--dsm-space-md);
	bottom: var(--dsm-space-md);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--dsm-space-sm);
	z-index: 999;
	pointer-events: none;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.dsm-floating-actions__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dsm-space-sm);
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	box-shadow: var(--dsm-shadow-lg);
	font-family: var(--dsm-font-heading);
	font-size: 0.95rem;
	font-weight: var(--dsm-fw-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: auto;
	transition: transform var(--dsm-transition), opacity var(--dsm-transition), background-color var(--dsm-transition), color var(--dsm-transition), box-shadow var(--dsm-transition);
}

.dsm-floating-actions__action:hover {
	transform: translateY(-2px);
	text-decoration: none;
	box-shadow: var(--dsm-shadow-xl);
}

.dsm-floating-actions__action--top {
	background-color: var(--dsm-glass-bg);
	backdrop-filter: var(--dsm-glass-blur-sm);
	-webkit-backdrop-filter: var(--dsm-glass-blur-sm);
	color: var(--dsm-text);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: var(--dsm-shadow-md), var(--dsm-glass-inset);
	opacity: 0;
	transform: translateY(8px);
}

.dsm-floating-actions__action--top:hover {
	background-color: var(--dsm-background);
	color: var(--dsm-text);
}

.dsm-floating-actions__action--top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767px) {
	.dsm-floating-actions {
		right: var(--dsm-space-sm);
		bottom: var(--dsm-space-sm);
		left: auto;
		align-items: flex-end;
	}

	.dsm-floating-actions__action {
		width: auto;
	}
}

/* ==========================================================================
   Announcement bar (see dsm_announcement_bar in functions.php)
   ========================================================================== */
.dsm-announcement-bar {
	background-color: var(--dsm-footer-bg);
	color: var(--dsm-on-dark);
	text-align: center;
	padding: var(--dsm-space-sm) var(--dsm-space-md);
	font-size: 0.875rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dsm-announcement-bar__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--dsm-space-sm) var(--dsm-space-md);
}

.dsm-announcement-bar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--dsm-space-xs);
	color: var(--dsm-on-dark);
}

.dsm-announcement-bar__sep {
	opacity: 0.5;
	color: var(--dsm-on-dark-muted);
	user-select: none;
}