/*
Theme Name:        Empire BI
Theme URI:         https://empireconsulting.be/
Author:            Empire Consulting BV
Author URI:        https://empireconsulting.be/
Description:       The official WordPress theme for the Empire Business Intelligence Portal. A luxury-refined dark editorial aesthetic built around Empire Consulting's navy and gold brand identity. Includes full BI portal integration, client dashboards, project analytics, and learning center views.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           Proprietary
License URI:       https://empireconsulting.be/
Text Domain:       empire-bi
Tags:              business-intelligence, analytics, dark, luxury, consulting, custom-menu, featured-images, full-width-template, custom-logo, editor-style, translation-ready
*/

/*
 * Empire BI Theme — Global CSS Custom Properties
 * All component styles live in assets/css/
 * This file provides the theme declaration + essential resets only.
 */

:root {
  /* Brand */
  --c-navy:        #0D1B2A;
  --c-navy-deep:   #080F18;
  --c-navy-mid:    #14263A;
  --c-navy-light:  #1E3550;
  --c-gold:        #C9A84C;
  --c-gold-light:  #E8C76A;
  --c-gold-pale:   #F5E6B8;
  --c-gold-dim:    rgba(201,168,76,0.15);

  /* Neutrals */
  --c-white:       #FFFFFF;
  --c-off-white:   #F8F9FA;
  --c-surface:     #111C28;
  --c-surface-2:   #172231;
  --c-border:      rgba(201,168,76,0.18);
  --c-border-soft: rgba(255,255,255,0.07);
  --c-text:        #E8EDF2;
  --c-text-sub:    #8A9BB0;
  --c-text-muted:  #516072;

  /* Semantic */
  --c-green:   #10B981;
  --c-red:     #EF4444;
  --c-amber:   #F59E0B;
  --c-blue:    #3B82F6;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Layout */
  --max-width:      1320px;
  --sidebar-width:  280px;
  --header-height:  72px;

  /* Radii */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill:999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 48px rgba(0,0,0,0.45);
  --shadow-gold:0 0 32px rgba(201,168,76,0.12);

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 150ms var(--ease);
  --t-base: 280ms var(--ease);
  --t-slow: 500ms var(--ease);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-navy-deep);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-gold-light); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--c-white); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
p { color: var(--c-text); margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--c-white); }
code, pre { font-family: var(--font-mono); }
hr { border: none; border-top: 1px solid var(--c-border-soft); margin: var(--space-xl) 0; }

/* ── Screen reader ───────────────────────────────────────────────────────── */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px); position: absolute !important;
  height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--c-surface); border-radius: var(--r-md);
  clip: auto !important; color: var(--c-gold);
  display: block; font-size: 14px; font-weight: 700;
  height: auto; left: 5px; padding: 15px 23px 14px;
  text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* ── Utility classes ─────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── WP alignment helpers ────────────────────────────────────────────────── */
.alignleft  { float: left; margin-right: var(--space-lg); margin-bottom: var(--space-md); }
.alignright { float: right; margin-left: var(--space-lg); margin-bottom: var(--space-md); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: var(--space-md); }
.alignwide  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: 100%; }

/* ── Skip link ───────────────────────────────────────────────────────────── */
#skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; padding: 12px 20px; background: var(--c-gold); color: var(--c-navy); font-weight: 700; }
#skip-link:focus { top: 0; }