/* =========================================================================
   WIFA — Professional Theme Overlay
   A single skin loaded after every other stylesheet on every page.
   It re-points the design tokens the rest of the CSS already reads
   (--bg, --text, --accent-2, etc.) at a new heritage-emblem palette,
   swaps the type system for a cinematic display serif + clean sans,
   and layers in motion. Nothing below removes markup or scripts —
   it only restyles what's already there.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts
   Cinzel: an engraved, ceremonial Roman serif — the same lineage of
   "carved title-card" type used in prestige period pieces — used here
   for headings, nav labels and badges to match WIFA's torch-and-seal
   emblem. Inter carries all body copy so long paragraphs stay easy
   to read.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------
   2. Design tokens
   aboutus.css and details.css already read most of these custom
   properties (--bg, --surface, --text, --accent-2, --header-bg, ...).
   Redefining them here recolors both pages without touching their
   rules. index.html's own stylesheet doesn't use variables, so it's
   handled with direct selectors further down.
   ------------------------------------------------------------------------- */
:root {
	/* core palette */
	--wf-ink: #0d1117;
	--wf-navy: #101c2c;
	--wf-navy-2: #17293e;
	--wf-gold: #c9a24a;
	--wf-gold-soft: #e3c98a;
	--wf-gold-deep: #8a6a24;
	--wf-ember: #d9793c;
	--wf-paper: #f6f1e6;
	--wf-surface: #fffaf2;
	--wf-text: #221b12;
	--wf-muted: #675f4e;

	/* light-on-dark pairing, used once the page shell itself goes dark
	   (About Us + MESAI now match index.html's cinematic ink/navy hero) */
	--wf-cream: #f4ead2;
	--wf-cream-muted: rgba(244, 234, 210, 0.72);
	--wf-glass: rgba(255, 255, 255, 0.05);
	--wf-glass-strong: rgba(255, 255, 255, 0.08);

	/* tokens consumed by aboutus.css / details.css — now pointed at the
	   same dark ink/navy backdrop index.html's header uses, instead of
	   the old light paper page. */
	--header-height: 84px;
	--footer-height: 56px;
	--bg: var(--wf-ink);
	--bg-bottom: var(--wf-ink);
	--bg-top: var(--wf-navy-2);
	--surface: var(--wf-glass);
	--header-bg: rgba(13, 17, 23, 0.9);
	--header-border: rgba(201, 162, 74, 0.35);
	--footer-bg: rgba(13, 17, 23, 0.94);
	--footer-border: rgba(201, 162, 74, 0.28);
	--text: var(--wf-cream);
	--muted: var(--wf-cream-muted);
	--accent-1: rgba(201, 162, 74, 0.14);
	--accent-2: var(--wf-gold);

	/* tokens consumed by media.css's philosophy section */
	--primary-black: var(--wf-ink);
	--carbon-medium: rgba(201, 162, 74, 0.25);
	--metal-dark: rgba(201, 162, 74, 0.25);
	--accent-red: var(--wf-ember);
	--accent-blue: var(--wf-gold);
	--accent-green: var(--wf-gold-soft);
	--accent-purple: var(--wf-gold-deep);
	--accent-cyan: var(--wf-gold-soft);
}

/* -------------------------------------------------------------------------
   3. Base typography
   ------------------------------------------------------------------------- */
html, body, button, input, select, textarea {
	font-family: 'Inter', 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-title__inner, .contact-title, .get-involved__title,
.box-title, .gi-card__name,
.philosophy-subheading, .pillar-title,
.blog-slider__title,
.Product_sec .Details h3,
.Navigation li a span,
.site-nav__menu a,
.get-involved__title, .contact-title {
	font-family: 'Cinzel', 'Open Sans', serif;
	letter-spacing: 0.03em;
}

a { color: var(--wf-gold-deep); }

::selection { background: var(--wf-gold); color: #1a1305; }

/* =========================================================================
   4. INDEX — hero header, nav, philosophy section, footer
   ========================================================================= */

.header {
	background-image: none !important;
	background-color: var(--wf-ink) !important;
	background: radial-gradient(ellipse at 20% -10%, rgba(201, 162, 74, 0.16), transparent 55%),
		linear-gradient(160deg, var(--wf-ink) 0%, var(--wf-navy) 48%, var(--wf-navy-2) 100%) !important;
	position: relative;
	overflow: hidden;
}
.header::before {
	/* slow drifting glow, like firelight against a canvas backdrop */
	content: '';
	position: absolute;
	inset: -20%;
	background: radial-gradient(circle at 30% 30%, rgba(217, 121, 60, 0.16), transparent 45%),
		radial-gradient(circle at 75% 60%, rgba(201, 162, 74, 0.14), transparent 40%);
	animation: wf-glow-drift 16s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes wf-glow-drift {
	0%   { transform: translate(-2%, -2%) scale(1); }
	100% { transform: translate(3%, 3%) scale(1.08); }
}

.Top_Bar .site-logo img {
	filter: drop-shadow(0 0 10px rgba(201, 162, 74, 0.45));
	animation: wf-emblem-glow 5s ease-in-out infinite;
	transition: transform .35s ease;
}
.Top_Bar .site-logo img:hover { transform: scale(1.05) rotate(-1deg); }
@keyframes wf-emblem-glow {
	0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 162, 74, 0.35)); }
	50%      { filter: drop-shadow(0 0 18px rgba(201, 162, 74, 0.65)); }
}

