/* ==========================================================================
   global.css
   Shared design tokens, layout, and components for Harmura properties.
   Formatting: one declaration per line for diff-friendly version control.
   ========================================================================== */


/* ==========================================================================
   1) Global Design Tokens
   --------------------------------------------------------------------------
   Color, typography, spacing, effects, and z-index scale.
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --bg: #08330f;
  --bg-lighter: rgba(255,255,255,0.05);
  --bg-lighter-lighter: rgba(255,255,255,0.1);
  --bg-darker: rgba(0,0,0,0.2);
  --bg-darker-darker: rgba(0,0,0,0.3);
  
  --font-size: 17px;
  --font-size-small: 12px;
  --line-height: 1.7;
  
  --ink: rgba(255, 255, 255, 0.90);        /* primary text, headers, header/footer links */
  --ink-muted: rgba(255, 255, 255, 0.75);
  --ink-muted-muted: rgba(255, 255, 255, 0.5);
  --ink-warning: #de9c02;
  
  --line: rgba(255, 255, 255, 0.25);       /* header/footer borders */
  --accent: #64DBA2;                       /* links, active button bg+border, inactive border+text */
  --accent-hover: #66FEB5;                 /* hover when accent is used */

  /* Type & spacing */
  --font-sans: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Lora", Georgia, Cambria, "Times New Roman", serif;
  --small: 14px;                           /* small text size for UI & metadata */
  --pad-x: 16px;                           /* page-side padding; aligns with hamburger & footer logo */

  /* Layout widths */
  --maxw: 1100px;                          /* global max content width (e.g., grids, rails) */
  --read-maxw: 55ch;                       /* comfortable reading width for long-form text */

  /* Effects */
  --radius: 10px;                          /* rounded corners for cards/media */
  --button-pad-y: 0.33em;                      /* vertical button padding */
  --button-pad-x: 0.75em;                        /* horizontal button padding */
  --button-border: 2px;                       /* button border thickness */
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);       /* hero media/card shadow */
  --shadow-soft: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.10);
  --menu-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);  /* header menu popup shadow */

  /* Z-index scale */
  --z-header: 50;                          /* header layer */
  --z-menu: 60;                            /* menu popup layer */
  --z-backdrop: 55;                        /* menu backdrop layer */
}


/* ==========================================================================
   2) Base
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

/* optional: prevent any stray horizontal scroll from subpixel math elsewhere */
html {
  overflow-x: clip; /* falls back to hidden where unsupported */
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

figure {
  margin: 2rem 0;
  text-align: center;
}

figcaption {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-top: 0.5rem;
}

blockquote {
  margin: 1.2em 0;
  padding-left: 1em;
  border-left: 2px solid color-mix(in oklab, var(--link) 55%, transparent);
}

/* Hide visually, keep for screen readers */
.hidden-visually {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Variant: hidden until focused (good for skip links) */
.hidden-visually--focusable:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}



/* ==========================================================================
   3) Typography & Links
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  
  font-size: var(--font-size);
  line-height: var(--line-height);
  hanging-punctuation: first;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  
  text-wrap: unset;
  hyphens: unset;
  overflow-wrap: unset;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.125em;
  font-weight: 700;
  
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;  /* only breaks super-long strings */
  hyphens: none;              /* stop auto-hyphenation */
  text-wrap: balance;         /* nicer multi-line headings (modern) */
  margin-top: 1.125em;
}

p {
  color: var(--p-color, --ink);
  margin-block-start: var(--p-margin-block-start, 1em);
  margin-block-end: var(--p-margin-block-end, 1em);
  text-align: var(--p-text-align, left);
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* Links intended to sit on dark/ink backgrounds (e.g., header/footer) */
.link-on-ink {
  color: var(--ink);
  text-decoration: none;
}

.link-on-ink:hover {
  text-decoration: underline;
}


/* ==========================================================================
   4) Buttons
   --------------------------------------------------------------------------
   Modular button styles. Not all pages use these, but they’re shared tokens.
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  border-radius: var(--radius);
  padding: var(--button-pad-y) var(--button-pad-x);
  border: var(--button-border) solid var(--accent);
  font-weight: 700;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease;
  cursor:pointer;
  
  background: var(--accent);
  color: var(--bg);
}

/* Solid == brand-accent background */
.button--solid,
.button--primary {
  background: var(--accent);
  color: var(--bg);
}

.button--solid:hover,
.button--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

/* Ghost == bordered, transparent background */
.button--ghost,
.button--outline {
  background: transparent;
  color: var(--accent);
}

.button--ghost:hover,
.button--outline:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}


