/* =========================================
 * 1. Design tokens & global reset
 * ======================================= */

:root {
  /* Brand (new HADRIZ palette) */
  --color-primary: #0f365a;       /* deep navy */
  --color-primary-dark: #071d33;  /* ink */
  --color-accent: #18a4a4;        /* teal accent */
  --color-accent-dark: #0e7777;   /* teal hover */

  /* Backgrounds */
  --color-page-bg: #f5f7fa;       /* page background */
  --color-section-alt: #e9f2fb;   /* soft blue alternate section */
  --color-surface: #ffffff;       /* cards / white sections */
  --color-border-subtle: #d5dfec; /* hairline borders */

  /* Text */
  --color-text-main: #1a2533;     /* main body text */
  --color-text-muted: #5a6b82;    /* supporting text */
  --color-text-inverted: #ffffff; /* on dark backgrounds */

  /* Legacy tokens mapped to new palette (so existing classes still work) */
  --navy: var(--color-primary);
  --ocean: var(--color-accent);
  --aqua: #2BB3C8;
  --sky: var(--color-section-alt);
  --ink: var(--color-text-main);
  --muted: var(--color-text-muted);
  --border: var(--color-border-subtle);
  --panel: var(--color-surface);

  --radius: 16px;
  --shadow: 0 18px 40px rgba(15, 54, 90, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*
* {
  outline: 1px solid red !important;
}
*/


/* =========================================
 * 2. Base typography & initial body styles
 * ======================================= */

body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin: 0;
  color: var(--color-text-main);
  background: var(--color-page-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 5px 0 5px 5px;      /* no top margin, 10px bottom */
}

p {
  margin: 0 0 10px 10px;  /* no top margin, 12px bottom */
}

a {
  color: var(--color-accent);
}


/* =========================================
 * 3. Layout: container & grid
 * ======================================= */

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 0;
}

.grid {
  display: grid;
  gap: 10px;
}

.cols-2 {
  grid-template-columns: repeat(1,1fr);
}

.cols-3 {
  grid-template-columns: repeat(1,1fr);
}

.cols-4 {
  grid-template-columns: repeat(2,1fr);
}

@media (max-width: 900px) {
  .cols-3,
  .cols-2,
  .cols-4 {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }
}


/* =========================================
 * 4. Header, brand & primary navigation
 * ======================================= */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  color: var(--color-text-inverted);
  backdrop-filter: saturate(160%) blur(10px);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(7, 29, 51, 0.45);
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.35) 5%,
    rgba(255,255,255,0.1) 30%,
    rgba(255,255,255,0.05) 75%
  );
  pointer-events: none;
  z-index: -1;
}

header .container.nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  /* Make the header content span the full viewport width,
     so the logo can sit in the left “gutter” area */
  max-width: 100%;
  padding: 0 24px;
}

header .brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Center nav within the remaining header space on desktop */
header .container.nav > div:not(.brand) {
  flex: 1;
  display: flex;
  justify-content: center;
}


.hadriz-logo-img,
.footer-logo {
  width: auto;
  display: block;
  filter: brightness(1.06) contrast(1.05) drop-shadow(0 1px 4px rgba(0,0,0,.18));
}

.hadriz-logo-img {
  height: 115px;
  max-width: 95vw;
}

.footer-logo {
  height: 70px;
  margin: 6px auto 8px;
}

@media (max-width: 980px) {
  .hadriz-logo-img {
    height: 85px;
  }
}

@media (max-width: 720px) {
  .hadriz-logo-img {
    height: 60px;
  }

  .footer-logo {
    height: 50px;
  }
}

