/**
 * House Hippo Adventures — portable visual theme
 * Prefix: .hha-*  |  Tokens: --hha-*
 *
 * Load Fraunces + DM Sans (see README), then link this file.
 * Does not modify the House Hippo Adventures app when kept under docs/.
 */

/* ---- Design tokens ---- */
:root {
  --hha-cream-bright: #fdf9f3;
  --hha-cream: #f5ebe0;
  --hha-cream-deep: #e9dcc8;
  --hha-kraft: #dfd0bb;
  --hha-tan: #c9a882;
  --hha-tan-deep: #a67c52;
  --hha-honey: #c9933a;
  --hha-gold: #b8862b;
  --hha-gold-light: #d4a84b;
  --hha-cocoa: #4a3628;
  --hha-cocoa-mid: #5c4333;
  --hha-leather: #6b4e3a;
  --hha-ink: #2a221a;
  --hha-ink-soft: #4d4034;
  --hha-grey-soft: #c4bab0;
  --hha-grey-mist: #8a7f72;
  --hha-blush: #dfc7b8;
  --hha-rose: #b07d6a;
  --hha-map-teal: #4a6b62;
  --hha-sage: #8fa394;
  --hha-sage-muted: #c8d4c9;
  --hha-white: #fffefb;
  --hha-paper: #fefbf6;
  --hha-cardboard: #ebe1d4;
  --hha-stamp-red: rgba(160, 72, 58, 0.72);
  --hha-stamp-border: rgba(160, 72, 58, 0.45);
  --hha-shadow-sm: 0 2px 10px rgba(42, 34, 26, 0.06);
  --hha-shadow-md: 0 14px 36px rgba(42, 34, 26, 0.1);
  --hha-shadow-lg: 0 22px 50px rgba(42, 34, 26, 0.12);
  --hha-shadow-inset-paper: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --hha-radius-sm: 8px;
  --hha-radius-md: 14px;
  --hha-radius-lg: 22px;
  --hha-radius-pill: 999px;
  --hha-stitch: rgba(74, 54, 40, 0.28);
  --hha-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hha-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --hha-maxw: 1100px;
  --hha-paper-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.065'/%3E%3C/svg%3E");
}

/* ---- Page background (body-style) ---- */
.hha-page-bg {
  min-height: 100%;
  font-family: var(--hha-font-body);
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--hha-ink-soft);
  background-color: var(--hha-cream);
  background-image:
    radial-gradient(ellipse 140% 90% at 50% 0%, rgba(253, 249, 243, 0.55), transparent 55%),
    var(--hha-paper-noise),
    linear-gradient(175deg, var(--hha-cream-deep) 0%, var(--hha-cream) 42%, var(--hha-paper) 100%);
  background-size:
    auto,
    280px 280px,
    auto;
  background-attachment: fixed, fixed, fixed;
  -webkit-font-smoothing: antialiased;
}

.hha-page-bg h1,
.hha-page-bg h2,
.hha-page-bg h3 {
  font-family: var(--hha-font-display);
  color: var(--hha-ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hha-page-bg a {
  color: var(--hha-map-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hha-page-bg a:hover {
  color: var(--hha-cocoa-mid);
}

/* ---- Map / hero wash background ---- */
.hha-map-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 125% 85% at 82% 8%, rgba(201, 147, 58, 0.13), transparent 54%),
    radial-gradient(ellipse 58% 48% at 8% 88%, rgba(201, 168, 130, 0.32), transparent 58%),
    radial-gradient(ellipse 48% 38% at 70% 72%, rgba(90, 107, 98, 0.065), transparent 55%),
    linear-gradient(170deg, #e2d5c7 0%, var(--hha-cream) 45%, var(--hha-cream-bright) 100%);
}

.hha-map-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hha-paper-noise);
  opacity: 0.52;
  pointer-events: none;
}

/* ---- Horizontal dashed “route” rule ---- */
.hha-route-line {
  display: block;
  width: 100%;
  max-width: min(520px, 92%);
  height: 5px;
  margin: 0 auto 1.25rem;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--hha-tan-deep) 42%, transparent),
    color-mix(in srgb, var(--hha-tan-deep) 42%, transparent) 5px,
    transparent 5px,
    transparent 11px
  );
  opacity: 0.45;
}

