/**
 * Diwan design tokens.
 *
 * Taken from the staging build, where they are owned by the Diwan Brand plugin,
 * and they match the 2025 brand manual: Paper Canvas, Papyrus, Wood Brown,
 * Light Taupe and Fenician Blue.
 *
 * Declared on :root with no extra specificity so that wherever Diwan Brand is
 * also installed its own values win and these are simply never used. Nothing
 * here should be the only definition of a token the mega menu depends on.
 *
 * The four brand colours read Elementor's global colours of the same name
 * (Site Settings → Global Colors → "Diwan · …"), so a colour changed there
 * changes here too. Elementor prints those on the body, not on :root, which
 * is why the block is declared on both: a token that refers to another is
 * worked out where it is declared, and only the body can see the globals.
 */

:root,
body {
	--diwan-canvas: #faf7db;
	--diwan-papyrus: var(--e-global-color-diwanpapyrus, #e0b070);
	/* A sale has to be seen: the one red in the palette. */
	--diwan-sale: #c8102e;
	--diwan-wood: var(--e-global-color-diwanwood, #3b0f00);
	--diwan-taupe: #ab9169;
	--diwan-blue: var(--e-global-color-diwanblue, #246b8f);
	--diwan-band: var(--e-global-color-diwanpaper, #fafafa);
	--diwan-grey-50: var(--diwan-band);
	--diwan-white: #ffffff;
	--diwan-black: #000000;

	--diwan-btn-bg: var(--diwan-black);
	--diwan-btn-text: var(--diwan-white);
	--diwan-btn-border: var(--diwan-black);
	--diwan-btn-bg-hover: var(--diwan-papyrus);
	--diwan-btn-text-hover: var(--diwan-wood);
	--diwan-btn2-bg: transparent;
	--diwan-btn2-text: var(--diwan-black);
	--diwan-btn2-border: var(--diwan-black);

	--diwan-link: var(--diwan-black);
	--diwan-link-hover: var(--diwan-blue);

	/* The 2025 manual gives writing three inks: a section is headed in Fenician
	   Blue, the line that explains it is Wood Brown, and Papyrus is the colour
	   a control turns under the pointer. Every heading the plugin draws reads
	   these rather than naming a colour of its own. */
	--diwan-heading: var(--diwan-blue);
	--diwan-subheading: var(--diwan-wood);
	--diwan-hover: var(--diwan-papyrus);
	--diwan-hover-text: var(--diwan-wood);

	--diwan-text: var(--diwan-black);
	--diwan-text-soft: #444444;
	--diwan-text-muted: #6e6e6e;
	--diwan-text-faint: #a0a0a0;
	--diwan-text-inverse: var(--diwan-white);

	--diwan-surface: var(--diwan-white);
	--diwan-surface-alt: #fafaf8;
	--diwan-surface-sunken: #f4f3f1;

	--diwan-border: #e6e6e6;
	--diwan-border-soft: #f0f0f0;
	--diwan-border-strong: #d5d5d5;

	--diwan-accent-bg: var(--diwan-black);
	--diwan-accent-text: var(--diwan-white);
	--diwan-promo-bg: var(--diwan-black);
	--diwan-promo-text: var(--diwan-white);

	--diwan-danger: #c0392b;
	--diwan-danger-soft: #f0c9c9;
	--diwan-success: #1f7a3d;
	--diwan-warning: var(--diwan-papyrus);
	--diwan-star: var(--diwan-papyrus);
	--diwan-star-empty: #dddddd;

	--diwan-radius: 8px;
	--diwan-radius-sm: 4px;
	--diwan-radius-lg: 14px;
	--diwan-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
	--diwan-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/*
 * Hello Elementor's reset paints links AND buttons #cc3366, a placeholder pink
 * that is nowhere in the brand. It shows through wherever a component has not
 * named a colour of its own, which is how a pink chevron kept turning up on
 * one slider or another. Stated here once rather than patched per component:
 * the brand owns these two colours, and every component built after this one
 * inherits the fix without having to know about it.
 *
 * Kept at a single element's specificity so any component, Elementor kit or
 * WooCommerce rule that means to set its own colour still wins.
 */
a {
	color: var(--diwan-link, #000000);
}

a:hover,
a:focus-visible {
	color: var(--diwan-link-hover, #246b8f);
}

/* A control takes the colour of whatever it sits in, which is what every
   browser did before a theme said otherwise.
 *
 * All three of the theme's placeholder pinks are answered here: the border, the
 * text, and the background it paints on hover and focus. They are stated on the
 * bare elements, at the weight the theme states them, so anything that means to
 * look like a button — ours, WooCommerce's, Elementor's — still wins with a
 * class. What is left is the browser's own button, in the brand's own ink.
 *
 * The focus states are not belt and braces: the theme sets a pink BACKGROUND on
 * :focus, so a button went pink the moment it was clicked. Focus should say
 * where you are, which the outline below does, without repainting the control. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover {
	background-color: transparent;
	color: inherit;
}

button:focus,
button:focus-visible,
[type="button"]:focus,
[type="button"]:focus-visible,
[type="submit"]:focus,
[type="submit"]:focus-visible,
[type="reset"]:focus,
[type="reset"]:focus-visible {
	background-color: transparent;
	color: inherit;
}

/* Anything that carries its own background keeps it while focused. Listed by
   name because "inherit" above would otherwise strip it. */
.diwan-button:focus,
.diwan-button:focus-visible {
	background: var(--diwan-btn-bg, #000);
	color: var(--diwan-btn-text, #fff);
}

/* One focus ring for the whole site, in the brand's own colour. */
:focus-visible {
	outline: 2px solid var(--diwan-blue, #246b8f);
	outline-offset: 2px;
}

/* Papyrus is the site's hover.
 *
 * Elementor's own button has no hover state until somebody sets one in the
 * editor, so half the buttons on the site did not answer the pointer at all.
 * A hover rule on the bare class is not enough either: the colour of each
 * button is written by Elementor into the page's own stylesheet, against the
 * element's ID class — three classes deep and without :hover — and that beat a
 * single class carrying one. So this is stated at four classes deep, which is
 * the weight it takes to reach over a colour set in the panel.
 *
 * Every button the site draws is included: the ones in a section, the ones in
 * a card, and any a builder adds later. */
.elementor .elementor-element a.elementor-button:hover,
.elementor .elementor-element a.elementor-button:focus-visible,
.elementor .elementor-element button.elementor-button:hover,
.elementor .elementor-element button.elementor-button:focus-visible,
a.elementor-button:hover,
a.elementor-button:focus-visible,
button.elementor-button:hover,
button.elementor-button:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible {
	background-color: var(--diwan-hover, #e0b070);
	border-color: var(--diwan-hover, #e0b070);
	color: var(--diwan-hover-text, #3b0f00);
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}