/* andriole.com — matches the 2022–2026 Thrive design: navy field, gold wave, white Noto Sans text. */
:root {
  --navy: #06083d;
  --navy-header: #0a0c42;
  --text: #ffffff;
  --muted: #c9cbe0;
  --accent: #39a3d1;
  --footer: #000000;
  --max: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--navy) url("/assets/andriole-bg.svg") center / cover no-repeat fixed;
  font: 400 17px/1.7 "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; color: var(--navy); padding: 6px 10px; z-index: 10; }

a { color: var(--accent); }
a:hover, a:focus-visible { color: #fff; }

/* Header */
.site-header { background: var(--navy-header); }
.header-row { display: flex; align-items: center; gap: 54px; min-height: 150px; position: relative; }
.logo {
  font-family: "Mulish", sans-serif; font-weight: 300; font-size: 28px; letter-spacing: -0.3px;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.logo .cap { font-size: 36px; }

.menu-toggle, .menu-button { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 23px; }
.menu a { color: var(--muted); text-decoration: none; font-size: 17px; }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"] { font-weight: 500; }
.has-sub { position: relative; }
.has-sub > a::after { content: " \25BE"; font-size: 12px; }
.has-sub ul {
  display: none !important; position: absolute; top: 100%; left: -12px; padding: 10px 12px !important;
  background: var(--navy-header); min-width: 160px; flex-direction: column; gap: 8px !important; z-index: 5;
}
.has-sub:hover ul, .has-sub:focus-within ul { display: flex !important; }

/* Content */
.content { padding: 36px 0 24px; min-height: 60vh; }
.content p, .content li { margin: 0 0 1em; }
.content h1 { font-size: 30px; font-weight: 500; margin: 0 0 24px; }
.content h2 { font-size: 21px; font-weight: 500; margin: 1.6em 0 0.7em; }
.content h4 { font-size: 18px; font-weight: 500; }
.content ul { padding-left: 1.2em; }
.content a { word-break: break-word; }
.content strong { font-weight: 500; }

/* Contact form */
.contact-form { display: grid; gap: 14px; margin: 28px 0; max-width: 620px; }
.contact-form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--navy); background: #fff; border: 0; border-radius: 3px; padding: 10px 12px;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form button {
  justify-self: start; font: 500 15px/1 "Noto Sans", sans-serif; color: #fff; background: var(--accent);
  border: 0; border-radius: 3px; padding: 12px 22px; cursor: pointer;
}
.form-pending {
  margin: 28px 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; color: var(--muted);
}

/* Back to top + footer */
.to-top { text-align: center; padding: 24px 0 48px; }
.to-top a {
  display: inline-block; padding: 14px 18px; background: rgba(255,255,255,.08); color: #fff;
  text-decoration: none; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
}
.site-footer { background: var(--footer); text-align: center; padding: 14px 16px; }
.site-footer p { margin: 0; font-size: 13px; letter-spacing: 1px; }
.site-footer a { color: var(--muted); }

/* Mobile */
@media (max-width: 860px) {
  .header-row { min-height: 84px; justify-content: space-between; gap: 16px; }
  .menu-button { display: grid; gap: 5px; padding: 10px; cursor: pointer; }
  .menu-button span { display: block; width: 24px; height: 2px; background: #fff; }
  .menu { display: none; position: absolute; left: -16px; right: -16px; top: 84px; background: var(--navy-header); padding: 12px 16px 20px; z-index: 5; }
  .menu-toggle:checked ~ .menu { display: block; }
  .menu ul { flex-direction: column; gap: 12px; }
  .logo { font-size: 24px; } .logo .cap { font-size: 30px; }
  .has-sub ul { display: flex !important; position: static; padding: 8px 0 0 14px !important; background: none; }
  .has-sub > a::after { content: ""; }
  .contact-form .row { grid-template-columns: 1fr; }
  body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }