/* General Body Styles */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #fff;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 0 auto;
    max-width: 1100px;
}

/* Header */
header {
    background-color: #000000;
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: center;
}

header .logo {
    /* Removed font styling as it's now an image logo */
}

.header-logo {
    max-height: 50px; /* Adjust as needed for proper sizing */
    width: auto;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

header nav ul li {
    margin: 0 15px;
}

header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

header nav ul li a:hover {
    background-color: #333;
}

/* Hero Section */
.hero {
    background: url('https://euwpcnaioorzkhmwfnjn.supabase.co/storage/v1/object/public/creative-assets/images/8363f5c9-037e-4a4c-80e6-57f740204fc8/1769832967939-5n1i.jpeg') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 200px 0 305px 0; /* Original top padding */
    position: relative; /* Added for absolute positioning of hero-link */
}

.hero-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Inherit color to avoid default link color */
    z-index: 1; /* Ensure the link is clickable */
}

.hero-link .container {
    padding: 200px 0 305px 0; /* Apply padding to the container inside the link */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Make container take full height of the link */
}

/* No direct h1 or p in hero now */

.cta-button {
    background-color: #ED148C;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    display: inline-block; /* Make buttons display next to each other */
    margin: 15px 10px; /* Add horizontal and vertical spacing */
}

.cta-button:hover {
    background-color: #d4127f;
}

.cta-button.secondary {
    background-color: transparent;
    border: 2px solid #ED148C;
}

.cta-button.secondary:hover {
    background-color: #ED148C;
}

/* Action Buttons Section */
.action-buttons {
    background-color: #000000;
    padding: 30px 0;
    text-align: center;
}

/* Swag Promo Section */
.swag-promo {
    background-color: #232D37; /* Gray from brand guide */
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.swag-promo h2 {
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    margin-bottom: 20px;
}

.swag-promo p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}


/* Features Section */
.features {
    background: url('https://euwpcnaioorzkhmwfnjn.supabase.co/storage/v1/object/public/creative-assets/images/8363f5c9-037e-4a4c-80e6-57f740204fc8/1769981643650-0amre.jpeg') no-repeat center center;
    background-size: cover;
    min-height: 800px; /* Ensure the background image is visible */
    padding: 0; /* Remove padding from section itself, let link content handle it */
    position: relative; /* Needed for absolute positioning of the link */
    display: flex; /* Use flexbox to center content vertically */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    margin-bottom: 200px; /* Buffer below the features section */
}

.features-link {
    display: block;
    position: absolute; /* Cover the entire section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Inherit color to avoid default link color */
    z-index: 1; /* Ensure the link is clickable */
}

.features-link .container {
    padding: 100px 0; /* Apply padding to the container inside the link */
    display: flex; /* Use flex to ensure container respects padding */
    align-items: center;
    justify-content: center;
    height: 100%; /* Make container take full height of the link */
}


/* How It Works Section */
.how-it-works {
    background: url('https://euwpcnaioorzkhmwfnjn.supabase.co/storage/v1/object/public/creative-assets/images/8363f5c9-037e-4a4c-80e6-57f740204fc8/1769892420365-vd5et.jpeg') no-repeat center center;
    background-size: cover;
    min-height: 800px; /* Ensure the background image is visible */
    padding: 0; /* Remove padding from section itself, let link content handle it */
    position: relative; /* Needed for absolute positioning of the link */
    display: flex; /* Use flexbox to center content vertically */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    margin-bottom: 200px; /* Buffer below the how-it-works section */
}

.get-dished-link {
    display: block;
    position: absolute; /* Cover the entire section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Inherit color to avoid default link color */
    z-index: 1; /* Ensure the link is clickable */
}

.get-dished-link .container {
    padding: 100px 0; /* Apply padding to the container inside the link */
    display: flex; /* Use flex to ensure container respects padding */
    align-items: center;
    justify-content: center;
    height: 100%; /* Make container take full height of the link */
}

/* Screenshots Section */
.screenshots {
    background: url('https://euwpcnaioorzkhmwfnjn.supabase.co/storage/v1/object/public/creative-assets/images/8363f5c9-037e-4a4c-80e6-57f740204fc8/1769892411419-fmsfvg.jpeg') no-repeat center center;
    background-size: cover;
    min-height: 800px; /* Ensure the background image is visible and fits */
    padding: 0; /* Remove padding from section itself, let link content handle it */
    position: relative; /* Needed for absolute positioning of the link */
    display: flex; /* Use flexbox to center content vertically */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    margin-bottom: 200px; /* Buffer below the screenshots section */
}