/* ==========================================================================
   5) Utilities & Accessibility
   -------------------------------------------------------------------------- */
/* Global container: use site-wide max width for most layout shells */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.error-view .container {
  max-width: 500px;
  margin: 3rem auto;
}

.error-code {
    font-size: 1.5rem;
    font-weight: bold;
    text-align:center;
}

/* Screen-reader-only element (kept focusable semantics elsewhere) */
.hide-visually {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Skip link appears when focused to jump to #main-content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  z-index: var(--z-menu);
}

.skip-link:focus {
  top: 10px;
}


/* ==========================================================================
   6) Header (non-sticky) + Menu Toggle & Popup
   -------------------------------------------------------------------------- */
/* Checkbox hack toggle for the hamburger; visually hidden control */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Header shell */
.harmura-header {
  position: relative;
  z-index: var(--z-header);
  background: #08330f;
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 10px 0 18px;
}

/* Header logo */
.harmura-logo {
  height: 33px;
  width: auto;
  margin-bottom: -20px;            /* visually sits on the header border line */
}

/* Hamburger button (left-aligned) */
.harmura-menu-toggle {
  position: absolute;
  left: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 6px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
}

.harmura-menu-toggle svg {
  width: 26px;
  height: 26px;
}

/* We keep both icons in markup; only the hamburger shows by default */
.icon-hamburger {
  display: inline;
}

.icon-x {
  display: none !important;
}

/* Hide the hamburger button itself while menu is open (X lives in popup) */
.nav-toggle:checked ~ header .harmura-menu-toggle {
  visibility: hidden;
}

/* Backdrop area (click-to-close) */
.harmura-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  z-index: var(--z-backdrop);
  background: transparent;
}

.nav-toggle:checked ~ .harmura-backdrop {
  display: block;
}

/* Popup wrapper follows the viewport */
.harmura-pop-wrap {
  position: fixed;
  inset: 0;
  display: none;
  z-index: var(--z-menu);
  pointer-events: none;
}

.nav-toggle:checked ~ .harmura-pop-wrap {
  display: block;
}

/* Popup panel */
.harmura-pop {
  pointer-events: auto;
  position: absolute;
  left: calc(var(--pad-x) - 4px);
  top: 0;
  transform: translateY(10px);
  background: #071711;
  border: 1px solid #334E4D;
  border-radius: 14px;
  box-shadow: var(--menu-shadow);
  width: min(92vw, 520px);
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  column-gap: 10px;
  text-align: center;
  align-items: start;
}

/* Close button inside popup (X icon) */
.pop-close {
  grid-column: 1;
  align-self: center;
  justify-self: start;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 4px;
  color: var(--ink);
}

.pop-close svg {
  width: 26px;
  height: 26px;
}

/* Popup logo */
.pop-logo {
  grid-column: 2;
  height: 33px;
  width: auto;
  display: block;
  justify-self: center;
}

/* Popup nav */
.harmura-nav {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}

.harmura-nav a {
  display: block;
  color: var(--ink);
  font-weight: 300;
  font-size: 1.75rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 0;
}

.harmura-nav a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}


/* ==========================================================================
   HERO
   Structure:
   1) Base shell
   2) Inner grid + content alignment
   3) Media element (shared)
   4) Variant: FULL hero (background image)
   5) Variant: SPLIT hero (image + text)
      - mobile stack (image first, show full image)
      - desktop/tablet 50/50 (crop to column)
   6) Typography
   7) Utilities: ratio + anchor mapping
   ========================================================================== */


/* === 1) Base shell ======================================================= */
.harmura-hero {
  position: relative;
  color: var(--ink);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* 30% black tint on split variants */
.harmura-hero--split_left,
.harmura-hero--split_right {
  background: rgba(0, 0, 0, 0.30);
}

/* Full hero keeps its top/bottom breathing room via token */
.harmura-hero--full {
  padding: var(--hero-padding-y, 3rem) 0;
}

/* Edge-to-edge helper */
.harmura-hero--full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}


/* === 2) Inner grid + content alignment ================================== */
.harmura-hero__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 68rem;
  padding: 0 var(--pad-x);
  display: grid;
  gap: 32px;
  align-items: center;
}

/* Slightly narrower for text-only heroes */
.harmura-hero--text-only .harmura-hero__inner {
  max-width: min(68rem, 900px);
}

