/*
 * MEPSO Child — design system, Notion-style.
 *
 * Aesthetic: near-white surfaces, near-black text, typographic
 * hierarchy. Navy/blue brand colours are demoted to rare accent
 * use (links on hover, focus ring, state indicators) — they do
 * NOT paint surfaces. Gradients removed. Shadows minimal.
 * 1px hairline borders replace coloured accent strips.
 *
 * Customer brand colours still arrive from the Customizer as
 * --mepso-primary / --mepso-secondary, so a future customer can
 * repaint the accents without touching this CSS.
 */

/* ===================================================================
 * 1. Design tokens
 * =================================================================== */
:root {
  /* Brand (primary = navy, secondary = electric blue) */
  --mepso-primary:   #1B365D;
  --mepso-secondary: #0066B3;

  /* Vivid gradients — used on primary CTAs, progress, hero, accent strips */
  --g-brand: linear-gradient(135deg, #1B365D 0%, #0066B3 60%, #00A3FF 100%);
  --g-brand-h: linear-gradient(135deg, #16304F 0%, #005694 60%, #0089D9 100%);
  --g-accent-strip: linear-gradient(90deg, #1B365D 0%, #0066B3 50%, #00A3FF 100%);
  --g-hero-overlay:
    linear-gradient(135deg, rgba(27, 54, 93, 0.82) 0%, rgba(0, 102, 179, 0.55) 50%, rgba(0, 163, 255, 0.25) 100%);

  /* Neutral scale — the real foundation of the system */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBFA;  /* Notion off-white page bg */
  --n-50:  #F7F6F3;  /* subtle surface */
  --n-100: #EFEEEB;  /* hover state tint */
  --n-200: #E3E2DE;  /* hairline borders */
  --n-300: #D3D1CB;
  --n-400: #A5A39D;
  --n-500: #6F6E69;  /* muted text */
  --n-700: #373530;  /* primary body text */
  --n-900: #191918;  /* near-black — headings, buttons */

  /* Semantic */
  --accent-red:   #E03E3E;
  --accent-amber: #D9730D;
  --accent-green: #0F7B6C;
  --accent-blue:  #0B6E99;

  /* Surface tokens (semantic aliases over neutrals) */
  --surface-0:   var(--n-0);
  --surface-1:   var(--n-25);
  --surface-2:   var(--n-50);
  --surface-tint: var(--n-100);
  --border:      var(--n-200);
  --border-strong: var(--n-300);
  --text:        var(--n-900);
  --text-body:   var(--n-700);
  --text-muted:  var(--n-500);
  --text-subtle: var(--n-400);

  /* Typography */
  --mepso-font-sans:
    "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans Macedonian", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mepso-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Scale — Notion uses tighter, less modular */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */

  /* Spacing — 4-based */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Radii — small and consistent */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Shadows — only for floating elements (modals, dropdowns).
   * Cards get a 1px border instead. */
  --shadow-pop:
    0 1px 2px rgba(15, 15, 15, 0.08),
    0 8px 16px rgba(15, 15, 15, 0.08);

  /* Focus ring — subtle blue, accessible */
  --focus: 0 0 0 2px rgba(11, 110, 153, 0.4);
}

/* ===================================================================
 * 2. Base + typography
 * =================================================================== */
body {
  font-family: var(--mepso-font-sans);
  background: var(--surface-0);
  color: var(--text-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "kern", "liga";
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--mepso-font-sans);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}
h1, .entry-title { font-size: clamp(var(--fs-2xl), 1.5rem + 2vw, var(--fs-4xl)); }
h2                { font-size: var(--fs-2xl); font-weight: 700; }
h3                { font-size: var(--fs-xl);  font-weight: 650; }
h4                { font-size: var(--fs-lg);  font-weight: 600; }

p, li, dd {
  line-height: 1.55;
  color: var(--text-body);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(11, 110, 153, 0.4);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
a:hover {
  color: var(--mepso-secondary);
  text-decoration-color: var(--mepso-secondary);
}

/* Monospace for code / numeric */
code, kbd, samp, pre {
  font-family: var(--mepso-font-mono);
  font-size: 0.9em;
}
code {
  background: var(--surface-tint);
  color: var(--accent-red);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}

/* ===================================================================
 * 3. Focus ring — one rule, minimal
 * =================================================================== */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-color: transparent;
}

/* ===================================================================
 * 4. Buttons — vivid MEPSO gradient primary
 * =================================================================== */
.ast-button,
.wp-block-button__link,
.button,
input[type="submit"],
input[type="button"],
button:not([class*="elementor"]):not(.ld-button):not(.wp-block-navigation__responsive-container-open) {
  font-family: var(--mepso-font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 10px 20px;
  background: var(--g-brand);
  color: var(--n-0);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 120ms ease, filter 160ms ease;
  box-shadow: 0 1px 2px rgba(27, 54, 93, 0.18), 0 4px 12px rgba(0, 102, 179, 0.18);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.ast-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--g-brand-h);
  color: var(--n-0);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(27, 54, 93, 0.22), 0 10px 22px rgba(0, 102, 179, 0.28);
}
.ast-button:active,
.wp-block-button__link:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* Secondary / outline */
.is-style-outline .wp-block-button__link,
.ast-button.secondary,
.button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.is-style-outline .wp-block-button__link:hover,
.ast-button.secondary:hover {
  background: var(--surface-tint);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ===================================================================
 * 5. Cards / surfaces — 1px border, no shadow by default
 * =================================================================== */
.mepso-card,
.wp-block-group.is-style-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  transition: background 120ms ease, border-color 120ms ease;
}
.mepso-card:hover,
.wp-block-group.is-style-card:hover {
  background: var(--surface-1);
  border-color: var(--border-strong);
  transform: none;
  box-shadow: none;
}

/* ===================================================================
 * 6. Forms
 * =================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--mepso-font-sans);
  font-size: var(--fs-md);
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
  transition: border-color 80ms ease, box-shadow 80ms ease;
  width: 100%;
  max-width: 100%;
  line-height: 1.4;
}
input:hover, textarea:hover, select:hover {
  border-color: var(--border-strong);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--focus);
  outline: none;
}
input::placeholder, textarea::placeholder {
  color: var(--text-subtle);
}

label {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text);
  letter-spacing: 0;
}

/* ===================================================================
 * 7. Header / nav — thin hairline, no gradient, no navy fill
 * =================================================================== */
.site-header,
.ast-header-break-point .main-header-bar,
.ast-theme-transparent-header .main-header-bar,
.main-header-bar {
  background: var(--surface-0) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: relative;
}
/* Thin vivid gradient rule directly under the header — gives the
 * whole site a single visible "brand moment" without coloring the
 * header itself. */
.site-header::after,
.main-header-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--g-accent-strip);
  z-index: 2;
}
.main-header-menu .menu-item > a,
.main-header-menu > li > a {
  color: var(--text-body) !important;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  padding: 8px 12px !important;
  border-radius: var(--r-sm);
  transition: background 100ms ease, color 100ms ease;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu > li > a:hover {
  background: rgba(27, 54, 93, 0.06);  /* subtle navy tint */
  color: var(--mepso-primary) !important;
}
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
  color: var(--mepso-primary) !important;
  background: rgba(27, 54, 93, 0.08);
  position: relative;
  font-weight: 600;
}
.main-header-menu .current-menu-item > a::after {
  content: none;  /* no gradient underline; rely on background tint */
}

/* ===================================================================
 * 8. Footer — light, not navy
 * =================================================================== */
.site-footer,
.ast-footer-copyright,
.ast-builder-footer-grid-columns {
  background: var(--surface-1) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border);
  box-shadow: none;
  position: relative;
}
/* Mirror of the header accent strip — bookends the page with the
 * brand gradient */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--g-accent-strip);
}
.site-footer a,
.ast-footer-copyright a {
  color: var(--text-body);
  text-decoration-color: rgba(55, 53, 48, 0.3);
}
.site-footer a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.footer-widget-area h1,
.footer-widget-area h2,
.footer-widget-area h3,
.footer-widget-area h4 {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.footer-widget-area h3::after {
  content: none;  /* no gradient accent bar */
}
.footer-widget-area ul {
  list-style: none;
  padding-left: 0;
}
.footer-widget-area ul li {
  padding: 3px 0;
  font-size: var(--fs-sm);
}

/* ===================================================================
 * 9. Tables
 * =================================================================== */
table:not(.wp-block-table) {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}
table:not(.wp-block-table) th {
  background: var(--surface-1);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table:not(.wp-block-table) td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
}
table:not(.wp-block-table) tr:hover td {
  background: var(--surface-1);
}

/* ===================================================================
 * 10. Selection + content utilities
 * =================================================================== */
::selection {
  background: rgba(11, 110, 153, 0.2);
  color: var(--text);
}

/* Content-flow polish */
.entry-content a:not(.button):not(.wp-block-button__link):not(.ld-button):not(.btn):not([class*="elementor-button"]) {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.entry-content img:not(.custom-logo):not([class*="wp-post-image"]):not(.emoji) {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.entry-content blockquote,
.wp-block-quote {
  border-left: 3px solid var(--border-strong);
  padding: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
  color: var(--text-body);
  font-style: normal;
  font-size: var(--fs-md);
  background: transparent;
  border-radius: 0;
}
.entry-content blockquote cite {
  display: block;
  margin-top: var(--sp-2);
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Scrollbar */
html {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ===================================================================
 * 10b. Vivid hero treatment for Elementor top sections
 *
 * Any Elementor section configured with a background image gets
 * a vivid navy→electric-blue→cyan gradient overlay so the hero
 * text reads clearly AND the page feels energetic rather than a
 * flat photograph. First .elementor-top-section on every page
 * qualifies; opt-out with .mepso-no-overlay on the section.
 * =================================================================== */
.elementor-section.elementor-top-section:first-of-type {
  position: relative;
  isolation: isolate;
}
.elementor-section.elementor-top-section:first-of-type:not(.mepso-no-overlay)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-hero-overlay);
  pointer-events: none;
  z-index: 0;
}
.elementor-section.elementor-top-section:first-of-type > .elementor-container {
  position: relative;
  z-index: 1;
}
.elementor-section.elementor-top-section:first-of-type h1,
.elementor-section.elementor-top-section:first-of-type h2,
.elementor-section.elementor-top-section:first-of-type .elementor-heading-title {
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 20, 50, 0.35);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.elementor-section.elementor-top-section:first-of-type p,
.elementor-section.elementor-top-section:first-of-type .elementor-widget-text-editor * {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 20, 50, 0.25);
}

/* A decorative thin glowing rule under hero headings */
.elementor-section.elementor-top-section:first-of-type h1::after,
.elementor-section.elementor-top-section:first-of-type .elementor-heading-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0));
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(0, 163, 255, 0.5);
}

/* ===================================================================
 * 11. Reduced motion preference
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
 * 12. Print
 * =================================================================== */
@media print {
  .site-footer, .ast-header-break-point, nav, .ast-primary-menu,
  #secondary, .widget { display: none !important; }
  body { background: #fff; color: #000; }
}