.Navigation li a { color: #ece3cd; letter-spacing: 0.08em; transition: color .3s ease, text-shadow .3s ease; }
.Navigation li a:hover, .Navigation li.active a { color: #fff8e8; text-shadow: 0 0 12px rgba(201, 162, 74, 0.75); }

.Product_sec .Details h3,
.Product_sec li .left .Details h3 {
	color: #f6ecd6 !important;
	text-shadow: 0 2px 18px rgba(201, 162, 74, 0.35) !important;
}
.Product_sec .Details p, .Product_sec .Details p.words,
.Product_sec li .left .Details p {
	color: #d9cdb3 !important;
}

#media-figure {
	border-radius: 18px;
	box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.4), 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Philosophy / Strategic Pillars — dark cinematic band, gold accents */
.philosophy-section {
	background: linear-gradient(180deg, var(--wf-ink) 0%, var(--wf-navy) 45%, var(--wf-ink) 100%) !important;
}
.prism-line { background: rgba(201, 162, 74, 0.18) !important; }
.prism-line::before {
	background: linear-gradient(90deg, transparent, var(--wf-gold) 45%, var(--wf-gold-soft) 55%, transparent) !important;
}
.philosophy-subheading {
	color: #f4e9d0 !important;
	text-shadow: 0 0 20px rgba(201, 162, 74, 0.25) !important;
}
.pillar {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
	border: 1px solid rgba(201, 162, 74, 0.22) !important;
	backdrop-filter: blur(6px);
}
.pillar::before {
	background: linear-gradient(90deg, var(--wf-ember), var(--wf-gold), var(--wf-gold-soft)) !important;
}
.pillar:hover {
	border-color: rgba(201, 162, 74, 0.55) !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(201, 162, 74, 0.16) !important;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
}
.pillar-icon::before {
	background: radial-gradient(circle, rgba(201, 162, 74, 0.4), transparent 70%) !important;
}
.pillar-icon img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); transition: transform .35s ease; }
.pillar:hover .pillar-icon img { transform: scale(1.08) translateY(-2px); }
.pillar-title { color: var(--wf-gold-soft) !important; }
.pillar-description { color: rgba(246, 238, 219, 0.82) !important; }

footer { background: var(--wf-ink) !important; border-top: 1px solid rgba(201, 162, 74, 0.25) !important; }
footer p, footer a { color: #ece3cd !important; }

.scroll-to-top {
	background: linear-gradient(180deg, var(--wf-gold-soft), var(--wf-gold-deep)) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 162, 74, 0.4) !important;
}

