@charset "UTF-8";
/*!
 * Hot Web Design - dark theme.
 *
 * This file is a THEME, not a set of patches: it re-maps the semantic tokens
 * declared in user.css and adds only the handful of rules that are genuinely
 * theme-specific (glass surfaces, image treatment). If a component needs a new
 * dark rule here, that almost always means the component is hard-coding a
 * colour in user.css and should consume a token instead.
 *
 * Two entry points:
 *   html.hwd-dark          - explicit choice (visitor toggle, or forced default)
 *   html.hwd-theme-system  - follow the operating system, resolved by CSS so the
 *                            theme is still correct when JavaScript is disabled
 */

/* ------------------------------------------------------------
   Dark palette constants.
   Always declared, only consumed by the two mapping blocks below.
   ------------------------------------------------------------ */
:root {
  --hwd-dk-bg: #0f0f0f;
  --hwd-dk-surface: #1a1a1a;
  --hwd-dk-surface-2: #161618;
  --hwd-dk-surface-3: #242424;
  --hwd-dk-text: #d4d4d4;
  --hwd-dk-heading: #fff;
  --hwd-dk-muted: #a3a3a3;
  --hwd-dk-border: #2e2e2e;
  --hwd-dk-overlay: rgba(0, 0, 0, .55);
  --hwd-dk-menu-bg: rgba(15, 15, 15, .86);
  --hwd-dk-menu-blur: saturate(140%) blur(12px);
  /* A hairline, not an outline: the previous rgba(70,70,70,.8) read as a hard
     edge against the near-black header. This sits just above the surface. */
  --hwd-dk-menu-border: rgba(255, 255, 255, .07);
  --hwd-dk-footer-bg: #141414;
  --hwd-dk-footer-text: #a3a3a3;
  --hwd-dk-footer-heading: #fff;
  --hwd-dk-footer-bottom-bg: #0d0d0d;
  --hwd-dk-shadow-sm: 0 6px 16px rgba(0, 0, 0, .45);
  --hwd-dk-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  --hwd-dk-shadow-lg: 0 18px 40px rgba(0, 0, 0, .5);
  --hwd-dk-shadow-modal: 0 20px 60px rgba(0, 0, 0, .6);

  /* Accent lightened for dark surfaces. The flat value is the fallback for
     browsers without color-mix(). */
  --hwd-dk-accent: #b9a5ff;
  --hwd-dk-accent: color-mix(in srgb, var(--hwd-primary) 45%, #fff);
}

/* ------------------------------------------------------------
   Token mapping.
   The two blocks below are intentionally identical; a selector list cannot
   span a media query. Keep them in sync.
   ------------------------------------------------------------ */
html.hwd-dark {
  color-scheme: dark;

  --hwd-bg: var(--hwd-dk-bg);
  --hwd-surface: var(--hwd-dk-surface);
  --hwd-surface-2: var(--hwd-dk-surface-2);
  --hwd-surface-3: var(--hwd-dk-surface-3);
  --hwd-card-bg: var(--hwd-dk-surface);
  --hwd-overlay: var(--hwd-dk-overlay);

  --hwd-text: var(--hwd-dk-text);
  --hwd-heading: var(--hwd-dk-heading);
  --hwd-muted: var(--hwd-dk-muted);
  --hwd-accent-text: var(--hwd-dk-accent);
  --hwd-link: var(--hwd-dk-accent);
  --hwd-link-hover: var(--hwd-dk-heading);

  --hwd-border: var(--hwd-dk-border);
  --hwd-separator: var(--hwd-dk-border);

  --hwd-menu-bg: var(--hwd-dk-menu-bg);
  --hwd-menu-blur: var(--hwd-dk-menu-blur);
  --hwd-menu-border: var(--hwd-dk-menu-border);

  --hwd-input-bg: var(--hwd-dk-surface-3);
  --hwd-input-text: var(--hwd-dk-text);
  --hwd-input-border: var(--hwd-dk-border);
  --hwd-placeholder: var(--hwd-dk-muted);

  --hwd-shadow-sm: var(--hwd-dk-shadow-sm);
  --hwd-shadow: var(--hwd-dk-shadow);
  --hwd-shadow-lg: var(--hwd-dk-shadow-lg);
  --hwd-shadow-modal: var(--hwd-dk-shadow-modal);

  --hwd-success: #4ade80;
  --hwd-warning: #fbbf24;
  --hwd-error: #f87171;
  --hwd-info: #60a5fa;

  --hwd-focus: var(--hwd-dk-accent);
}

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system {
    color-scheme: dark;

    --hwd-bg: var(--hwd-dk-bg);
    --hwd-surface: var(--hwd-dk-surface);
    --hwd-surface-2: var(--hwd-dk-surface-2);
    --hwd-surface-3: var(--hwd-dk-surface-3);
    --hwd-card-bg: var(--hwd-dk-surface);
    --hwd-overlay: var(--hwd-dk-overlay);

    --hwd-text: var(--hwd-dk-text);
    --hwd-heading: var(--hwd-dk-heading);
    --hwd-muted: var(--hwd-dk-muted);
    --hwd-accent-text: var(--hwd-dk-accent);
    --hwd-link: var(--hwd-dk-accent);
    --hwd-link-hover: var(--hwd-dk-heading);

    --hwd-border: var(--hwd-dk-border);
    --hwd-separator: var(--hwd-dk-border);

    --hwd-menu-bg: var(--hwd-dk-menu-bg);
    --hwd-menu-blur: var(--hwd-dk-menu-blur);
    --hwd-menu-border: var(--hwd-dk-menu-border);

    --hwd-input-bg: var(--hwd-dk-surface-3);
    --hwd-input-text: var(--hwd-dk-text);
    --hwd-input-border: var(--hwd-dk-border);
    --hwd-placeholder: var(--hwd-dk-muted);

    --hwd-shadow-sm: var(--hwd-dk-shadow-sm);
    --hwd-shadow: var(--hwd-dk-shadow);
    --hwd-shadow-lg: var(--hwd-dk-shadow-lg);
    --hwd-shadow-modal: var(--hwd-dk-shadow-modal);

    --hwd-success: #4ade80;
    --hwd-warning: #fbbf24;
    --hwd-error: #f87171;
    --hwd-info: #60a5fa;

    --hwd-focus: var(--hwd-dk-accent);
  }
}

