/*
Theme Name:   Marka Base — Hello Elementor Child
Theme URI:    https://marka.studio
Description:  Reusable Hello Elementor child theme by Marka Studio. Safe SVG uploads, media-size control, platform fingerprint reduction, sticky header, floating WhatsApp button, and a place for custom CSS that survives parent theme updates. Configure via the constants at the top of functions.php.
Author:       Marka Studio
Author URI:   https://marka.studio
Template:     hello-elementor
Version:      1.4.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  marka-base-child
Tags:         elementor, child-theme, performance
*/

/* ==========================================================================
   STICKY HEADER
   Add the class  marka-sticky-header  to the header container in the
   UAE Header Footer Builder template. The JS adds is-fixed past the
   trigger point and inserts a spacer so the page does not jump.
   ========================================================================== */

.marka-sticky-header {
	transition: box-shadow .25s ease, background-color .25s ease;
}

.marka-sticky-header.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}

/* Keep the header clear of the WordPress admin bar when logged in. */
.admin-bar .marka-sticky-header.is-fixed { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .marka-sticky-header.is-fixed { top: 46px; }
}

.marka-sticky-spacer { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.marka-sticky-header { transition: none; }
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================== */

.marka-wa {
	position: fixed;
	bottom: 22px;
	z-index: 998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--marka-wa-size, 58px);
	height: var(--marka-wa-size, 58px);
	border-radius: 50%;
	background: var(--marka-wa-bg, #25D366);
	color: var(--marka-wa-icon, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
	transition: transform .2s ease, box-shadow .2s ease, border-radius .2s ease;
	text-decoration: none;
}

.marka-wa svg {
	display: block;
	fill: currentColor;
	flex: none;
	/* Optical centring — the glyph sits slightly high in its viewBox. */
	transform: translateY(1px);
}

.marka-wa--left  { left: 22px; }
.marka-wa--right { right: 22px; }

.marka-wa:hover,
.marka-wa:focus {
	color: var(--marka-wa-icon, #fff);
	transform: scale(1.06);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
	text-decoration: none;
}

.marka-wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Hover label, desktop only. Slides out from behind the circle. */
.marka-wa__label {
	position: absolute;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--marka-wa-bg, #25D366);
	color: var(--marka-wa-icon, #fff);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.marka-wa--left  .marka-wa__label { left: 100%; margin-left: 10px; transform: translateX(-6px); }
.marka-wa--right .marka-wa__label { right: 100%; margin-right: 10px; transform: translateX(6px); }

.marka-wa--labelled:hover .marka-wa__label,
.marka-wa--labelled:focus-visible .marka-wa__label {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 767px) {
	.marka-wa { width: 52px; height: 52px; bottom: 16px; }
	.marka-wa--left  { left: 16px; }
	.marka-wa--right { right: 16px; }
	.marka-wa svg { width: 28px; height: 28px; }
	.marka-wa__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.marka-wa,
	.marka-wa__label { transition: none; }
	.marka-wa:hover { transform: none; }
}

/* ==========================================================================
   THEMING — LIGHT / DARK TOKENS

   READ THIS BEFORE ENABLING MARKA_THEME_TOGGLE.

   A toggle can only repaint what is drawn from these tokens. Elementor
   compiles anything set with its colour picker into a per-page CSS file as a
   literal hex value, so a section whose background was chosen in the Style
   tab will stay that colour in both modes.

   So for a working toggle, colours must NOT be set in Elementor widgets.
   Leave backgrounds and text colour at Default in Elementor and drive them
   from here, using the section CSS IDs from the design system:

       #home-hero        { background: var(--c-bg-900); }
       #home-stats       { background: var(--c-bg-800); }
       #archive-gallery  { background: var(--c-bg-700); }

   That is an architectural decision, not a setting. Decide it before
   building pages, because retrofitting means reopening every widget.
   ========================================================================== */

:root,
[data-theme="dark"] {
	--c-bg-900:    #0F1113;
	--c-bg-800:    #1A1D20;
	--c-bg-700:    #24272B;
	--c-bg-600:    #3A3F44;
	--c-text:      #F4F5F6;
	--c-text-muted:#C9CCCF;
	--c-action:      #D02A2A;
	--c-action-hover:#B8121A;
	--c-accent-text: #FF5A5A;
	--c-brand:       #8F282B;
	--g-metal-panel: linear-gradient(135deg,#24272B 0%,#31353A 38%,#1A1D20 62%,#2A2E33 100%);
	--g-card-lift:   linear-gradient(180deg,#2A2E33 0%,#24272B 100%);
	--sh-1: 0 1px 3px rgba(0,0,0,.30);
	--sh-2: 0 6px 20px rgba(0,0,0,.35);
}

[data-theme="light"] {
	--c-bg-900:    #FFFFFF;
	--c-bg-800:    #F0F0F0;
	--c-bg-700:    #E6E6E4;
	--c-bg-600:    #C9CAC4;
	--c-text:      #14100F;
	--c-text-muted:#56524C;

	/* Action red darkens in light mode. #D02A2A on white gives 4.34:1 with
	   white text, which fails AA on a button. #B8121A gives 6.69:1. */
	--c-action:      #B8121A;
	--c-action-hover:#8F282B;

	/* The dark-mode accent tint is unreadable on light: #FF5A5A on #F0F0F0
	   is 2.62:1. The brand maroon works here - 7.47:1 on #F0F0F0. */
	--c-accent-text: #8F282B;
	--c-brand:       #8F282B;

	--g-metal-panel: linear-gradient(135deg,#F4F4F2 0%,#FFFFFF 38%,#EDEDEA 62%,#F7F7F5 100%);
	--g-card-lift:   linear-gradient(180deg,#FFFFFF 0%,#F6F6F4 100%);
	--sh-1: 0 1px 3px rgba(0,0,0,.10);
	--sh-2: 0 6px 20px rgba(0,0,0,.14);
}

/* Colour transitions only on the surfaces that change. Never transition
   everything - it makes the whole page repaint visibly. */
body,
.marka-sticky-header,
.marka-theme-toggle {
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

/* ---- toggle button ------------------------------------------------------ */

.marka-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-bg-600);
	border-radius: 999px;
	background: transparent;
	color: var(--c-text);
	cursor: pointer;
	line-height: 0;
}

.marka-theme-toggle:hover,
.marka-theme-toggle:focus-visible {
	border-color: var(--c-action);
	color: var(--c-accent-text);
}

.marka-theme-toggle:focus-visible {
	outline: 2px solid var(--c-action);
	outline-offset: 2px;
}

.marka-theme-toggle__icon { display: none; }

/* Dark mode shows the sun - the action available is "go light". */
[data-theme="dark"] .marka-theme-toggle__icon--sun   { display: block; }
[data-theme="light"] .marka-theme-toggle__icon--moon { display: block; }

@media (prefers-reduced-motion: reduce) {
	body,
	.marka-sticky-header,
	.marka-theme-toggle { transition: none; }
}

/* ==========================================================================
   PROJECT CSS — per-widget overrides go below
   Add a CSS class in Elementor's Advanced tab, write the rule here.
   ========================================================================== */