/**
 * WMD Solutions Base Theme - CSS Variables & Base Styles
 * Override any variable in your subtheme's css file.
 */

/* ======================================================
   GOOGLE FONTS
   Libre Franklin - body (matches CorporatePlus D8)
   Cinzel - headings (Copperplate-style, free)
   ====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Libre+Franklin:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root {
  /* Colors */
  --color-primary: #333333;
  --color-secondary: #666666;
  --color-accent: #c0392b;
  --color-text: #333333;
  --color-text-light: #ffffff;
  --color-bg: #ffffff;
  --color-bg-dark: #111111;
  --color-charcoal: #2d2d2d;

  /* Header */
  --header-bg: #ffffff;
  --header-padding-y: 1.5rem;
  --header-sticky-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --header-transparent-color: #ffffff;
  --header-transparent-hover: rgba(255, 255, 255, 0.85);
  --header-scrolled-color: var(--color-text);
  --header-fade-delay: 1000ms;
  --header-scroll-bg: rgba(255, 255, 255, 0.75);
  --header-scroll-blur: 8px;

  /* Nav */
  --nav-font-size: 0.78rem;
  --nav-letter-spacing: 0.08em;
  --nav-hover-bg: rgba(45, 45, 45, 0.7);
  --nav-dropdown-bg: rgba(30, 30, 30, 0.88);
  --nav-dropdown-blur: 8px;
  --nav-dropdown-color: #ffffff;
  --nav-dropdown-hover-bg: rgba(255, 255, 255, 0.1);

  /* Drawer */
  --drawer-width: 280px;
  --drawer-bg: #ffffff;
  --drawer-color: #333333;
  --drawer-border: rgba(0, 0, 0, 0.08);
  --drawer-hover-bg: var(--color-charcoal, #2d2d2d);
  --drawer-hover-color: #ffffff;
  --drawer-active-bg: var(--color-charcoal, #2d2d2d);
  --drawer-active-color: #ffffff;
  --drawer-child-bg: rgba(0, 0, 0, 0.04);
  --drawer-child-indent: 1.25rem;
  --drawer-font-size: 0.85rem;
  --drawer-font-weight: 600;
  --drawer-letter-spacing: 0.06em;

  /* Hero */
  --hero-card-bg: rgba(0, 0, 0, 0.25);
  --hero-card-blur: 6px;
  --hero-card-padding: 2rem 2.5rem;
  --hero-card-radius: 6px;

  /* Buttons */
  --btn-primary-bg: #c0392b;
  --btn-primary-color: #ffffff;
  --btn-primary-hover-bg: #a93226;
  --btn-primary-border: #c0392b;
  --btn-outline-color: #c0392b;
  --btn-outline-hover-bg: #c0392b;
  --btn-outline-hover-color: #ffffff;
  --btn-border-radius: 4px;
  --btn-padding: 0.5rem 1.5rem;
  --btn-font-size: 0.8rem;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0.06em;

  /* Gradient Overlay */
  --overlay-color: #000000;
  --overlay-gradient-start: 0.35;
  --overlay-gradient-end: 0.05;
  --overlay-solid-opacity: 0.3;

  /* Footer */
  --footer-bg: #111111;
  --footer-color: #ffffff;

  /* Logo */
  --logo-max-height: 82px;

  /* Typography */
  --font-heading: 'Cinzel', 'Copperplate Gothic', serif;
  --font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;

  /* Layout */
  --section-padding: 60px 0;
  --highlighted-padding: 60px 0;
  --hero-min-height: 400px;
  --hero-content-padding: 4rem 0;

  /* Links */
  --color-link: #c0392b;
  --color-link-hover: #a93226;
  --color-link-visited: #c0392b;
  --color-link-active: #c0392b;

  /* Region heading alignment */
  --region-highlighted-heading-align: center;
  --region-highlighted-top-heading-align: left;
  --region-content-heading-align: left;
  --region-sidebar-heading-align: left;

  /* Region block spacing */
  --region-content-gap: 2rem;
  --region-highlighted-gap: 3rem;
  --region-highlighted-top-gap: 0;
  --region-sidebar-gap: 2rem;

  /* Bootstrap overrides */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);

  /* Bootstrap link color overrides */
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-color-rgb: 192, 57, 43;
  --bs-link-hover-color-rgb: 169, 50, 38;

  /* Bootstrap button primary overrides */
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-border);
  --bs-btn-hover-bg: var(--btn-primary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-primary-hover-bg);
}

.region-highlighted .block > h2 { text-align: var(--region-highlighted-heading-align); }
.region-highlighted-top .block > h2 { text-align: var(--region-highlighted-top-heading-align); }
.region-content .block > h2 { text-align: var(--region-content-heading-align); }
.region-sidebar-first .block > h2,
.region-sidebar-second .block > h2 { text-align: var(--region-sidebar-heading-align); }

/* ======================================================
   REGION BLOCK SPACING
   ====================================================== */

.region-content > .block + .block { margin-top: var(--region-content-gap); }
.region-highlighted > .block + .block { margin-top: var(--region-highlighted-gap); }
.region-highlighted-top > .block + .block { margin-top: var(--region-highlighted-top-gap); }
.region-sidebar-first > .block + .block,
.region-sidebar-second > .block + .block { margin-top: var(--region-sidebar-gap); }

/* ======================================================
   GLOBAL IMAGE SCALING
   ====================================================== */

img {
  max-width: 100%;
  height: auto;
}

/* ======================================================
   BASE STYLES
   ====================================================== */

body {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.site-logo img {
  height: var(--logo-max-height);
  width: auto;
  display: block;
}

/* ======================================================
   OVERLAY UTILITIES
   ====================================================== */

.wmd-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--overlay-color) calc(var(--overlay-gradient-start) * 100%), transparent),
    color-mix(in srgb, var(--overlay-color) calc(var(--overlay-gradient-end) * 100%), transparent)
  );
  z-index: 1;
  pointer-events: none;
}

.wmd-overlay-solid {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-color);
  opacity: var(--overlay-solid-opacity);
  z-index: 1;
  pointer-events: none;
}

/* ======================================================
   BOOTSTRAP / GIN CONFLICT FIX
   ====================================================== */

.gin--vertical-toolbar .placeholder {
  display: unset;
  min-height: unset;
  vertical-align: unset;
  cursor: unset;
  background-color: unset;
  opacity: unset;
}