/* ------------------------------------------------------------
   Chrome supplied by template parameters.
   These tokens are re-declared inline on <html> from the colour options, so a
   dark override has to win over an inline style: setting them again on <body>
   (which inherits from, rather than competes with, <html>) does exactly that
   without needing !important.
   ------------------------------------------------------------ */
html.hwd-dark body {
  --hwd-topbar-bg: #131315;
  --hwd-topbar-text: var(--hwd-dk-muted);
  --hwd-topbar-hover: var(--hwd-dk-accent);
  --hwd-header-bg: var(--hwd-dk-bg);
  --hwd-footer-bg: var(--hwd-dk-footer-bg);
  --hwd-footer-text: var(--hwd-dk-footer-text);
  --hwd-footer-heading: var(--hwd-dk-footer-heading);
  --hwd-footer-bottom-bg: var(--hwd-dk-footer-bottom-bg);
}

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system body {
    --hwd-topbar-bg: #131315;
    --hwd-topbar-text: var(--hwd-dk-muted);
    --hwd-topbar-hover: var(--hwd-dk-accent);
    --hwd-header-bg: var(--hwd-dk-bg);
    --hwd-footer-bg: var(--hwd-dk-footer-bg);
    --hwd-footer-text: var(--hwd-dk-footer-text);
    --hwd-footer-heading: var(--hwd-dk-footer-heading);
    --hwd-footer-bottom-bg: var(--hwd-dk-footer-bottom-bg);
  }
}

/* Sticky header variants. The light rules live on `body.hwd-sticky-*`
   (specificity 0,2,0); these need one class more to win. */
html.hwd-dark body.hwd-sticky-solid {
  --hwd-menu-bg: var(--hwd-dk-bg);
  --hwd-menu-blur: none;
}

html.hwd-dark body.hwd-sticky-transparent {
  --hwd-menu-bg: rgba(15, 15, 15, .5);
  --hwd-menu-blur: saturate(140%) blur(6px);
  --hwd-menu-border: rgba(255, 255, 255, .05);
}

html.hwd-dark body.hwd-sticky-transparent .hwd-header:hover,
html.hwd-dark body.hwd-sticky-transparent .hwd-header:focus-within {
  --hwd-menu-bg: rgba(15, 15, 15, .92);
}

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system body.hwd-sticky-solid {
    --hwd-menu-bg: var(--hwd-dk-bg);
    --hwd-menu-blur: none;
  }

  html.hwd-theme-system body.hwd-sticky-transparent {
    --hwd-menu-bg: rgba(15, 15, 15, .5);
    --hwd-menu-blur: saturate(140%) blur(6px);
    --hwd-menu-border: rgba(255, 255, 255, .05);
  }

  html.hwd-theme-system body.hwd-sticky-transparent .hwd-header:hover,
  html.hwd-theme-system body.hwd-sticky-transparent .hwd-header:focus-within {
    --hwd-menu-bg: rgba(15, 15, 15, .92);
  }
}

/* ------------------------------------------------------------
   Genuinely theme-specific rules.
   ------------------------------------------------------------ */

/* The dropdown sits on the same near-black surface as the header, so it needs a
   hairline rather than a visible frame. */
html.hwd-dark .hwd-dropdown { border-color: rgba(255, 255, 255, .08); }

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system .hwd-dropdown { border-color: rgba(255, 255, 255, .08); }
}