/* Split variants use a wider container and remove inner padding */
.harmura-hero--split_left .harmura-hero__inner,
.harmura-hero--split_right .harmura-hero__inner {
  max-width: 1500px;
  padding: 0;
}

/* Content block defaults */
.harmura-hero__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  align-items: flex-start;
  padding: 3rem; /* you liked this padding on split content */
}

/* Optional alignment modifiers via data-align */
.harmura-hero[data-align="center"] .harmura-hero__content { align-items: center; text-align: center; }
.harmura-hero[data-align="right"]  .harmura-hero__content { align-items: flex-end; text-align: right; }


/* === 3) Media element (shared) =========================================== */
.harmura-hero__media {
  display: none;            /* opt-in by variant */
  overflow: hidden;
  margin: 0;
  background: rgba(0, 0, 0, 0.35);
}

.harmura-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* desktop default (split overrides per breakpoint) */
  object-position: center;
  border: 0;
}


/* === 4) FULL hero (background image layer) =============================== */
.harmura-hero__bg {               /* hidden by default, only full uses it */
  display: none;
  background-color: rgba(1, 22, 12, 0.85);
}

.harmura-hero--full .harmura-hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.harmura-hero--full .harmura-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-color, #00140a);
  opacity: var(--hero-overlay-opacity, 0.45);
}


/* === 5) SPLIT hero ======================================================= */
/* Show media in split variants */
.harmura-hero--split_left  .harmura-hero__media,
.harmura-hero--split_right .harmura-hero__media {
  display: block;
}

/* 5a) MOBILE (stacked): image first, show the whole image (no crop) */
.harmura-hero--split_left  .harmura-hero__inner,
.harmura-hero--split_right .harmura-hero__inner {
  grid-template-columns: 1fr;        /* stack */
}

.harmura-hero--split_left  .harmura-hero__media,
.harmura-hero--split_right .harmura-hero__media {
  position: relative;
  /* let the image decide its own height so the full artwork is visible */
}

.harmura-hero--split_left  .harmura-hero__media img,
.harmura-hero--split_right .harmura-hero__media img {
  position: static;                   /* not absolute on mobile */
  height: auto;                       /* preserve aspect ratio */
  object-fit: contain;                /* show full image */
  object-position: center center;
  background: #000;                   /* subtle letterbox behind */
}

/* Keep image above text when stacked */
.harmura-hero--split_left  .harmura-hero__media,
.harmura-hero--split_right .harmura-hero__media { order: 1; }
.harmura-hero--split_left  .harmura-hero__content,
.harmura-hero--split_right .harmura-hero__content { order: 2; }

/* Vertically center the text block in its row */
.harmura-hero--split_left  .harmura-hero__content,
.harmura-hero--split_right .harmura-hero__content {
  justify-content: center;
}

/* 5b) DESKTOP/TABLET (≥640px): true 50/50 halves, equal height, crop image */
@media (min-width: 640px) {
  .harmura-hero--split_left  .harmura-hero__inner,
  .harmura-hero--split_right .harmura-hero__inner {
    grid-template-columns: 1fr 1fr;      /* exact halves */
    align-items: stretch;                 /* equal column height */
    min-height: clamp(280px, 42vw, 560px);
  }

  .harmura-hero--split_left  .harmura-hero__media,
  .harmura-hero--split_right .harmura-hero__media {
    height: 100%;                         /* fill the column */
  }

  .harmura-hero--split_left  .harmura-hero__media img,
  .harmura-hero--split_right .harmura-hero__media img {
    height: 100%;
    object-fit: cover;                    /* crop inside the column */
    object-position: center;
    position: static;
  }

  /* Interior split divider line for subtle separation */
  .harmura-hero--split_left  .harmura-hero__media { border-right: 1px solid var(--line); }
  .harmura-hero--split_right .harmura-hero__media { border-left: 1px solid var(--line); }

  /* Tighten inner gap (hero columns butt against each other) */
  .harmura-hero__inner { gap: 0; }
}


/* === 6) Typography ======================================================= */
.harmura-hero__kicker {
  margin: 0;
  font-size: var(--small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent);
}

.harmura-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.08;
  font-weight: 700;
}

/* Slightly smaller titles inside split heroes */
.harmura-hero--split_left  .harmura-hero__title,
.harmura-hero--split_right .harmura-hero__title {
  font-size: clamp(1.75rem, 5vw, 2.6rem);
}

