/* ===============================
   Reset / Base
=============================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --font-body:'Aromatica','AcuminVariable',Arial,sans-serif;
  --font-heading:'RevistaBlack','BebasNeuePro',serif;
}
/* Default theme (Revista + Aromatica) */
body[data-font="default"]{
  --font-body:'Aromatica','AcuminVariable',Arial,sans-serif;
  --font-heading:'RevistaBlack','BebasNeuePro',serif;
}
/* Back-compat alias */
body[data-font="revista-aromatica"]{
  --font-body:'Aromatica','AcuminVariable',Arial,sans-serif;
  --font-heading:'RevistaBlack','BebasNeuePro',serif;
}
/* Classic alt (Bebas + Acumin) */
body[data-font="classic"]{
  --font-body:'AcuminVariable',Arial,sans-serif;
  --font-heading:'BebasNeuePro','AcuminVariable',sans-serif;
}

/* Local fonts (fixed paths; css/ → ../media/) */
@font-face {
  font-family: 'AcuminVariable';
  src: url('../media/fonts/AcuminVariableConcept.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BebasNeuePro';
  src: url('../media/fonts/BebasNeuePro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RevistaBlack';
  src: url('../media/fonts/revista-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aromatica';
  src: url('../media/fonts/aromatica-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Base elements / utilities */
body{
  font-family:var(--font-body);color:#f5f5f7;background:#000;
  cursor:url("media/images/cursor_16.png") 16 16,auto;
  scroll-behavior:smooth;font-weight:normal
}
body.modal-open{overflow:hidden}
a,button,[role="button"],[onclick],input,select,textarea,label,label *{
  cursor:url("media/images/cursor_32.png") 16 16, pointer !important
}
.black-bg{background:#000}
.hidden{z-index:-100;opacity:0}

/* Form controls inherit fonts */
input,textarea,select,button,label{font:inherit;color:inherit}
::placeholder{font:inherit;color:#f5f5f7}
.visually-hidden{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ===============================
   Modal (Age Gate)
=============================== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.95);
  display:flex;justify-content:center;align-items:center;
  z-index:2000;transition:opacity .5s ease
}
.modal.hidden{opacity:0;pointer-events:none}
.modal-content{background:#111;padding:2rem;border-radius:8px;text-align:center}
.buttons{margin-top:1rem}
.btn{padding:.5rem 1.5rem;margin:0 .5rem;border:0;border-radius:4px;font-weight:bold}
.btn.yes{background:#c4a000;color:#f5f5f7}
.btn.no{background:#f5f5f7;color:#000}

/* ===============================
   Header (logo • picker • nav)
=============================== */
header{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;padding:1rem 2rem;position:fixed;top:0;left:0;right:0;
  width:100%;background:rgba(0,0,0,.7);z-index:1000
}
header .logo{grid-column:1;justify-self:start}
header .logo img{height:60px}


header nav{grid-column:2;justify-self:end;position:relative;z-index:1100}
nav ul{list-style:none;display:flex;gap:1rem}
nav a{color:#f5f5f7;text-decoration:none;font-size:.9rem;text-transform:uppercase}
header nav a.active{border-bottom:1px solid #f5f5f7}
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:25px;height:18px;cursor:pointer;z-index:1101}
.hamburger span{display:block;height:3px;background:#f5f5f7;border-radius:2px}
@media (max-width:768px){
  .hamburger{display:flex}
  nav ul{
    display:none;flex-direction:column;position:absolute;right:0;top:calc(100% + 8px);
    width:200px;padding:1rem;background:rgba(0,0,0,.95);z-index:1500
  }
  nav ul.show{display:flex}
}

/* ===============================
   Contact (fixed) + Footer
=============================== */
.contact{
  background:#000;color:#f5f5f7;position:fixed;bottom:5rem;width:100%;
  z-index:-10;display:inline
}
.contact form{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:0 auto}
.contact input,.contact textarea{padding:0;border:0;border-bottom:1px solid #f5f5f7;background:transparent;color:#f5f5f7}
.contact button{background:#f5f5f7;color:#000;padding:.5rem;font-weight:bold}
.contact button:hover{background:#c4a000;color:#f5f5f7}

/* Optional hidden clone (keep if your layout depends on it) */
.contact-hidden{background:#000;color:#f5f5f7;position:absolute;z-index:-100;width:100%}
.contact-hidden form{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:0 auto}
.contact-hidden input,.contact-hidden textarea{padding:.75rem;border:0;border-bottom:1px solid #f5f5f7;background:transparent;color:#f5f5f7}
.contact-hidden button{background:#f5f5f7;color:#000;padding:.8rem;font-weight:bold}

/* Footer */
footer{
  background:#000;color:#f5f5f7;padding:1rem;text-align:center;position:fixed;bottom:0;width:100%;z-index:-10
}
footer a{color:#f5f5f7;text-decoration:none;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:1px;transition:color .3s ease}
footer a .instagram-icon{width:24px;height:24px;vertical-align:middle;margin-left:8px;filter:brightness(0) invert(1);transition:transform .3s ease}
footer a:hover{color:#c4a000}
footer a:hover .instagram-icon{transform:scale(1.2)}

/* ===== PAGE-SCOPED LAYOUT ===== */

/* HOME: keep contact/footer fixed & tucked under content */
.home-page .contact {
  position: fixed;
  bottom: 5rem;
  left: 0; right: 0;
  width: 100%;
  background: #000; color: #f5f5f7;
  z-index: -10;
  display: inline;
}
.home-page footer {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  width: 100%;
  background: #000; color: #f5f5f7;
  padding: 1rem;
  text-align: center;
  z-index: -10;
}

/* if you use this block on home, keep it scoped too */
.home-page .contact-hidden {
  position: absolute;
  z-index: -100;
  width: 100%;
  background: #000; color: #f5f5f7;
}

/* ABOUT: keep everything inline so images/text don’t get covered */
.about-page .contact {
  position: static;
  z-index: auto;
  bottom: auto;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.about-page footer {
  position: static;
  z-index: auto;
  bottom: auto;
  margin-top: 1.5rem;
}
.about-page .contact-hidden { display: none; }

/* Optional but recommended: spacing container for About content */
.about-page main.about {
  padding: 120px 1.25rem 4rem;     /* clears fixed header; adjust top if needed */
  max-width: 1000px;
  margin: 0 auto;
}

/* === Custom cursors (GLOBAL) === */
/* Note: paths are relative to this CSS file (css/...), so use ../media/... */
:root{
  --cursor-default: url("../media/images/cursor_16.png") 16 16, auto;
  --cursor-pointer: url("../media/images/cursor_32.png") 16 16, pointer;
}

/* Use the small cursor everywhere by default */
html, body, .black-bg, section, header, footer,
.hero, .grid-container, .tile, .tile * {
  cursor: var(--cursor-default);
}

/* Use the big pointer on interactive elements */
a, button, [role="button"], [onclick],
.hamburger, nav a, .cta,
input[type="submit"], input[type="button"], label {
  cursor: var(--cursor-pointer) !important;
}

/* Keep I-beam for typing */
input[type="text"], input[type="email"], textarea {
  cursor: text !important;
}
/* === Cursor consistency for Contact form + Font Picker === */

/* Use the large custom pointer on the font selector */
select,
.font-picker,
.header-font-picker select {
  cursor: var(--cursor-pointer) !important;
}

/* Keep I-beam when hovering text inputs/textarea so typing feels natural */
input[type="text"],
input[type="email"],
textarea {
  cursor: text !important;
}

/* Optional: use custom pointer even on inputs/textarea */
input[type="text"],
input[type="email"],
textarea {
  cursor: var(--cursor-pointer) !important;
}

/* But buttons/labels inside the form should still use the big pointer */
.contact button,
.contact label,
.contact [type="submit"],
.contact [type="button"] {
  cursor: var(--cursor-pointer) !important;
}

/* Checkbox should use the big custom pointer */
.contact input[type="checkbox"],
.contact-hidden input[type="checkbox"] {
  cursor: var(--cursor-pointer) !important;
}

/* Body copy & most UI */
html, body,
nav a, .cta, button, input, select, textarea, label,
footer, .product-text p, .modal, .btn {
  font-family: var(--font-body) !important;
}

/* Headings / display text */
h1, h2, h3,
.hero-content,
.intro h2,
.product-text h2,
.tile .overlay-text,
.contact h2,
footer strong,
.modal h2 {
  font-family: var(--font-heading) !important;
}
/* Inline success message under the form button */
.form-success {
  margin-top: .5rem;
  color: #c4a000;           /* brand gold */
  font-style: italic;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.form-success.show {
  opacity: 1;
  transform: translateY(0);
}
/* ===== Footer social block: stacked, centered, aligned ===== */
footer p:first-of-type {
  margin: 0.25rem 0 0.5rem;
  text-align: center;
}

/* Line 1: "FOLLOW US ON INSTAGRAM" (smaller) */
footer p:first-of-type strong{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;                           /* space between the two lines */
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.6vw, 1rem);
  letter-spacing: .10em;
  line-height: .75;
}

/* Line 2: "#STATUSSTATEOFMIND  [icon]" (bigger) */
footer p:first-of-type strong a{
  display: inline-flex;
  align-items: center;                  /* keeps icon on same baseline */
  gap: 0rem;                           /* space between hashtag and icon */
  color: inherit;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.25rem);
  letter-spacing: .08em;
}

/* Icon sizing + alignment */
footer .instagram-icon{
  width: clamp(20px, 2.2vw, 24px);
  height: auto;
  margin: 0;
  vertical-align: middle;
  transform: translateY(1px);           /* tiny nudge to align perfectly */
  filter: brightness(0) invert(1);      /* ensure white on black */
}

/* Hover accent */
footer p:first-of-type strong a:hover { color: #c4a000; }
footer p:first-of-type strong a:hover .instagram-icon{
  transform: translateY(1px) scale(1.05);
}