/* ====== FONT SETUP ====== */
@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Hardanger';
  src: url('../fonts/Hardanger-Regularbroderie.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Wingman';
  src: url('../fonts/TAYWingman.woff') format('woff'),
       url('../fonts/TAYWingman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rosemary';
  src: url('../fonts/TAYRosemary.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ====== GLOBAL BASE STYLES ====== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Wingman', sans-serif;
  color: #000;
  overflow-x: hidden;
  position: relative;
}

body.about-page .about-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(48px + 48px) 5% 80px; /* header height (48px) + extra 48px top space */
}

.people a {
  color: #000;               /* keep text black */
  text-decoration: underline;
}

.people a:hover {
  color: #ea816c;            /* your link accent color */
}


/* ====== HEADER ====== */
.site-header {
  background-color: #d77c82;
  width: 100%;
  padding: 0.3rem 0.8rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 1001;
  height: 48px;
}

.header-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-icon {
  height: 30px;
  width: auto;
  margin-right: 0.5rem;
}

.header-title {
  font-family: 'Rosemary', sans-serif;
  font-size: 0.9rem;
  color: #f8dae4;
  margin: 0;
  padding-top: 2px;
}


.site-nav {
  margin-left: auto;         /* pushes nav to the right */
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-link {
  font-family: 'Rosemary', sans-serif;
  color: #f8dae4;
  text-decoration: none;
  font-size: 0.9rem;
}

.nav-link:hover {
  text-decoration: underline;
}

/* ===== MOBILE HAMBURGER NAV ===== */

.nav-toggle{
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0.35rem 0.4rem;
  cursor: pointer;
}

.nav-toggle .burger{
  display: block;
  width: 26px;
  height: 2px;
  background: #f8dae4;
  position: relative;
  border-radius: 2px;
}

.nav-toggle .burger::before,
.nav-toggle .burger::after{
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: #f8dae4;
  border-radius: 2px;
}

.nav-toggle .burger::before{ top: -7px; }
.nav-toggle .burger::after{ top: 7px; }

/* Mobile layout: hamburger shows, nav becomes flyout */
@media (max-width: 768px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav{
    position: absolute;
    top: 48px;                 /* below fixed header */
    right: 0;
    width: min(320px, 92vw);
    background: #d77c82;
    border-left: 1px solid rgba(248,218,228,0.35);
    border-bottom: 1px solid rgba(248,218,228,0.35);
    padding: 0.75rem 0.9rem;
    display: none;             /* closed by default */
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1002;
  }

  .site-nav.is-open{
    display: flex;
  }

  .nav-link{
    font-size: 1rem;           /* slightly bigger for thumb tapping */
  }
}

.hardanger-headline,
.hardanger-header {  /* submission page big heading */
  font-family: 'Hardanger', sans-serif;
}



/* ====== COMMON LINKS ====== */
.insta-link,
.home-link {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-family: 'Hardanger', sans-serif;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  z-index: 10;
}

.insta-link:hover,
.home-link:hover {
  text-decoration: underline;
}

/* General link styles */
a {
  color: #d77c82; /* pick your color */
  text-decoration: underline; /* or none if you want no underline */
}

a:hover {
  color: #d77c82; /* hover color */
  text-decoration: underline; /* underline on hover */
}

/* ===== HEADER LINK OVERRIDES ===== */
.site-header a,
.site-header a:visited{
  color:#f8dae4;
}

.site-header a:hover{
  color:#f8dae4;
  text-decoration: underline;
}

/* ===== MOBILE HEADER FONT FIX ===== */
@media (max-width: 768px){
  .header-title,
  .nav-link{
    font-family: 'Rosemary', sans-serif;
    font-size: 0.9rem; /* keep your bump */
  }
}