.harmura-hero__subtitle {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.25;
  max-width: 60ch;
  text-align:center;
}

/* Center/right text alignment helpers already handled via data-align */


/* === 7) Utilities: ratio + anchor mapping ================================ */
/* (Ratio helpers only affect split media when you explicitly set data-ratio) */
.harmura-hero[data-ratio="4:3"]  .harmura-hero__media { aspect-ratio: 4 / 3; }
.harmura-hero[data-ratio="3:2"]  .harmura-hero__media { aspect-ratio: 3 / 2; }
.harmura-hero[data-ratio="16:9"] .harmura-hero__media { aspect-ratio: 16 / 9; }
.harmura-hero[data-ratio="2:3"]  .harmura-hero__media { aspect-ratio: 2 / 3; }
.harmura-hero[data-ratio="4:5"]  .harmura-hero__media { aspect-ratio: 4 / 5; }

/* Anchor helpers keep bg and <img> in sync */
.harmura-hero[data-anchor="top_left"]     .harmura-hero__media img,
.harmura-hero[data-anchor="top_left"]     .harmura-hero__bg { object-position: top left;     background-position: top left; }

.harmura-hero[data-anchor="top_center"]   .harmura-hero__media img,
.harmura-hero[data-anchor="top_center"]   .harmura-hero__bg { object-position: top center;   background-position: top center; }

.harmura-hero[data-anchor="top_right"]    .harmura-hero__media img,
.harmura-hero[data-anchor="top_right"]    .harmura-hero__bg { object-position: top right;    background-position: top right; }

.harmura-hero[data-anchor="middle_left"]  .harmura-hero__media img,
.harmura-hero[data-anchor="middle_left"]  .harmura-hero__bg { object-position: center left;  background-position: center left; }

.harmura-hero[data-anchor="middle_center"].harmura-hero__media img,
.harmura-hero[data-anchor="middle_center"].harmura-hero__bg { object-position: center center;background-position: center center; }

.harmura-hero[data-anchor="middle_right"] .harmura-hero__media img,
.harmura-hero[data-anchor="middle_right"] .harmura-hero__bg { object-position: center right; background-position: center right; }

.harmura-hero[data-anchor="bottom_left"]  .harmura-hero__media img,
.harmura-hero[data-anchor="bottom_left"]  .harmura-hero__bg { object-position: bottom left;  background-position: bottom left; }

.harmura-hero[data-anchor="bottom_center"].harmura-hero__media img,
.harmura-hero[data-anchor="bottom_center"].harmura-hero__bg { object-position: bottom center;background-position: bottom center; }

.harmura-hero[data-anchor="bottom_right"] .harmura-hero__media img,
.harmura-hero[data-anchor="bottom_right"] .harmura-hero__bg { object-position: bottom right; background-position: bottom right; }





/* ==========================================================================
   8) Footer
   -------------------------------------------------------------------------- */
footer.site-footer {
  margin-top: 56px;
  padding-bottom: 3rem;
}

.footer-rail {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--pad-x);
  margin-bottom: 4rem;
}

.rail-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right:auto;
}

.footer-brand {
  height: 33px;
  width: auto;
  flex: 0 0 auto;
  margin-bottom: -5px;
}

.footer-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 800;
  font-size: 1rem;
  margin-left: auto;
}

.footer-nav a {
  color: var(--ink);
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-social {
  margin-top: 22px;
  text-align: center;
  padding: 0 var(--pad-x);
  color: var(--ink);
}

.social-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  row-gap: 8px;
  font-size: var(--small);
  font-weight: 600;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-list li {
  list-style: none;
}

.social-list li + li::before {
  content: "·";
  opacity: 0.9;
  padding: 0 0.35em;
}

.social-list a {
  color: var(--ink);
}

.social-list a:hover {
  text-decoration: underline;
}

.copyright {
  text-align: center;
  color: #a5bfb7;
  font-size: var(--small);
  padding: 10px var(--pad-x) 28px;
}

.copyright a {
  color: #a5bfb7;
  text-decoration: underline;
}

.copyright a:hover {
  color: #cfe2da;
}


/* ==========================================================================
   9) Preferences & Responsive Tweaks
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .footer-nav {
    gap: 1rem;
    font-size: 1rem;
  }
}



/* =========================================================
   Printing
   ========================================================= */


@media print {
    body { 
        background: #fff; 
        color: #111; 
    }
}