/* Postcards for David — custom effects that Tailwind utilities can't express.
   Everything else is plain Tailwind classes in the HTML (see tailwind-config.js). */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,700;1,7..72,400&family=Playfair+Display:ital,wght@0,600;0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

body {
  background-color: #f7ebd5;
  background-image: 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Mobile-only app shell: keeps the phone-width layout even in a wide desktop
   browser window, instead of stretching full-bleed. */
.app-shell {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bottom-nav {
  max-width: 480px;
  margin: 0 auto;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}
.icon-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }

/* Red/navy airmail stripe border, used to frame the whole page */
.airmail-border {
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
    -45deg,
    #ba1a1a 0, #ba1a1a 15px,
    transparent 15px, transparent 30px,
    #172c1d 30px, #172c1d 45px,
    transparent 45px, transparent 60px
  ) 12;
}

/* Same stripe, used as a solid background wrapper around individual postcards */
.airmail-wrap {
  background: repeating-linear-gradient(
    -45deg,
    #ba1a1a 0, #ba1a1a 14px,
    transparent 14px, transparent 28px,
    #172c1d 28px, #172c1d 42px,
    transparent 42px, transparent 56px
  );
}

.card-shadow { box-shadow: 2px 2px 0px 0px rgba(23,44,29,1); }
.card-shadow-hover:hover { box-shadow: 4px 4px 0px 0px rgba(23,44,29,1); }

.stamp-edge {
  position: relative;
  border: 1px dashed #c3c8c1;
}
.stamp-edge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px dotted #a3a3a3;
  z-index: -1;
  background: #fff;
}

.washi-tape {
  position: absolute;
  background-color: rgba(235, 232, 227, 0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  clip-path: polygon(0% 5%, 5% 0%, 15% 4%, 25% 1%, 35% 6%, 45% 2%, 55% 5%, 65% 1%, 75% 4%, 85% 0%, 95% 6%, 100% 2%, 100% 95%, 95% 98%, 85% 94%, 75% 99%, 65% 95%, 55% 98%, 45% 94%, 35% 99%, 25% 95%, 15% 98%, 5% 94%, 0% 99%);
}

.address-line {
  border-bottom: 2px dotted #737972;
  padding-bottom: 4px;
}

.postcard-texture {
  background-color: #f8f4ed;
  background-image: 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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Stamp / "done" toggle button, shared by hikes + dates.
   Shows a real photo of the place; tapping it "cancels" the stamp like a postmark. */
.stamp-box {
  border: 2px solid #fff;
  outline: 1px dashed #c3c8c1;
  background: none;
  padding: 0;
  overflow: hidden;
  transition: outline-color 0.15s ease;
}
.stamp-box:hover { outline-color: #904d00; }
.stamp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.postmark-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.stamp-attribution {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  color: #737972;
  text-align: right;
}

.rotate-1 { transform: rotate(1deg); }
.rotate-2 { transform: rotate(2deg); }
.rotate-neg-1 { transform: rotate(-1deg); }
.rotate-neg-2 { transform: rotate(-2deg); }

/* Active nav state (bottom nav) */
.bottom-nav-link.active-nav {
  background-color: #fe932c;
  color: #663500;
  opacity: 1;
  box-shadow: 1px 1px 0px 0px rgba(110,57,0,1);
}