/* Drifting ember particles inside the philosophy section */
.philosophy-particles .particle {
	background: radial-gradient(circle, #ffe3ac 0%, var(--wf-gold) 55%, transparent 75%) !important;
	box-shadow: 0 0 6px rgba(233, 187, 106, 0.8);
}

/* =========================================================================
   5. SHARED — the site-header / site-nav used on About Us + MESAI
   Professional, animated navbar: drops into place on load, tightens
   up on scroll, and gives every link its own entrance + hover motion.
   ========================================================================= */

.site-header {
	background: var(--header-bg) !important;
	border-bottom: 1px solid var(--header-border) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: height .35s cubic-bezier(.4,0,.2,1),
		background .35s ease, box-shadow .35s ease, border-color .35s ease;
	animation: wf-nav-drop .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wf-nav-drop {
	from { opacity: 0; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Compact, more opaque state — toggled by professional-enhancements.js
   once the page scrolls past the header's own height. */
.site-header.is-scrolled {
	height: 62px;
	background: rgba(13, 17, 23, 0.97) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	border-bottom-color: rgba(201, 162, 74, 0.5) !important;
}
.site-header.is-scrolled .site-logo img { height: 42px; }

.site-logo img {
	filter: drop-shadow(0 0 8px rgba(201, 162, 74, 0.4));
	transition: transform .3s ease, height .35s cubic-bezier(.4,0,.2,1);
}
.site-logo:hover img { transform: scale(1.05); }

/* Each link fades/drops in with a short stagger on page load */
.site-nav__menu a {
	position: relative;
	letter-spacing: 0.08em;
	color: #ece3cd !important;
	overflow: hidden;
	transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
	animation: wf-link-drop .6s cubic-bezier(.16,1,.3,1) both;
}
.site-nav__menu a:nth-child(1) { animation-delay: .15s; }
.site-nav__menu a:nth-child(2) { animation-delay: .25s; }
.site-nav__menu a:nth-child(3) { animation-delay: .35s; }
@keyframes wf-link-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Animated gold underline — sweeps in from center on hover/active */
.site-nav__menu a::after {
	content: '';
	position: absolute;
	left: 10px; right: 10px; bottom: 2px;
	height: 2px;
	background: linear-gradient(90deg, var(--wf-ember), var(--wf-gold-soft));
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* Subtle light sweep across the label itself on hover, like brushed metal catching light */
.site-nav__menu a::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; left: -60%;
	width: 40%;
	background: linear-gradient(115deg, transparent, rgba(255, 248, 232, 0.22), transparent);
	transform: skewX(-20deg);
	transition: left .55s ease;
	pointer-events: none;
}
.site-nav__menu a:hover::before { left: 130%; }

.site-nav__menu a:hover {
	background: rgba(201, 162, 74, 0.12) !important;
	color: #fff8e8 !important;
	transform: translateY(-1px);
}
.site-nav__menu a.active {
	background: rgba(201, 162, 74, 0.16) !important;
	color: #fff8e8 !important;
	box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35);
}
.site-nav__menu a:hover::after, .site-nav__menu a.active::after { transform: scaleX(1); }

/* Soft breathing glow behind the active page's link */
.site-nav__menu a.active { animation: wf-link-drop .6s cubic-bezier(.16,1,.3,1) both, wf-active-pulse 2.6s ease-in-out .6s infinite; }
@keyframes wf-active-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35), 0 0 0 rgba(201, 162, 74, 0); }
	50%      { box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.55), 0 0 14px rgba(201, 162, 74, 0.28); }
}

