/**
 * OceanWP Custom "Pro" Module — Dark Luxury Brand Layer
 *
 * Design-system layer applied on top of the base theme (depends on
 * `oceanwp-style`). Scoped to `body.owc-dark-luxury`. This is the single tuning
 * point for the palette and typography.
 *
 * Direction: dark luxury — near-black surfaces, warm gold accent, high-contrast
 * cream text, serif display + humanist sans body pairing.
 */

/* ============================================================
   1. Design Tokens
   ============================================================ */
body.owc-dark-luxury {
	--owc-bg: #0d0f12;          /* page background            */
	--owc-surface: #15181d;     /* header/footer/cards        */
	--owc-surface-2: #1c2027;   /* raised surface / hover     */
	--owc-border: #2a2f37;      /* hairline borders           */
	--owc-text: #e8e4da;        /* primary cream text         */
	--owc-text-muted: #a3a09a;  /* secondary text             */
	--owc-accent: #c9a86a;      /* gold accent                */
	--owc-accent-hover: #d9bd85; /* gold hover                */
	--owc-accent-ink: #0d0f12;  /* text on gold               */

	--owc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--owc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	--owc-radius: 6px;
	--owc-radius-lg: 12px;
	--owc-transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
	--owc-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   2. Base typography & page
   ============================================================ */
body.owc-dark-luxury {
	background-color: var(--owc-bg);
	color: var(--owc-text);
	font-family: var(--owc-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0.005em;
}

body.owc-dark-luxury #main,
body.owc-dark-luxury #content,
body.owc-dark-luxury .content-area,
body.owc-dark-luxury #wrap {
	background-color: var(--owc-bg);
	color: var(--owc-text);
}

body.owc-dark-luxury h1,
body.owc-dark-luxury h2,
body.owc-dark-luxury h3,
body.owc-dark-luxury h4,
body.owc-dark-luxury h5,
body.owc-dark-luxury h6,
body.owc-dark-luxury .site-title {
	font-family: var(--owc-font-display);
	color: #f4f1ea;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

body.owc-dark-luxury h1 { font-weight: 600; }
body.owc-dark-luxury p,
body.owc-dark-luxury li { color: var(--owc-text); }

body.owc-dark-luxury a { color: var(--owc-accent); transition: color var(--owc-transition); }
body.owc-dark-luxury a:hover,
body.owc-dark-luxury a:focus { color: var(--owc-accent-hover); }

body.owc-dark-luxury blockquote {
	border-left: 3px solid var(--owc-accent);
	background: var(--owc-surface);
	color: var(--owc-text-muted);
	font-family: var(--owc-font-display);
	font-style: italic;
	font-size: 1.15em;
	padding: 1.1em 1.4em;
	border-radius: 0 var(--owc-radius) var(--owc-radius) 0;
}

/* Selection */
body.owc-dark-luxury ::selection { background: var(--owc-accent); color: var(--owc-accent-ink); }

/* ============================================================
   3. Header + navigation
   ============================================================ */
body.owc-dark-luxury #site-header,
body.owc-dark-luxury .oceanwp-social-menu.top-bar-social {
	background-color: var(--owc-surface);
	border-bottom: 1px solid var(--owc-border);
}

body.owc-dark-luxury #site-header .site-title a,
body.owc-dark-luxury #site-logo .site-logo-text a { color: #f4f1ea; }

/* Top-level menu links */
body.owc-dark-luxury #site-navigation .dropdown-menu > li > a,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li > a {
	color: var(--owc-text);
	font-family: var(--owc-font-body);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.82em;
	position: relative;
	transition: color var(--owc-transition);
}

body.owc-dark-luxury #site-navigation .dropdown-menu > li > a:hover,
body.owc-dark-luxury #site-navigation .dropdown-menu > li.current-menu-item > a,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li > a:hover,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
	color: var(--owc-accent);
}

/* Gold underline reveal on hover */
body.owc-dark-luxury #site-navigation .dropdown-menu > li > a::after,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 22px;
	height: 1.5px;
	background: var(--owc-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--owc-transition);
}
body.owc-dark-luxury #site-navigation .dropdown-menu > li > a:hover::after,
body.owc-dark-luxury #site-navigation .dropdown-menu > li.current-menu-item > a::after,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li > a:hover::after,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Dropdown sub-menus */
body.owc-dark-luxury #site-navigation .dropdown-menu ul,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu ul {
	background-color: var(--owc-surface-2);
	border: 1px solid var(--owc-border);
	box-shadow: var(--owc-shadow);
}
body.owc-dark-luxury #site-navigation .dropdown-menu ul li a,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu ul li a {
	color: var(--owc-text);
	border-bottom: 1px solid var(--owc-border);
	text-transform: none;
	letter-spacing: 0.01em;
}
body.owc-dark-luxury #site-navigation .dropdown-menu ul li a:hover,
body.owc-dark-luxury #site-navigation-wrap .dropdown-menu ul li a:hover {
	background-color: var(--owc-surface);
	color: var(--owc-accent);
}