/* ---- Curved map route decor (pair with SVG paths; see README) ---- */
.hha-route-decor {
  position: absolute;
  color: var(--hha-tan-deep);
  left: 0;
  right: 0;
  bottom: 0;
  height: min(40%, 220px);
  pointer-events: none;
  z-index: 0;
}

.hha-route-decor--page {
  height: min(55%, 280px);
  opacity: 0.9;
  top: auto;
}

.hha-route-decor__track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hha-route-decor__track--bg {
  bottom: 10%;
  height: 92%;
  opacity: 0.92;
}

.hha-route-decor__track--fg {
  bottom: 0;
}

.hha-route-decor__crumb {
  position: absolute;
  width: 5px;
  height: 3px;
  border-radius: 40%;
  background: color-mix(in srgb, var(--hha-tan-deep) 45%, var(--hha-cream));
  opacity: 0.85;
  transform: rotate(-18deg);
}

.hha-route-decor__crumb--1 {
  left: 12%;
  bottom: 28%;
}

.hha-route-decor__crumb--2 {
  left: 22%;
  bottom: 20%;
  width: 4px;
  opacity: 0.65;
}

.hha-route-decor__crumb--3 {
  left: 30%;
  bottom: 32%;
  transform: rotate(8deg);
}

.hha-route-decor__crumb--4 {
  left: 62%;
  bottom: 24%;
  width: 4px;
  height: 3px;
  opacity: 0.55;
  transform: rotate(22deg);
}

.hha-route-decor__pin {
  position: absolute;
  color: var(--hha-honey);
  filter: drop-shadow(0 2px 4px rgba(42, 34, 26, 0.22));
  z-index: 1;
}

.hha-route-decor--hero .hha-route-decor__pin {
  filter: drop-shadow(0 3px 6px rgba(42, 34, 26, 0.26));
}

.hha-route-decor--hero .hha-route-decor__pin--a {
  top: 22%;
  left: 6%;
}

.hha-route-decor--hero .hha-route-decor__pin--b {
  bottom: 18%;
  right: 10%;
  color: color-mix(in srgb, var(--hha-cocoa-mid) 48%, var(--hha-honey));
  transform: scale(1.02);
}

.hha-route-decor--hero .hha-route-decor__pin--c {
  top: 38%;
  right: 26%;
  transform: scale(1);
}

.hha-route-decor--page .hha-route-decor__pin--a {
  top: 8%;
  right: 12%;
}

.hha-route-decor--page .hha-route-decor__pin--b {
  bottom: 12%;
  left: 4%;
  transform: scale(0.94);
}

.hha-route-decor--page .hha-route-decor__pin--page-extra {
  top: 42%;
  left: 8%;
  transform: scale(0.88);
  color: color-mix(in srgb, var(--hha-tan-deep) 35%, var(--hha-honey));
}

.hha-route-decor__pin-svg {
  display: block;
}

@media (max-width: 900px) {
  .hha-route-decor--hero {
    height: min(28%, 130px);
  }

  .hha-route-decor--page {
    height: min(36%, 160px);
  }
}

/* Standalone pin (inline icon wrapper) */
.hha-pin {
  display: inline-flex;
  color: var(--hha-honey);
  filter: drop-shadow(0 2px 4px rgba(42, 34, 26, 0.14));
}

.hha-pin svg {
  display: block;
}

