/* Basic reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #f5f0e8;
  background: #7b4a18;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #7b4a18;
  border-bottom: 6px solid rgba(255,255,255,1);
}

.nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
}

.nav__link {
  color: #f5f0e8;
  text-decoration: none;
  font-weight: 700;
  opacity: 0.95;
}
.nav__link:hover { opacity: 1; text-decoration: underline; }

.nav__home {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-left: 6px;
}
.nav__home img {
  width: 26px;
  height: auto;
  display: block;
  opacity: 0.95;
}
.nav__home:hover img { opacity: 1; }

/* Hero */
.hero {
  position: relative;
  height: 520px;
  overflow: hidden;
  border-bottom: 10px solid #7b4a18;
}

/* Background photo layer (overscanned) */
.hero__bg {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;

  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;

  transform: translateY(0) scale(1.05);
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.asset {
  position: absolute;
  height: auto;
}

/* Sign in hero */
.asset--sign-brown {
  left: 10vw;
  top: -30px;
  width: 460px;

  transform: translateY(0);
  will-change: transform;
}

/* Pigeon overlaps content (positioned relative to page) */
.asset--pigeon {
  right: 2%;
  width: 320px;
  top: 380px;
  z-index: 20;
  pointer-events: none;
}

/* Content */
.content { 
  background: #f5f5f5;
  color: #141414;
  a { color: #141414; }
  a:hover { color: #4b4b4b; }
  a:active { color: #323232; }
  a:visited { color: #323232; }
  a:focus { color: #323232; }
}

.panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 16px 44px;
  scroll-margin-top: 80px;
}

/* Section label (image plate) */
.panel__label--img{
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("images/label-sign.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  width: 134px;
  height: 56px;
  margin-bottom: 16px;
}

.panel__labelText{
  font-size: 22px;
  font-weight: 900;
  color: #111;
  transform: translateX(-12px);
}

/* Right-side label + flip the sign graphic */
.panel__label--right{
  margin-left: auto;
  transform: scaleX(-1); /* flip sign image */
}


/* Flip the text back so it reads correctly AND keep your offset */
.panel__label--right .panel__labelText{
  transform: scaleX(-1) translateX(12px);
}



/* Grid templates (reliable flip using areas) */
.panel__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;

  grid-template-areas: "text media";
}

.panel__text { grid-area: text; }
.panel__media { grid-area: media; }

.panel--flip .panel__grid{
  grid-template-columns: 1fr 1.3fr;
  grid-template-areas: "media text";
}

/* Right-align text in flipped panels */
.panel--flip .panel__text{
  text-align: right;
}

/* Media styles */
.panel__media img{
  width: 100%;
  border-radius: 16px;
  border: 4px solid rgba(255,255,255,1);
  display: block;
}

/* Plain media (no border) */
.panel__media--plain img{
  border: none !important;
  border-radius: 0;
  margin: 0;  
  width: 100%;
}

/* Text only panel */
.panel--textonly h2{
  margin-top: 0;
}

/* Bug */
.panel__bug{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}

.panel__bugImg{
  width: 50px;
  height: auto;
  opacity: 0.95;
}

/* Typography */
h2, h3 { margin: 0 0 10px; font-weight: 900; }
p { line-height: 1.6; margin: 0 0 12px; }
.small { opacity: 0.85; font-size: 0.95rem; }

/* Footer */
.footer {
  max-width: 1100px;
  text-align: center;
  margin: 0 auto;
  padding: 12px 0 20px;
  border-top: 3px solid rgba(255,255,255,1);
}
.footer p { margin: 2px 0; }

/* MOBILE / NARROW */
@media (max-width: 780px) {
  .nav { justify-content: space-between; }

  .hero { height: 300px; }

  /* Single-column content */
  .panel__grid { grid-template-columns: 1fr; grid-template-areas: "text" "media"; }
	.panel--flip .panel__grid{grid-template-columns: 1fr; grid-template-areas: "text" "media";}

  /* On mobile, don't force right-aligned copy */
  .panel--flip .panel__text { text-align: left; }
	

  /* Also stop flipping the right-side label on mobile (optional; looks calmer) */
  .panel__label--right { margin-left: 0; transform: none; }
  .panel__label--right .panel__labelText { transform: translateX(-12px); }

  /* Turn off parallax transforms on mobile (script also disables) */
  .hero__bg,
  .asset--sign-brown {
    transform: none !important;
  }
	
	.panel__media--plain{width: 60%; margin: 0 auto; }

  /* Reposition hero overlays for mobile */
  .asset--sign-brown { left: 4%; top: -46px; width: 300px; }

  /* Pigeon smaller and lower */
  .asset--pigeon { width: 150px; top: 258px; }
}