nav {
  display: flex;
  gap: 100px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

nav a {
  color: black;
  text-decoration: none;
  padding: 5px 0px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 18px;
}

nav a:hover {
  color: var(--color-accent);
}


/* =========================================
 * 5. Hero section
 * ======================================= */


.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 18vh;
  position: relative;
  color: var(--color-text-inverted);
  background-image:
    url("assets/hero-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Dark overlay to improve text contrast */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.25) 100%);
  z-index: 0;
  pointer-events: none;
}

.hero .container {
  position: relative; /* ensure text sits above overlay */
  z-index: 1;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Reduce hero height on mobile */
@media (max-width: 900px) {
  .hero {
    min-height: 12vh;
  }

  .hero .container {
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 10vh;
  }

  .hero .container {
    padding: 16px 12px;
  }
}



/* Hero (“Delivering Clarity”)
.hero {
  /* gradient overlay + existing background image for subtle depth
  background-image:
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)),
    url("assets/background_delivering_clarity.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverted);
} */

.hero h1 {
  font-weight: 700;
  /* stronger, crisper shadow and larger, responsive size */
  text-shadow: 0 6px 12px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.45);
  font-size: clamp(34px,6vw,72px);
  line-height: 1.02;
  text-align: center;
  color: var(--color-text-inverted);
  letter-spacing: 2px;
  margin: 0;
  padding: 6px 12px;
  -webkit-font-smoothing: antialiased;
}

.hero p {
  max-width: 680px;
  margin: 0 auto 12px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: rgba(255,255,255,0.86);
}

/* Underline using new palette (merged) */
.hero .u,
.h-underline {
  width: 200px;
  height: 3px;
  margin: 0 0 5px 0;
  background: linear-gradient(
    90deg,
    rgba(43,179,200,0),
    #2BB3C8 15%,
    #176B99 50%,
    #0B3A5A 85%,
    rgba(11,58,90,0)
  );
}


.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );
  pointer-events: none;
}


/* =========================================
 * 6. Generic section wrapper & headings
 * ======================================= */

section:not(.hero) {
  padding: 50px 0px 50px; /* desktop / large screens */
  scroll-margin-top: 140px;
  /*min-height: 50vh;*/
}

/* Responsive: reduce section vertical spacing on smaller screens */
@media (max-width: 900px) {
  section:not(.hero) {
    padding: 50px 0px 50px 10px;
  }
}



h2 {
  font-size: 28px;
  margin-bottom: 5px;
  color: var(--navy);
  text-align: left;
}


/* =========================================
 * 7. Cards & common content blocks
 * ======================================= */

.card {
  padding: 0px 18px 0px 15px;
  align-self: flex-start;
  height: auto;
  position: relative;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow);
  background:
    radial-gradient(1200px 420px at 0% -20%, rgba(255,255,255,0.9), transparent 70%),
    linear-gradient(180deg, var(--color-page-bg) 0%, var(--color-section-alt) 100%);
}


/* =========================================
 * 8. About, Problems, Capabilities, Approach, Contact
 * ======================================= */

.about {
  position: relative;
  margin-top: 0px;
  padding: 0px;
  overflow: hidden;
  background: var(--color-surface);
}

.about .about-motif {
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 240"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%232BB3C8" stop-opacity=".12"/><stop offset="1" stop-color="%23176B99" stop-opacity=".12"/></linearGradient></defs><path d="M60 150 C120 110, 200 110, 260 150 L300 180 L340 150 C400 110, 480 110, 540 150" fill="none" stroke="url(%23g)" stroke-width="20" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat;
  background-size: 760px auto;
  background-position: right -140px center;
  opacity: .85;
  pointer-events: none;
  transform: translateY(0);
  will-change: transform;
}

.problems {
  background: var(--color-section-alt);
}

.capabilities {
  background: var(--color-surface);
}

.approach {
  background: var(--color-section-alt);
}

.contact {
  background:
    radial-gradient(900px 320px at 8% -10%, #f2fbff 0%, rgba(242,251,255,0) 65%),
    linear-gradient(180deg, var(--color-section-alt) 0%, var(--color-page-bg) 100%);
}


/* =========================================
 * 9. Footer
 * ======================================= */

.footer-arc {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.footer-arc svg {
  display: block;
  width: 100%;
  height: 15px;
}

/* footer — Full styling consolidated in section 15 HADRIZ palette overrides */


/* =========================================
 * 10. Cookie consent banner
 * ======================================= */

/* .consent — base positioning and utilities; full styling consolidated in section 15 HADRIZ palette overrides */

.consent .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.consent button {
  border-radius: 999px;
  padding: 6px 14px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}

@media (max-width: 720px) {
  .consent .row {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================
 * 11. Scroll reveal utility
 * ======================================= */

.section-pop {
  opacity: 0;
  transform: scale(0.90);
  transition: opacity 4s ease, transform 4s ease;
  position: relative;
  background:
    radial-gradient(1200px 420px at 0% -20%, rgba(255,255,255,0.9), transparent 70%),
    linear-gradient(180deg, var(--color-page-bg) 0%, var(--color-section-alt) 100%);
}

.section-pop.reveal {
  opacity: 1;
  transform: scale(1);
}


/* =========================================
 * 12. Shared image + text layout (About + Problems)
 * ======================================= */

.with-image {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;        /* keeps top edges aligned on desktop */
}

/* Desktop proportions: image narrower, text wider */
@media (min-width: 900px) {
  .with-image .section-text {
    flex: 2;
  }

  /* Nudge Problems image down to visually align with the grid */
  #problems .section-image {
    margin: 150px 0px 0px 0px;   /* adjust 40–80px if you want finer control */
  }
}

.section-image {
  margin: 0px;
}

/* Default image sizing (desktop) – applies to BOTH About & Problems */
.section-image img {
  max-width: 360px;               /* desktop size for About (and base for Problems) */
  width: 100%;
  height: auto;
  border-radius: 40px;            /* optional: makes image corners softer */
}

/* Desktop override: ONLY Problems image slightly larger (currently commented out)
#problems .section-image img {
  max-width: 360px;               Option A: slightly larger on desktop
}
*/

/* Mobile / tablet: stack vertically, TEXT first, IMAGE last, smaller images */
@media (max-width: 900px) {
  .with-image {
    flex-direction: column;       /* stack vertically */
  }

  .with-image .section-text {
    order: 1;                     /* text/grid first */
  }

  .with-image .section-image {
    display: none;                /* image always at the bottom */
  }

  /* Base mobile size – About & Problems */
  .section-image img {
    max-width: 220px;             /* smaller on mobile */
    width: 100%;
    height: auto;
    margin: 0 auto;               /* centered nicely */
    display: block;
  }

  /* Mobile override: ONLY Problems image a bit larger */
  #problems .section-image img {
    max-width: 260px;             /* slightly larger on mobile */
  }
}


.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1500px) minmax(0, 1fr);
}