/* ---- Cards ---- */
.hha-card {
  position: relative;
  background: linear-gradient(165deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  border-radius: var(--hha-radius-md);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
  border: 1px solid rgba(74, 54, 40, 0.11);
  overflow: hidden;
}

.hha-card--pad {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  outline: 1px dashed var(--hha-stitch);
  outline-offset: 2px;
}

.hha-card--travel {
  overflow: visible;
  background: linear-gradient(
    165deg,
    var(--hha-cream-bright) 0%,
    var(--hha-paper) 42%,
    color-mix(in srgb, var(--hha-cream-deep) 55%, var(--hha-paper)) 100%
  );
  border: 1px solid rgba(74, 54, 40, 0.13);
  box-shadow:
    var(--hha-shadow-md),
    var(--hha-shadow-inset-paper),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 32%, transparent);
  outline-offset: 2px;
}

.hha-card--travel > * {
  position: relative;
  z-index: 1;
}

.hha-card--stitched.hha-card--pad {
  position: relative;
}

.hha-card--stitched.hha-card--pad::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: calc(var(--hha-radius-md) - 7px);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 17%, transparent);
  pointer-events: none;
  z-index: 0;
}

.hha-card--stitched.hha-card--pad > * {
  position: relative;
  z-index: 1;
}

/* ---- Scrapbook photo card ---- */
.hha-photo-card {
  position: relative;
  width: 100%;
  --hha-photo-tilt: -2deg;
}

.hha-photo-card__mat {
  position: relative;
  padding: 0.55rem;
  border-radius: var(--hha-radius-md);
  background: linear-gradient(165deg, var(--hha-cream-bright) 0%, var(--hha-paper) 100%);
  box-shadow:
    var(--hha-shadow-md),
    inset 0 0 0 1px rgba(74, 54, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px rgba(184, 134, 43, 0.14);
  outline: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 42%, transparent);
  outline-offset: 2px;
  transform: rotate(var(--hha-photo-tilt));
  transform-origin: center center;
  overflow: visible;
}

.hha-photo-card__mat::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--hha-radius-md) - 8px);
  border: 1px dashed color-mix(in srgb, var(--hha-tan-deep) 28%, transparent);
  pointer-events: none;
  z-index: 1;
}

.hha-photo-card__frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hha-radius-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 54, 40, 0.06);
}

.hha-photo-card__caption {
  display: block;
  margin-top: 0.45rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hha-cocoa-mid);
  background: linear-gradient(180deg, var(--hha-kraft), var(--hha-cream-deep));
  border-top: 1px dashed var(--hha-stitch);
}

/* ---- Passport / stamp / tag chips ---- */
.hha-passport-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(140, 55, 48, 0.55);
  border: 2px solid rgba(160, 72, 58, 0.26);
  border-radius: 2px;
  background: rgba(255, 252, 248, 0.72);
  margin-bottom: 0.85rem;
}

.hha-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hha-stamp-red);
  border: 2px solid var(--hha-stamp-border);
  border-radius: 3px;
  transform: rotate(-7deg);
  background: rgba(255, 250, 245, 0.55);
}

.hha-stamp--round {
  display: inline-flex;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-direction: column;
  gap: 0;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  padding: 0.35rem;
  transform: rotate(-14deg);
  box-shadow: 0 2px 6px rgba(42, 34, 26, 0.08);
}

.hha-tag {
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(74, 54, 40, 0.72);
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(236, 223, 206, 0.88));
  border: 1px dashed rgba(74, 54, 40, 0.28);
  border-radius: 2px;
  padding: 0.18rem 0.45rem;
}

/* ---- Buttons ---- */
.hha-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.82rem 1.5rem;
  border-radius: var(--hha-radius-sm);
  font-family: var(--hha-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--hha-shadow-sm);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 0.22s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

.hha-button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.hha-button:active:not(:disabled) {
  transform: translateY(0);
}

.hha-button:disabled {
  cursor: not-allowed;
  transform: none;
  opacity: 0.45;
}

.hha-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hha-gold-light) 72%, transparent);
  outline-offset: 3px;
}