.why-datedish-link {
    display: block;
    position: absolute; /* Cover the entire section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* Inherit color to avoid default link color */
    z-index: 1; /* Ensure the link is clickable */
}

.why-datedish-link .container {
    padding: 100px 0; /* Apply padding to the container inside the link */
    display: flex; /* Use flex to ensure container respects padding */
    align-items: center;
    justify-content: center;
    height: 100%; /* Make container take full height of the link */
}

/* Download Section */
.download {
    background-color: #000000;
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.download h2 {
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    margin-bottom: 20px;
}

.download p {
    margin-bottom: 30px;
}

.app-store-badge {
    width: 180px;
}

/* Footer */
footer {
    background-color: #000000;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}
/* =========================================================
   RESPONSIVE + VECTOR-SAFE PATCH (APPEND AT END OF FILE)
   Keeps design intact; fixes sizing for mobile + desktop.
========================================================= */

/* Global safety to prevent overflow */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Media scaling (vectors/images stay crisp and responsive) */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }

/* Container: your current container is 80% width.
   This is fine on desktop, but on small screens it can feel tight.
   Make it responsive without changing your layout. */
.container{
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* Header: allow wrapping so nav doesn’t overflow on smaller widths */
header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap; /* prevents overflow */
}

/* Nav: allow wrap + tighten spacing on mobile */
header nav ul{
  flex-wrap: wrap;
  gap: 10px;
}

header nav ul li{
  margin-left: 0; /* gap handles spacing */
}

/* Logo: scale smoothly */
.header-logo{
  max-height: clamp(38px, 6vw, 56px);
  width: auto;
}

/* Clickable overlay anchors: ensure they always cover section */
.hero, .features, .how-it-works, .screenshots { position: relative; }
.hero-link, .features-link, .get-dished-link, .why-datedish-link, .app-in-action-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

/* BIG WIN: Replace rigid vertical spacing with responsive clamp()
   Your sections currently use min-height:800px and margin-bottom:200px,
   which is huge on mobile. This keeps the look but scales it down. */
.hero{
  padding: 500px 0 clamp(140px, 24vw, 305px) 0;
}

.features,
.how-it-works,
.screenshots{
  min-height: clamp(420px, 90vw, 800px);
  margin-bottom: clamp(40px, 10vw, 200px);
}

/* The inner containers inside overlay links currently have fixed padding.
   Make them responsive to avoid awkward vertical spacing on phones. */
.hero-link .container{
  padding: clamp(120px, 20vw, 200px) 0 clamp(140px, 24vw, 305px) 0;
}

.features-link .container,
.get-dished-link .container,
.why-datedish-link .container,
.app-in-action-link .container{
  padding: clamp(48px, 10vw, 100px) 0;
}

/* Buttons: keep style, improve tap-size + responsiveness */
.cta-button{
  padding: 14px 22px;
  border-radius: 10px;
  min-height: 44px;
}

/* App store badge: responsive */
.app-store-badge{
  width: clamp(160px, 45vw, 220px);
}

/* Typography: keep your font choices, make headings scale gracefully */
.download h2,
.swag-promo h2{
  font-size: clamp(2rem, 6vw, 3rem);
}

.swag-promo p{
  font-size: clamp(1rem, 2.8vw, 1.2rem);
}

/* Mobile-specific tweaks */
@media (max-width: 768px){
  /* Center header content; avoids awkward wrap alignment */
  header .container{
    justify-content: center;
    text-align: center;
  }

  header nav{
    width: 100%;
  }

  header nav ul{
    justify-content: center;
  }

  /* Reduce overall padding in text sections without changing design */
  .download, .swag-promo{
    padding: clamp(48px, 10vw, 80px) 0;
  }

  /* Ensure background images fit on mobile without cropping */
  .hero,
  .features,
  .how-it-works,
  .screenshots {
    background-size: contain;
  }

  .hero {
    padding-top: 150px; /* Adjust hero padding for contained image */
  }
}
.download .container a {
    margin: 0 10px; /* Add some spacing between badges */
    display: inline-block; /* Allow them to sit side-by-side */
}

/* Ensure the image within the link scales correctly */
.download .container a img {
    display: inline-block;
    vertical-align: middle;
}