/*
Theme Name: Malaysia eVisa
Theme URI: https://www.malaysia-evisa.org
Author: Wizweb IT Solutions
Author URI: https://wizweb.in
Description: A fast, accessible, conversion-focused WordPress theme built for malaysia-evisa.org. Classic theme with a modern design system, sticky mega-menu header, sidebar apply-now CTAs, automatic table of contents, breadcrumbs, rich Gutenberg block styling and schema.org output.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: malaysia-evisa
Tags: travel, blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, right-sidebar, accessibility-ready
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
	/*
	 * Brand palette sampled directly from the site logo
	 * (wp-content/uploads/2023/03/logo.png):
	 *   #000066  navy    — "Malaysia" wordmark + flag canton   (17.6:1 on white)
	 *   #d42526  red     — "Visa" wordmark + flag stripes      ( 5.1:1 with white text)
	 *   #ffce1f  gold    — flag crescent + 14-point star       (12.1:1 on the navy)
	 * The scales below are tints/shades of those three hues, so every surface in
	 * the theme resolves back to a logo colour.
	 */

	/* Navy — logo #000066 anchors the 900 step */
	--me-navy-950: #00003d;
	--me-navy-900: #000066;
	--me-navy-800: #0f0f7a;
	--me-navy-700: #1a1a8c;

	/* Same hue, lightened into an interactive scale (links, buttons, focus) */
	--me-blue-600: #24249b;
	--me-blue-500: #3535b5;
	--me-blue-400: #7676d8;
	--me-blue-100: #dcdcf7;
	--me-blue-50: #f2f2fd;

	/* Gold — logo #ffce1f anchors the 500 step */
	--me-gold-700: #7a5a00;
	--me-gold-600: #b98c00;
	--me-gold-500: #ffce1f;
	--me-gold-400: #ffdc55;
	--me-gold-100: #fff3ce;

	/* Red — logo #d42526 anchors the 600 step */
	--me-red-700: #a3161c;
	--me-red-600: #d42526;
	--me-red-500: #e23a3b;
	--me-red-50: #fdecec;

	--me-green-600: #0e8f5e;
	--me-green-50: #e8f7f0;

	/* Neutrals */
	--me-white: #ffffff;
	--me-gray-25: #fbfcfd;
	--me-gray-50: #f5f7fa;
	--me-gray-100: #eef1f6;
	--me-gray-200: #e0e5ee;
	--me-gray-300: #c8d0dd;
	--me-gray-400: #98a3b6;
	--me-gray-500: #6b7789;
	--me-gray-600: #4d5868;
	--me-gray-700: #37414f;
	--me-gray-800: #232b36;
	--me-gray-900: #141a22;

	/* Semantic — overridable from the Customizer */
	--me-primary: var(--me-blue-600);
	--me-primary-dark: var(--me-navy-800);
	--me-primary-darker: var(--me-navy-900);

	/* Decorative accent: logo gold (underlines, bullets, ticks, eyebrows) */
	--me-accent: var(--me-gold-500);
	--me-accent-dark: var(--me-gold-600);

	/* Call to action: logo red, the colour of "Visa" in the wordmark */
	--me-cta: var(--me-red-600);
	--me-cta-hover: var(--me-red-700);
	--me-cta-text: #ffffff;

	--me-text: var(--me-gray-800);
	--me-text-muted: var(--me-gray-500);
	--me-heading: var(--me-navy-900);
	--me-link: var(--me-blue-600);
	--me-link-hover: var(--me-navy-800);
	--me-border: var(--me-gray-200);
	--me-bg: var(--me-white);
	--me-bg-alt: var(--me-gray-50);

	/* Typography */
	--me-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--me-font-heading: var(--me-font-sans);
	--me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--me-text-xs: 0.75rem;
	--me-text-sm: 0.875rem;
	--me-text-base: 1.0625rem;
	--me-text-lg: 1.125rem;
	--me-text-xl: clamp(1.15rem, 0.4vw + 1.05rem, 1.3rem);
	--me-h4: clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
	--me-h3: clamp(1.35rem, 0.9vw + 1.15rem, 1.7rem);
	--me-h2: clamp(1.6rem, 1.4vw + 1.3rem, 2.15rem);
	--me-h1: clamp(2rem, 2.6vw + 1.4rem, 3rem);
	--me-display: clamp(2.25rem, 3.6vw + 1.5rem, 3.75rem);

	--me-leading-tight: 1.18;
	--me-leading-snug: 1.35;
	--me-leading-normal: 1.7;

	/* Space */
	--me-space-1: 0.25rem;
	--me-space-2: 0.5rem;
	--me-space-3: 0.75rem;
	--me-space-4: 1rem;
	--me-space-5: 1.5rem;
	--me-space-6: 2rem;
	--me-space-7: 2.5rem;
	--me-space-8: 3rem;
	--me-space-9: 4rem;
	--me-space-10: 5rem;
	--me-section-y: clamp(2.75rem, 5vw, 5rem);

	/* Layout */
	--me-container: 1300px;
	--me-container-wide: 1360px;
	--me-content: 46rem;
	--me-gutter: clamp(1rem, 3.5vw, 2rem);
	--me-sidebar: 20.5rem;

	/* Effects */
	--me-radius-sm: 6px;
	--me-radius: 10px;
	--me-radius-lg: 16px;
	--me-radius-xl: 22px;
	--me-radius-pill: 999px;

	--me-shadow-xs: 0 1px 2px rgba(3, 3, 51, 0.06);
	--me-shadow-sm: 0 1px 3px rgba(3, 3, 51, 0.08), 0 1px 2px rgba(3, 3, 51, 0.04);
	--me-shadow: 0 4px 16px rgba(3, 3, 51, 0.08), 0 1px 3px rgba(3, 3, 51, 0.05);
	--me-shadow-md: 0 10px 30px rgba(3, 3, 51, 0.1), 0 2px 6px rgba(3, 3, 51, 0.05);
	--me-shadow-lg: 0 22px 55px rgba(3, 3, 51, 0.14), 0 4px 12px rgba(3, 3, 51, 0.06);

	--me-ring: 0 0 0 3px rgba(53, 53, 181, 0.32);
	--me-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

	--me-header-h: 76px;
	--me-admin-offset: 0px;
	--wp--style--global--wide-size: var(--me-container);
	--wp--style--global--content-size: var(--me-content);
}

