:root {
  --overlay-bg: rgba(0,0,0,0.35);
  --overlay-text: #fff;
  --overlay-gap: 1rem;
  --overlay-maxw: 800px;
  --btn-bg: #fff;
  --btn-text: #000;
  --btn-bg-hover: #000;
  --nav-bg: #111;
  --nav-text: #fff;
  --nav-accent: #fff;
  --fade-ms: 600ms;
  --nav-underline-thickness: 1px;
  --nav-underline-duration: 200ms;
  --nav-wght-normal: 450;   /* base weight (use 400 if your font isn't variable) */
  --nav-wght-active: 650;   /* hover/active weight */
    --hdr-h-mobile: 90px;
  --hdr-h-desktop: 72px;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111; }
h1 {
  text-transform: uppercase; color: white;
}

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  white-space: nowrap; border: 0;
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
  z-index: 10;
}
.site-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.site-title a { color: #fff; text-decoration: none; }
.site-title a img:focus-visible { outline: 1px solid white; outline-offset: 3px;
  }
/* Nav toggle (hamburger) */
.nav-toggle {
  appearance: none;
  background: rgba(255,255,255,0);
  border: 0;
  z-index: 10000;
/*  border-radius: .5rem;*/
  padding: .5rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}
.nav-toggle .bars { display: inline-block; width: 20px; height: 2px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #fff;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top: 6px; }

/* Off-canvas nav */
.site-nav {
  position: fixed;
  top: 0; right: 0;
  width: min(85vw, 360px);
  height: 100dvh;
  background: var(--nav-bg);
  color: var(--nav-text);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 11;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.site-nav.is-open { transform: translateX(0); }
.site-nav a { color: var(--nav-text); text-decoration: none; }
.site-nav a:focus, .site-nav a:hover { text-decoration: underline; }

/* Backdrop */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9;
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Menu list */
.menu { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.menu > li > a { display: block; padding: .6rem .5rem; text-transform: uppercase; font-weight: 200; transition: font-weight 2s ease-in-out;
/*border-radius: .375rem; */
}
.menu > li > a:hover { font-weight: 500; transition: font-weight 90ms ease-in-out; text-decoration: none; border-bottom: var(--nav-active-underline) solid currentColor; }
.menu > li > a:focus-visible { font-weight: 500; outline: 1px solid var(--nav-accent); outline-offset: 3px; transition: font-weight 180ms ease-in-out; text-decoration: none; border-bottom: var(--nav-active-underline) solid currentColor; }

/* Desktop nav */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-header { background: transparent; }
  .site-nav {
    position: static;
    transform: none !important;
    height: auto;
    width: auto;
    background: transparent;
    color: #fff;
    padding: 0;
    flex-direction: row;
    align-items: center;
  }
  .menu { display: flex; gap: 1rem; }
  .menu > li > a { padding: .25rem 0; }
  .nav-backdrop { display: none; }
  .site-title a { color: #fff; }
  img {
    max-width:320px;
    }
}

/* Footer */
.site-footer { padding: 1rem 1.25rem; position: relative; z-index: 1; color: #fff; }
.site-footer a { color: inherit; text-decoration: none; }

/* Slider */
.slider {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--fade-ms) ease-in-out;
  will-change: opacity;
  z-index: 0;
}
.slide.is-active { opacity: 1; z-index: 2; }
.slide.is-leaving { z-index: 1; }

/* Overlay */
.slide__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  display: grid;
  place-items: center;
  padding: 2rem;
}
.overlay__content {
  color: var(--overlay-text);
  text-align: center;
  max-width: var(--overlay-maxw);
  margin-inline: auto;
  display: grid;
  gap: var(--overlay-gap);
}
.overlay__title {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.15;
  margin: 0;
  font-weight: 200;
  color: white;
}
.overlay__text {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 2.5rem;
  margin: 0;
  font-weight: 200;
  border-top: 1px solid white;
}
.overlay__actions a {
  display: inline-block;
  padding: .85rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
/*  border-radius: .375rem;*/
  font-weight: 600;
}
.overlay__actions a:focus, .overlay__actions a:hover {
  background: var(--btn-bg-hover);
  outline: 2px solid #fff;
  outline-offset: 2px;
    color: white;
}

/* Slider controls */
.slider__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  z-index: 3;
}
.slider__btn {
  appearance: none;
  border: 0;
/*  border-radius: 999px;*/
  padding: .6rem .9rem;
/*  background: rgba(255,255,255,.9);*/
  cursor: pointer;
  font-weight: 600;
}
.slider__btn:hover, .slider__btn:focus-visible {
  background: black;
  color: white;
  outline: 1px solid white; outline-offset: 3px;
}
/* Dots (tabs) */
.slider__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4.25rem;
  display: flex;
  gap: .5rem;
  z-index: 3;
}
.slider__dot {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 0;
}
.slider__dot[aria-selected="true"] { background: #fff; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}


/* Close button inside off-canvas nav (mobile only) */
.nav-close {
  align-self: flex-end;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--nav-text);
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem;
  margin-bottom: .25rem;
}
.nav-close:focus-visible { outline: 3px solid var(--nav-accent); outline-offset: 2px; }

@media (min-width: 768px) {
  .nav-close { display: none; }
}

/* Animate hamburger into an X when menu open */
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before {
  top: 0; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bars::after {
  top: 0; transform: rotate(-45deg);
}
.bars, .bars::before, .bars::after { transition: transform .2s ease, background .2s ease; }


/* Black header everywhere except the homepage (front-page) */
body:not(.home) .site-header {
  background: #000 !important;
  border-bottom: 1px solid white;
}

/* Keep link colors readable on the black header */
body:not(.home) .site-title a,
body:not(.home) .site-nav a {
  color: #fff;
}

body {  
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background: black;
  color: white;
}


/* Brand: title + tagline */
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-tagline {
  margin: 0;
  font-size: .9rem;
  line-height: 1;
  color: rgba(255,255,255,.85);
}

/* On small screens you may want to hide or stack it */
/* Mobile: tagline under logo, left aligned */
@media (max-width: 767px) {

  .brand {
    display: flex;            /* ensure flex on mobile */
    flex-direction: column;   /* stack logo then tagline */
    align-items: flex-start;  /* left align */
    gap: .25rem;
  }

  /* If you previously hid the tagline on mobile, unhide it */
  .site-tagline {
    display: block !important;
    margin: 0;                /* tighten spacing */
    line-height: 1.1;
    text-align: left;
    /* Optional size tweak */
    font-size: .9rem;
  }

  .brand__logo img { display: block; } /* avoid baseline bumps */

}

/* If you made the header black on non-home pages, ensure contrast */
body:not(.front-page) .site-tagline { color: #fff; }


.brand__logo img { max-width: 185px; height: 45px;display: block; }
@media (min-width: 768px) { .brand__logo img {  } }



/* Tidy the tagline line box */
.site-tagline {
  margin: 0;
  line-height: 1;
}

/* Mobile: tagline under logo, left aligned */
@media (max-width: 767px) {
  .brand {
    display: flex;            /* ensure flex on mobile */
    flex-direction: column;   /* stack logo then tagline */
    align-items: flex-start;  /* left align */
    gap: .25rem;
  }

  /* If you previously hid the tagline on mobile, unhide it */
  .site-tagline {
    display: block !important;
    margin: 0;                /* tighten spacing */
    line-height: 1.1;
    text-align: left;
    /* Optional size tweak */
    font-size: .9rem;
  }

  .brand__logo img { display: block; } /* avoid baseline bumps */
}

  .nav-toggle {
    position: fixed;
    top: max(25px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 120; /* above .site-nav (11) and .nav-backdrop (9) */
  }

  /* Give the header a little room so the fixed button doesn't overlap text */
  .site-header { padding-right: 56px; }



.menu > li > a {
  position: relative;
  text-decoration: none;
  font-weight: var(--nav-wght-normal);
  transition:
    color 150ms ease,
    letter-spacing 150ms ease,
    transform 150ms ease,
    font-weight 180ms ease;      /* smooth if using a variable font */
  transform: none;
}

/* Animated underline using a pseudo-element */
.menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px; /* tweak if you want it tighter */
  border-bottom: var(--nav-underline-thickness) solid transparent; /* placeholder */
  height: var(--nav-underline-thickness);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center; /* use 'center' for center-out effect */
  transition: transform var(--nav-underline-duration) ease;
  pointer-events: none;
}

/* Hover / focus: weight + underline + slight emphasis */
.menu > li > a:hover,
.menu > li > a:focus-visible {
  font-weight: var(--nav-wght-active); /* smoothly animates with variable fonts */
  letter-spacing: -0.01em;             /* "heavier" feel for non-variable fonts */
  transform: translateY(-3px) scale(1.02);
}
.menu > li > a:hover::after,
.menu > li > a:focus-visible::after {
  transform: scaleX(1);
}

/* Selected/current page: persist underline + weight */
.menu a[aria-current="page"],
.menu .current-menu-item > a,
.menu .current_page_item > a {
  font-weight: var(--nav-wght-active);
  transform: translateY(-3px) scale(1.02);
}
.menu a[aria-current="page"]::after,
.menu .current-menu-item > a::after,
.menu .current_page_item > a::after {
  transform: scaleX(1);
}

/* Desktop-only underline animation (keep your mobile pill style) */
@media (max-width: 767px) {
  .site-nav .menu > li > a::after { display: none; }
  /* You can still keep the weight change on mobile if you like */
}

/* Respect reduced motion (keep weight/color but skip movement) */
@media (prefers-reduced-motion: reduce) {
  .menu > li > a { transition: color 150ms ease, font-weight 180ms ease; }
  .menu > li > a:hover,
  .menu > li > a:focus-visible { transform: none; letter-spacing: -0.01em; }
  .menu > li > a::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu > li > a::after { transition: none; }
}

/* ===== Page & Single layout ===== */


/* Account for fixed header when scrolling to anchors */
html { scroll-padding-top: calc(var(--hdr-h-mobile) + env(safe-area-inset-top)); }
@media (min-width: 768px) {
  html { scroll-padding-top: calc(var(--hdr-h-desktop) + env(safe-area-inset-top)); }
}

/* Main wrapper used by page.php and single.php */
.page-wrap {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 1rem;
  /* space below the fixed header */
  padding-top: calc(var(--hdr-h-mobile) + env(safe-area-inset-top) + 16px);
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .page-wrap {
    padding-top: calc(var(--hdr-h-desktop) + env(safe-area-inset-top) + 24px);
  }
}
a {
    color: red;
}
h2 {
    color: red;
    font-weight: 200;
    text-transform: uppercase;
}
/* Content niceties */
.entry-title { margin: 0 0 1rem; }
.entry-content { line-height: 1.65; font-size: 1rem; }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; }
.entry-content figure { margin: 1rem 0; }

/* WP align classes */
.entry-content .alignleft  { float: left;  margin: .25rem 1rem .5rem 0; }
.entry-content .alignright { float: right; margin: .25rem 0 .5rem 1rem; }
.entry-content .aligncenter{ display: block; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .entry-content .alignleft,
  .entry-content .alignright { float: none; margin: 1rem 0; }
  .entry-content img, .entry-content video, .entry-content iframe { width: 100%; height: auto; }
}

/* If logged in, offset the fixed header under the admin bar */
body.admin-bar .site-header { top: 32px; }          /* desktop */
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }        /* mobile admin bar height */
}