/* Mobile menu icon */
body.owc-dark-luxury .oceanwp-mobile-menu-icon a,
body.owc-dark-luxury #mobile-menu a { color: var(--owc-text); }
body.owc-dark-luxury .oceanwp-mobile-menu-icon a:hover { color: var(--owc-accent); }

/* Top bar */
body.owc-dark-luxury #top-bar-wrap {
	background-color: #0b0d10;
	border-bottom: 1px solid var(--owc-border);
	color: var(--owc-text-muted);
}
body.owc-dark-luxury #top-bar-wrap a { color: var(--owc-text-muted); }
body.owc-dark-luxury #top-bar-wrap a:hover { color: var(--owc-accent); }

/* ============================================================
   4. Buttons & forms
   ============================================================ */
body.owc-dark-luxury .button,
body.owc-dark-luxury button,
body.owc-dark-luxury input[type="submit"],
body.owc-dark-luxury input[type="button"],
body.owc-dark-luxury .wp-block-button__link {
	background-color: var(--owc-accent);
	color: var(--owc-accent-ink);
	border: 1px solid var(--owc-accent);
	border-radius: var(--owc-radius);
	font-family: var(--owc-font-body);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.85em;
	padding: 0.75em 1.7em;
	transition: background-color var(--owc-transition), transform var(--owc-transition), box-shadow var(--owc-transition);
}
body.owc-dark-luxury .button:hover,
body.owc-dark-luxury button:hover,
body.owc-dark-luxury input[type="submit"]:hover,
body.owc-dark-luxury input[type="button"]:hover,
body.owc-dark-luxury .wp-block-button__link:hover {
	background-color: var(--owc-accent-hover);
	border-color: var(--owc-accent-hover);
	color: var(--owc-accent-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(201, 168, 106, 0.55);
}

/* Ghost/secondary buttons keep the outline treatment */
body.owc-dark-luxury .button.o-button-ghost,
body.owc-dark-luxury .button.secondary {
	background: transparent;
	color: var(--owc-accent);
}

body.owc-dark-luxury input[type="text"],
body.owc-dark-luxury input[type="email"],
body.owc-dark-luxury input[type="url"],
body.owc-dark-luxury input[type="password"],
body.owc-dark-luxury input[type="search"],
body.owc-dark-luxury input[type="tel"],
body.owc-dark-luxury input[type="number"],
body.owc-dark-luxury textarea,
body.owc-dark-luxury select {
	background-color: var(--owc-surface);
	color: var(--owc-text);
	border: 1px solid var(--owc-border);
	border-radius: var(--owc-radius);
	transition: border-color var(--owc-transition), box-shadow var(--owc-transition);
}
body.owc-dark-luxury input[type="text"]:focus,
body.owc-dark-luxury input[type="email"]:focus,
body.owc-dark-luxury input[type="url"]:focus,
body.owc-dark-luxury input[type="password"]:focus,
body.owc-dark-luxury input[type="search"]:focus,
body.owc-dark-luxury input[type="tel"]:focus,
body.owc-dark-luxury input[type="number"]:focus,
body.owc-dark-luxury textarea:focus,
body.owc-dark-luxury select:focus {
	border-color: var(--owc-accent);
	box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.18);
	outline: none;
}
body.owc-dark-luxury ::placeholder { color: var(--owc-text-muted); opacity: 1; }

/* ============================================================
   5. Footer
   ============================================================ */
body.owc-dark-luxury #footer-widgets,
body.owc-dark-luxury .footer-widgets {
	background-color: var(--owc-surface);
	border-top: 1px solid var(--owc-border);
	color: var(--owc-text-muted);
}
body.owc-dark-luxury #footer-widgets .widget-title,
body.owc-dark-luxury .footer-widgets .widget-title {
	color: #f4f1ea;
	font-family: var(--owc-font-display);
	position: relative;
	padding-bottom: 0.6em;
}
body.owc-dark-luxury #footer-widgets .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 2px;
	background: var(--owc-accent);
}
body.owc-dark-luxury #footer-widgets a { color: var(--owc-text-muted); }
body.owc-dark-luxury #footer-widgets a:hover { color: var(--owc-accent); }

body.owc-dark-luxury #footer-bottom {
	background-color: #0b0d10;
	border-top: 1px solid var(--owc-border);
	color: var(--owc-text-muted);
}
body.owc-dark-luxury #footer-bottom a { color: var(--owc-text-muted); }
body.owc-dark-luxury #footer-bottom a:hover { color: var(--owc-accent); }

/* ============================================================
   6. Focus visibility (a11y)
   ============================================================ */
body.owc-dark-luxury a:focus-visible,
body.owc-dark-luxury button:focus-visible,
body.owc-dark-luxury input:focus-visible,
body.owc-dark-luxury textarea:focus-visible,
body.owc-dark-luxury select:focus-visible,
body.owc-dark-luxury [tabindex]:focus-visible {
	outline: 2px solid var(--owc-accent);
	outline-offset: 2px;
}

/* ============================================================
   7. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	body.owc-dark-luxury * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}