.hha-button--primary {
  background: linear-gradient(
    165deg,
    var(--hha-gold-light) 0%,
    var(--hha-honey) 45%,
    var(--hha-gold) 100%
  );
  color: #fffdf8;
  text-shadow: 0 1px 0 rgba(42, 34, 26, 0.18);
  border-color: color-mix(in srgb, var(--hha-gold) 55%, var(--hha-cocoa));
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
}

.hha-button--primary:hover:not(:disabled) {
  box-shadow:
    0 18px 36px rgba(201, 147, 58, 0.28),
    0 6px 14px rgba(42, 34, 26, 0.12),
    var(--hha-shadow-inset-paper);
  filter: brightness(1.045);
  color: #fff;
}

.hha-button--secondary {
  background: linear-gradient(180deg, var(--hha-paper) 0%, var(--hha-cream-bright) 100%);
  color: var(--hha-ink);
  border: 2px dashed color-mix(in srgb, var(--hha-tan-deep) 38%, transparent);
  box-shadow: var(--hha-shadow-sm), var(--hha-shadow-inset-paper);
}

.hha-button--secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--hha-honey) 45%, var(--hha-tan-deep));
  background: var(--hha-white);
  box-shadow:
    0 14px 30px rgba(42, 34, 26, 0.09),
    var(--hha-shadow-inset-paper);
}

.hha-button--secondary:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
}

.hha-button--ghost {
  background: rgba(254, 251, 246, 0.35);
  color: var(--hha-cocoa-mid);
  border: 1px solid rgba(74, 54, 40, 0.18);
  box-shadow: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.hha-button--ghost:hover:not(:disabled) {
  background: var(--hha-cream-bright);
  color: var(--hha-ink);
  border-color: rgba(74, 54, 40, 0.28);
  box-shadow: 0 12px 28px rgba(42, 34, 26, 0.07);
}

/* ---- Nav link inspiration (plain & <a>) ---- */
.hha-nav-insp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--hha-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--hha-ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.15rem 0.45rem;
}

.hha-nav-insp::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hha-gold-light) 25%, var(--hha-honey));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.hha-nav-insp:hover {
  color: var(--hha-cocoa-mid);
}

.hha-nav-insp:hover::before {
  transform: scaleX(1);
}

.hha-nav-insp.is-active {
  color: var(--hha-cocoa);
  font-weight: 600;
}

.hha-nav-insp.is-active::before {
  transform: scaleX(1);
}


.hha-nav-insp__spark {
  position: relative;
  width: 14px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-5px) scale(0.82);
  transition:
    opacity 0.22s ease,
    transform 0.24s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.hha-nav-insp__spark::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--hha-gold-light), var(--hha-honey));
  box-shadow:
    7px 3px 0 -0.5px color-mix(in srgb, var(--hha-honey) 55%, var(--hha-cream)),
    3px -2px 0 -1px color-mix(in srgb, var(--hha-tan-deep) 40%, var(--hha-cream));
}

.hha-nav-insp__spark::after {
  content: '🐾';
  position: absolute;
  left: 2px;
  top: -2px;
  font-size: 0.62rem;
  line-height: 1;
  opacity: 0;
  transform: rotate(-12deg) scale(0.85);
  transition:
    opacity 0.2s ease,
    transform 0.22s ease;
}

.hha-nav-insp:hover .hha-nav-insp__spark {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.hha-nav-insp:hover .hha-nav-insp__spark::after {
  opacity: 0.88;
  transform: rotate(-8deg) scale(1);
}

.hha-nav-insp.is-active .hha-nav-insp__spark {
  opacity: 0.35;
  transform: translateX(0) scale(0.92);
}

.hha-nav-insp.is-active .hha-nav-insp__spark::after {
  opacity: 0.5;
}

/* ---- Layout helper ---- */
.hha-contained {
  max-width: var(--hha-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}