/* Hero: the light theme fades white into the tint surface; dark needs its own
   ramp because a white-to-grey gradient reads as a seam on a dark page. */
html.hwd-dark .hwd-hero {
  background: linear-gradient(180deg, var(--hwd-dk-bg) 0%, var(--hwd-dk-surface) 100%);
}

/* Client logo wall: no invert(), no image hacks. The logos keep their own
   colours; only the resting opacity is lifted so they stay legible on a dark
   background, exactly as the light theme lifts it on hover. */
html.hwd-dark .hwd-clients-grid img { opacity: .75; }

/* Theme toggle icon state. */
html.hwd-dark .hwd-dark-toggle .hwd-icon-moon { display: none; }
html.hwd-dark .hwd-dark-toggle .hwd-icon-sun { display: inline-block; }

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system .hwd-hero {
    background: linear-gradient(180deg, var(--hwd-dk-bg) 0%, var(--hwd-dk-surface) 100%);
  }

  html.hwd-theme-system .hwd-clients-grid img { opacity: .75; }

  html.hwd-theme-system .hwd-dark-toggle .hwd-icon-moon { display: none; }
  html.hwd-theme-system .hwd-dark-toggle .hwd-icon-sun { display: inline-block; }
}

/* Logo swap. Only one variant is ever shown; both are in the markup so the
   switch costs no layout shift and no extra request beyond the second file. */
html.hwd-dark .hwd-logo-img--light { display: none; }
html.hwd-dark .hwd-logo-img--dark { display: block; }

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system .hwd-logo-img--light { display: none; }
  html.hwd-theme-system .hwd-logo-img--dark { display: block; }
}

/* Bands that are explicitly styled by the administrator keep their chosen
   colours; only the "transparent" band follows the theme. */
html.hwd-dark .hwd-style-none { background: transparent; }

/* Joomla core surfaces that do not consume the template tokens. */
html.hwd-dark .card-header {
  background: var(--hwd-dk-surface-3);
  color: var(--hwd-dk-heading);
  border-block-end-color: var(--hwd-dk-border);
}

html.hwd-dark .system-unpublished {
  background: rgba(255, 255, 255, .04);
  border-inline-start: 3px solid var(--hwd-warning);
}

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system .hwd-style-none { background: transparent; }

  html.hwd-theme-system .card-header {
    background: var(--hwd-dk-surface-3);
    color: var(--hwd-dk-heading);
    border-block-end-color: var(--hwd-dk-border);
  }

  html.hwd-theme-system .system-unpublished {
    background: rgba(255, 255, 255, .04);
    border-inline-start: 3px solid var(--hwd-warning);
  }
}

/* Smooth the toggle between themes, but never fight a reduced-motion request
   and never animate the very first paint. */
@media (prefers-reduced-motion: no-preference) {
  html.hwd-theme-ready body,
  html.hwd-theme-ready .hwd-header,
  html.hwd-theme-ready .hwd-section,
  html.hwd-theme-ready .hwd-component,
  html.hwd-theme-ready .hwd-footer,
  html.hwd-theme-ready .hwd-copyright,
  html.hwd-theme-ready .hwd-hero {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
}

/* ------------------------------------------------------------
   Joomla system messages.
   joomla-alert hard-codes background-color:#fff at #id specificity, so the
   dark theme has to out-specify it. The accent bar keeps the status colour,
   which the template feeds from --hwd-success / --info / --warning / --error.
   ------------------------------------------------------------ */
html.hwd-dark #system-message-container joomla-alert,
html.hwd-dark #system-message-container joomla-alert[type="success"],
html.hwd-dark #system-message-container joomla-alert[type="message"],
html.hwd-dark #system-message-container joomla-alert[type="info"],
html.hwd-dark #system-message-container joomla-alert[type="notice"],
html.hwd-dark #system-message-container joomla-alert[type="warning"],
html.hwd-dark #system-message-container joomla-alert[type="error"],
html.hwd-dark #system-message-container joomla-alert[type="danger"] {
  background-color: var(--hwd-dk-surface);
  color: var(--hwd-dk-text);
}

@media (prefers-color-scheme: dark) {
  html.hwd-theme-system #system-message-container joomla-alert,
  html.hwd-theme-system #system-message-container joomla-alert[type="success"],
  html.hwd-theme-system #system-message-container joomla-alert[type="message"],
  html.hwd-theme-system #system-message-container joomla-alert[type="info"],
  html.hwd-theme-system #system-message-container joomla-alert[type="notice"],
  html.hwd-theme-system #system-message-container joomla-alert[type="warning"],
  html.hwd-theme-system #system-message-container joomla-alert[type="error"],
  html.hwd-theme-system #system-message-container joomla-alert[type="danger"] {
    background-color: var(--hwd-dk-surface);
    color: var(--hwd-dk-text);
  }
}