.site-nav__toggle span { background: #ece3cd !important; transition: transform .3s ease, opacity .3s ease; }

/* =========================================================================
   6. ABOUT US — hero title, boxes, get-involved, contact
   Page shell now matches index.html's dark ink/navy backdrop; content
   sits in frosted glass cards, except the "Get Involved" tiles which
   keep their own bright white panel (::after below), so their navy
   text stays untouched.
   ========================================================================= */

body {
	background-attachment: fixed;
	background-image: radial-gradient(ellipse at 20% -10%, rgba(201, 162, 74, 0.14), transparent 55%),
		linear-gradient(to top, var(--wf-ink) 0%, var(--wf-navy-2) 100%) !important;
}

.page-title__inner, .contact-title, .get-involved__title { color: var(--wf-cream) !important; }

.box {
	background: linear-gradient(160deg, rgba(23, 41, 62, 0.94), rgba(13, 17, 23, 0.96)) !important;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(201, 162, 74, 0.28) !important;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.box:hover {
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 74, 0.16) !important;
	border-color: rgba(201, 162, 74, 0.5) !important;
}
.box-desc span { color: var(--wf-cream) !important; }

/* Box titles sit on the frosted glass card, so they need the light
   cream/gold treatment; Get Involved titles sit on a solid white
   panel (see .gi-card::after) and keep their original navy-on-light look. */
.box-title {
	color: var(--wf-cream) !important;
	background: linear-gradient(180deg, rgba(201, 162, 74, 0.26), rgba(255, 255, 255, 0.04)) !important;
	box-shadow: 0 10px 26px rgba(201, 162, 74, 0.2), 0 0 16px rgba(201, 162, 74, 0.14) !important;
	text-shadow: none !important;
}
.gi-card {
	background: linear-gradient(160deg, rgba(23, 41, 62, 0.94), rgba(13, 17, 23, 0.96)) !important;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(201, 162, 74, 0.28) !important;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.gi-card:hover {
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 74, 0.16) !important;
	border-color: rgba(201, 162, 74, 0.5) !important;
}
.gi-card__name {
	color: var(--wf-cream) !important;
	background: linear-gradient(180deg, rgba(201, 162, 74, 0.26), rgba(255, 255, 255, 0.04)) !important;
	box-shadow: 0 10px 26px rgba(201, 162, 74, 0.2), 0 0 16px rgba(201, 162, 74, 0.14) !important;
	text-shadow: none !important;
}
.gi-card__desc { color: var(--wf-muted) !important; }
.gi-card__img { filter: drop-shadow(0 4px 10px rgba(20, 15, 5, 0.18)); transition: transform .3s ease; }

.contact-item {
	background: linear-gradient(160deg, rgba(23, 41, 62, 0.94), rgba(13, 17, 23, 0.96)) !important;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(201, 162, 74, 0.28) !important;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.contact-item .label { color: var(--wf-gold-soft) !important; }
.contact-item .value { color: var(--wf-cream) !important; }
.contact-item i, .contact-item .icon-tiktok-img { color: var(--wf-gold-soft) !important; }
.contact-item:hover {
	box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 162, 74, 0.16) !important;
	border-color: rgba(201, 162, 74, 0.5) !important;
}
.contact-item:hover .label, .contact-item:hover .value, .contact-item:hover i { color: #fff8e8 !important; }

/* =========================================================================
   7. MESAI (details.html) — the slide deck
   Same dark ink/navy page shell as index.html + About Us; the slide
   deck itself stays a light card (var(--wf-surface)) so its existing
   navy title / muted-brown text keep their contrast untouched.
   ========================================================================= */

body {
	background-color: var(--wf-ink) !important;
	background-image: radial-gradient(ellipse at 20% -10%, rgba(201, 162, 74, 0.14), transparent 55%),
		linear-gradient(to top, var(--wf-ink) 0%, var(--wf-navy-2) 100%) !important;
}

.blog-slider {
	background: var(--wf-surface) !important;
	box-shadow: 0 20px 60px rgba(20, 15, 5, 0.18) !important;
}
.blog-slider::before, .blog-slider::after {
	background-image: conic-gradient(from var(--angle), var(--wf-ink), var(--wf-gold), var(--wf-ember)) !important;
}
.blog-slider__img {
	background-image: linear-gradient(150deg, var(--wf-navy) 0%, var(--wf-ink) 100%) !important;
	box-shadow: 0 14px 34px rgba(13, 17, 23, 0.35) !important;
}
.blog-slider__code { color: var(--wf-gold-deep) !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.blog-slider__title { color: var(--wf-navy) !important; }
.blog-slider__text { color: var(--wf-muted) !important; }
.blog-slider__button {
	background-image: linear-gradient(150deg, var(--wf-gold-soft) 0%, var(--wf-gold-deep) 100%) !important;
	box-shadow: 0 14px 30px rgba(201, 162, 74, 0.35) !important;
}
.blog-slider__pagination .swiper-pagination-bullet { background: var(--wf-navy) !important; }
.blog-slider__pagination .swiper-pagination-bullet-active {
	background: var(--wf-gold) !important;
	box-shadow: 0 0 14px rgba(201, 162, 74, 0.55) !important;
}

/* =========================================================================
   8. Motion system
   ------------------------------------------------------------------------- */

/* Gold sweep on any element carrying .reveal, layered on top of the
   fade/slide the page already does. */
.reveal.visible h1, .reveal.visible h2, .reveal.visible h3 { animation: wf-text-rise .7s ease both; }
@keyframes wf-text-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.header::before, .Top_Bar .site-logo img { animation: none !important; }
	.site-header, .site-nav__menu a, .site-nav__menu a.active { animation: none !important; }
	.site-nav__menu a::before { display: none !important; }
}

/* ------------------------------------------------------------------------- */
/* Footer credit + social links (email / Telegram) — shared across all pages */
/* ------------------------------------------------------------------------- */
footer .Center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
footer .footer-credit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}
.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: 50%;
    color: #2b9bff !important;
    background: rgba(43,155,255,0.10);
    transition: transform .18s ease, background .18s ease;
    text-decoration: none !important;
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
    transform: translateY(-2px) scale(1.08);
    background: rgba(43,155,255,0.20);
}
.footer-social__link i {
    font-size: 12px;
    color: #2b9bff;
}
.footer-social__link img {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}