@media (max-width: 782px) {
	:root {
		--me-header-h: 64px;
	}
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--me-header-h) + var(--me-admin-offset) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--me-bg);
	color: var(--me-text);
	font-family: var(--me-font-sans);
	font-size: var(--me-text-base);
	line-height: var(--me-leading-normal);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.me-no-scroll {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--me-space-4);
	color: var(--me-heading);
	font-family: var(--me-font-heading);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: var(--me-leading-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--me-h1);
	font-weight: 800;
}
h2 {
	font-size: var(--me-h2);
	line-height: var(--me-leading-snug);
}
h3 {
	font-size: var(--me-h3);
	line-height: var(--me-leading-snug);
}
h4 {
	font-size: var(--me-h4);
	line-height: 1.4;
}
h5 {
	font-size: var(--me-text-lg);
	line-height: 1.45;
}
h6 {
	font-size: var(--me-text-base);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--me-text-muted);
}

p {
	margin: 0 0 var(--me-space-5);
}

a {
	color: var(--me-link);
	text-decoration: none;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.18em;
	transition: color var(--me-transition), background-color var(--me-transition), border-color var(--me-transition), opacity var(--me-transition);
}

a:hover,
a:focus {
	color: var(--me-link-hover);
}

:where(.entry-content, .me-prose) a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

:where(.entry-content, .me-prose) a:not([class]):hover {
	text-decoration-thickness: 2px;
	background: var(--me-blue-50);
}

