/* ============================================================
   cangineberry site overrides
   Layered ON TOP OF the vendored YOOtheme theme.css:
   - Futura BT brand font (adopted from cancrypt / can_security)
   - cancrypt-style top menu (brand left, EmSA logo right)
   Load this AFTER theme.css so these rules win at equal specificity.
   ============================================================ */

/* ─────────── EmSA brand fonts (Futura BT) ─────────── */
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Bk_BT_Book.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Bk_BT_Book_Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Md_BT_Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Md_BT_Medium_Italic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Md_BT_Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura BT';
  src: url('../fonts/Futura_Md_BT_Bold_Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --cgb-charcoal:   #2D2D2D;
  --cgb-ink:        #1A1A1A;
  --cgb-teal:       #1E9975;
  --cgb-teal-dark:  #157A5C;
  --cgb-gold:       #F0A22E;
  --cgb-radius-sm:  2px;
  --cgb-t-base:     150ms ease;
  --cgb-header-h:   68px;
  --cgb-container-x: clamp(20px, 4vw, 48px);
  --font-display: 'Futura BT', 'Jost', 'Century Gothic', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
  --font-body:    'Futura BT', 'Jost', 'Century Gothic', Arial, sans-serif;
}

/* ─────────── Adopt the Futura font choices site-wide ─────────── */
body,
.uk-navbar-nav > li > a,
.uk-subnav > * > a,
.uk-button,
.uk-card,
.el-content,
input, button, select, textarea {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium,
.uk-card-title, .el-title, .uk-logo, .uk-text-large {
  font-family: var(--font-display);
}

/* ============================================================
   Top menu — adopted from cancrypt (charcoal bar, teal underline,
   gold active state). Brand (CANgineBerry) left, EmSA logo right.
   ============================================================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 980;
  background: var(--cgb-charcoal);
  color: #fff;
  border-bottom: 3px solid var(--cgb-teal);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--cgb-container-x);
  height: var(--cgb-header-h);
}

header.site-header .brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity var(--cgb-t-base);
  text-decoration: none;
}
header.site-header .brand:hover { opacity: 0.85; text-decoration: none; }
/* White-lettering logo variant (CANgineBerry_Logo_white.png) is used so the
   logo reads directly on the dark charcoal bar, no white pill needed. */
header.site-header .brand img {
  display: block;
  height: 40px;
  width: auto;
}

header.site-header nav { flex: 1; }
header.site-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}
header.site-header nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--cgb-radius-sm);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--cgb-t-base);
}
header.site-header nav a:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
}
header.site-header nav a.nav-active {
  color: var(--cgb-gold);
  border-bottom-color: var(--cgb-gold);
}

/* Language toggle, pushed to the right end of the nav row */
header.site-header nav li.nav-lang {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
header.site-header nav li.nav-lang a { font-weight: 700; padding: 10px 8px; }

/* EmSA wordmark, far right */
header.site-header .emsa-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity var(--cgb-t-base);
  text-decoration: none;
}
header.site-header .emsa-logo img { display: block; height: 45px; width: auto; }
header.site-header .emsa-logo:hover { opacity: 0.8; text-decoration: none; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.menu-toggle svg { width: 24px; height: 24px; }

@media (max-width: 980px) {
  header.site-header {
    height: auto;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 16px;
  }
  header.site-header nav {
    order: 3;
    flex-basis: 100%;
    display: none;
  }
  header.site-header nav.open { display: block; }
  header.site-header nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
  }
  header.site-header nav a {
    display: block;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }
  header.site-header nav a.nav-active { border-bottom-color: var(--cgb-gold); }
  header.site-header nav li.nav-lang { margin-left: 0; padding-top: 8px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  header.site-header .emsa-logo { margin-left: auto; }
}

/* ─────────── Primary button recolored to brand teal ───────────
   theme.css paints uk-button-primary with a red/pink linear-gradient via
   background-image, so background-color alone is not enough - the gradient
   must be cleared too. */
.uk-button-primary {
  background-color: var(--cgb-teal);
  background-image: none;
  color: #fff;
  border-color: transparent;
}
.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-button-primary:active,
.uk-button-primary.uk-active {
  background-color: var(--cgb-teal-dark);
  background-image: none;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

/* ============================================================
   Footer — adopted from cancrypt (dark ink band, teal top border,
   centered web links + legal links).
   ============================================================ */
footer.site-footer {
  background: var(--cgb-ink);
  color: rgba(255, 255, 255, 0.55);
  padding: 56px var(--cgb-container-x) 32px;
  border-top: 3px solid var(--cgb-teal);
  text-align: center;
}
footer.site-footer .footer-copy {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin: 0 0 24px;
}
footer.site-footer .footer-links {
  list-style: none;
  padding: 24px 0;
  margin: 0 0 28px;
  display: flex;
  gap: 8px 28px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
footer.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color 120ms ease;
}
footer.site-footer .footer-links a:hover { color: var(--cgb-gold); text-decoration: none; }
footer.site-footer .footer-links a svg { display: block; }
footer.site-footer .footer-legal {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  justify-content: center;
}
footer.site-footer .footer-legal a {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms ease;
}
footer.site-footer .footer-legal a:hover { color: var(--cgb-gold); text-decoration: none; }

/* ─────────── CAN Dragon callout ───────────
   A dedicated class (not uk-card-primary) so it never inherits theme accent
   colors: dark charcoal + teal accent, matching the menu and footer. */
.dragon-callout {
  background: var(--cgb-charcoal);
  color: #fff;
  border-top: 3px solid var(--cgb-teal);
  border-radius: var(--cgb-radius-sm);
  padding: 32px;
}
.dragon-callout h3 { color: #fff; margin-top: 0; }
.dragon-callout p { color: rgba(255, 255, 255, 0.85); }

/* "Available soon" marker */
.soon-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cgb-gold);
  color: var(--cgb-ink);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* EOF */