/* By default, everything in <main> sits in the middle column */
.page-shell > * {
  grid-column: 2;
}

/* But hero should stay full width */
.page-shell > .full-bleed {
  grid-column: 1 / -1;
}


/* =========================================
 * 14. Nav: desktop & mobile dropdown
 * ======================================= */

/* hide the button on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

/* the 3 bars icon */
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 3px;
  margin: 3px 0;
  background: black;
  border-radius: 2px;
}

/* desktop: normal horizontal nav, always visible */
header nav.primary-nav {
  display: flex;
}

/* --- Mobile dropdown --- */
@media (max-width: 900px) {
  /* allow dropdown to extend below the sticky header */
  header {
    overflow: visible;
  }

  /* logo + hamburger button on one row */
  header .container.nav {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;   /* for absolute dropdown positioning */
  }

  /* keep logo centered while toggle sits on the right */
  header .container.nav .brand {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
  }

  header .container.nav .nav-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* show hamburger button on mobile */
  .nav-toggle {
    display: block;
  }

  /* dropdown menu (hidden by default) */
  header nav.primary-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;                  /* just under the header bar */
    left: 16px;
    right: 16px;
    padding: 12px 16px 16px;
    gap: 12px;
    background: linear-gradient(160deg, rgb(170 183 195 / 94%), rgb(93 102 111 / 90%));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  }

  /* when .nav has .nav-open, show the dropdown */
  header .container.nav.nav-open nav.primary-nav {
    display: flex;
  }  
}


/* =========================================
 * 15. HADRIZ palette overrides
 *     (body, header, hero, sections, cards,
 *      buttons, footer, consent, contact)
 * ======================================= */

/* Muted text */
.muted {
  color: var(--color-text-muted);
}

/* Primary CTA buttons (contact form etc.) */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: var(--color-accent);
  color: var(--color-text-inverted);
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: var(--color-accent-dark);
}

/* Footer */
footer {
  background: var(--color-primary-dark);
  color: var(--color-text-inverted);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 -6px 18px rgba(7, 29, 51, 0.55);
}

footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 12px 16px;
}

footer .footer-meta {
  max-width: 820px;
}

footer .footer-title {
  margin: 4px 0;
  font-weight: 500;
}

footer .footer-text {
  margin: 2px 0;
  font-size: 0.9rem;
}

footer .muted {
  color: rgba(255, 255, 255, 0.78);
}

footer .footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

footer .footer-link {
  color: var(--color-text-inverted);
  text-decoration: underline;
  font-size: 0.9rem;
  font-weight: 600;
}

@media (max-width: 720px) {
  footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  footer .footer-links {
    justify-content: flex-start;
  }
}

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

footer a:hover {
  color: var(--color-accent-dark);
}


footer a.footer-link {
  color: var(--color-text-inverted);
  text-decoration: underline;
}

/* Cookie / consent banner aligned to palette */
.consent {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -4px 18px rgba(7, 29, 51, 0.12);
}

.consent button#decline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
}

.consent button.accept {
  background: var(--color-accent);
  color: var(--color-text-inverted);
}