:focus-visible {
	outline: 2px solid var(--me-blue-500);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Hide the default focus ring only where we replace it with a ring shadow. */
.me-btn:focus-visible {
	outline-offset: 3px;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img {
	border-radius: var(--me-radius-sm);
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0 0 var(--me-space-5);
	padding-left: 1.35rem;
}

li {
	margin-bottom: 0.4rem;
}

li > ul,
li > ol {
	margin-top: 0.4rem;
	margin-bottom: 0;
}

blockquote {
	margin: 0 0 var(--me-space-5);
}

hr {
	height: 1px;
	margin: var(--me-space-7) 0;
	border: 0;
	background: var(--me-border);
}

code,
kbd,
pre,
samp {
	font-family: var(--me-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	border-radius: var(--me-radius-sm);
	background: var(--me-gray-100);
	color: var(--me-navy-800);
}

pre {
	overflow-x: auto;
	max-width: 100%;
	padding: var(--me-space-5);
	border-radius: var(--me-radius);
	background: var(--me-navy-950);
	color: #e6edf3;
	line-height: 1.6;
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--me-text-sm);
}

fieldset {
	margin: 0 0 var(--me-space-5);
	padding: var(--me-space-5);
	border: 1px solid var(--me-border);
	border-radius: var(--me-radius);
}

legend {
	padding: 0 var(--me-space-2);
	font-weight: 600;
}

/* Forms */
input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--me-gray-300);
	border-radius: var(--me-radius);
	background: var(--me-white);
	color: var(--me-text);
	font-size: var(--me-text-base);
	transition: border-color var(--me-transition), box-shadow var(--me-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--me-blue-500);
	box-shadow: var(--me-ring);
	outline: none;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: var(--me-space-2);
	font-size: var(--me-text-sm);
	font-weight: 600;
	color: var(--me-gray-700);
}

::placeholder {
	color: var(--me-gray-400);
	opacity: 1;
}

::selection {
	background: var(--me-blue-100);
	color: var(--me-navy-900);
}

/* =========================================================================
   3. ACCESSIBILITY HELPERS (WordPress standard classes)
   ========================================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	display: block;
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.9rem 1.4rem;
	border-radius: var(--me-radius);
	background: var(--me-white);
	box-shadow: var(--me-shadow-md);
	clip: auto !important;
	clip-path: none;
	color: var(--me-navy-900);
	font-size: var(--me-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
}

.me-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* WordPress core alignment + caption classes */
.alignleft {
	float: left;
	margin: 0.4rem var(--me-space-5) var(--me-space-4) 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 var(--me-space-4) var(--me-space-5);
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: var(--me-space-3);
	color: var(--me-text-muted);
	font-size: var(--me-text-sm);
	line-height: 1.5;
	text-align: center;
}

.sticky .me-card__title::before {
	content: "★ ";
	color: var(--me-accent);
}

.bypostauthor > .comment-body {
	position: relative;
}

.gallery {
	display: grid;
	gap: var(--me-space-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-bottom: var(--me-space-6);
}

.gallery-item {
	margin: 0;
}

/* =========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================= */

.me-container {
	width: 100%;
	max-width: var(--me-container);
	margin-inline: auto;
	padding-inline: var(--me-gutter);
}

.me-container--wide {
	max-width: var(--me-container-wide);
}

.me-container--narrow {
	max-width: 52rem;
}

.me-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.me-main {
	flex: 1 0 auto;
}

.me-section {
	padding-block: var(--me-section-y);
}

.me-section--alt {
	background: var(--me-bg-alt);
}

.me-section--tint {
	background: linear-gradient(180deg, var(--me-blue-50), var(--me-white));
}

/* Content + sidebar shell */
.me-shell {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2rem, 4vw, 3.25rem) var(--me-section-y);
}

.me-shell--sidebar {
	grid-template-columns: minmax(0, 1fr) var(--me-sidebar);
}

.me-shell--full {
	grid-template-columns: minmax(0, 1fr);
}

.me-shell--centered {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc(var(--me-content) + var(--me-gutter) * 2);
}

@media (max-width: 1024px) {
	.me-shell--sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

.me-stack > * + * {
	margin-top: var(--me-space-5);
}

.me-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.me-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.me-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.me-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.me-flex {
	display: flex;
	gap: var(--me-space-3);
	align-items: center;
	flex-wrap: wrap;
}

/* =========================================================================
   5. SECTION HEADINGS
   ========================================================================= */

.me-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--me-space-3);
	color: var(--me-blue-600);
	font-size: var(--me-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.me-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--me-accent);
}

.me-section-head {
	max-width: 44rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.me-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.me-section-head--center .me-eyebrow {
	justify-content: center;
}

.me-section-head h2 {
	margin-bottom: var(--me-space-3);
}

.me-section-head p {
	margin-bottom: 0;
	color: var(--me-text-muted);
	font-size: var(--me-text-lg);
}

.me-lede {
	color: var(--me-gray-600);
	font-size: var(--me-text-xl);
	line-height: 1.6;
}