/* =========================== */
/* P2 SITE STYLES (FIXED)      */
/* =========================== */

/* 1. IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Press+Start+2P&family=Varela+Round&display=swap');

/* 2. BASE SETTINGS (MOBILE DEFAULTS) */
body {
  background: linear-gradient(180deg, #008080 0%, #00D4CD 100%);
  background-attachment: fixed;
  font-family: 'Varela Round', sans-serif;
  margin: 0;
  padding: 0;
  color: #fff;
}

/* 3. HEADER (MOBILE SIZE) */
.mobile-header {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 5px 15px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid #00D4CD;
  position: relative; 
}

/* LOGO (Mobile: Small & Tidy) */
.header-logo {
  width: 80px;  /* Kept small for phone */
  height: 80px;
  object-fit: contain;
  cursor: pointer;
  z-index: 20;
}

/* CENTER TEXT (Mobile - INCREASED SIZE) */
.header-title-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  
  font-family: 'Press Start 2P', cursive;
  color: #fff;
  font-size: 18px; /* Increased to 18px */
  text-shadow: 2px 2px 0px #FF5E00;
  z-index: 10;
  pointer-events: none; 
}
}

/* MENU ICON (Mobile) */
.menu-icon {
  font-size: 35px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  z-index: 20;
}

/* 4. DROPDOWN MENU */
.dropdown-nav {
  display: none;
  background-color: #000;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid #00D4CD;
}

.nav-link {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  padding: 15px;
  border-bottom: 1px solid #333;
}

/* 5. MAIN BUTTONS (MOBILE SIZE) */
.linktree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 40px 20px;
}

.link-btn-text {
  display: block;
  width: 85%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 0; /* Good mobile tap size */
  
  border: 3px solid #FF5E00;
  background-color: rgba(0, 0, 0, 0.4);
  
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 20px; /* Readable on mobile */
  text-align: center;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all 0.1s ease;
}

.link-btn-text:active, .link-btn-text:hover {
  transform: scale(0.98);
  background-color: #FF5E00;
  color: #000;
}

/* 6. GENERAL */
section { display: none; }
section.active { display: block; }
footer { text-align: center; padding: 20px; font-size: 12px; opacity: 0.8; }


/* ========================================= */
/* DESKTOP MODE (AUTOMATIC SCALE UP)         */
/* ========================================= */
/* This code ONLY runs on screens wider than 768px (Tablets/PCs) */

@media (min-width: 768px) {
    
    /* 1. Header gets taller */
    .mobile-header {
        padding: 10px 40px;
        min-height: 160px; /* Force height for big elements */
    }

    /* 2. Logo gets HUGE (150px) */
    .header-logo {
        width: 150px;
        height: 150px;
    }

    /* 3. Text gets HUGE (36px) */
    .header-title-text {
        font-size: 36px;
        text-shadow: 4px 4px 0px #FF5E00;
        /* Re-center strictly for desktop height */
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* 4. Menu Icon gets Bigger */
    .menu-icon {
        font-size: 55px;
    }

    /* 5. Buttons get Bigger */
    .link-btn-text {
        padding: 30px 0; /* Taller buttons */
        font-size: 28px; /* Larger text */
        gap: 40px;
    }
    
    .linktree-container {
         gap: 40px; 
    }
}
/* =========================== */
/* SHOP PAGE STYLES            */
/* =========================== */

/* 1. SHOP CONTAINER (Margins) */
.shop-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

/* 2. SUBHEADER ("PRINTS") */
.shop-subheader {
  font-family: 'Press Start 2P', cursive;
  color: #FF5E00; /* Neon Pink */
  font-size: 32px;
  margin-top: 30px;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-shadow: 2px 2px #000;
}

/* 3. INTRO TEXT */
.shop-intro {
  font-size: 16px;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto 40px auto; /* Spacing below text */
  color: #eee;
}

/* 4. THE PRODUCT GRID */
.product-grid {
  display: grid;
  gap: 30px;
  /* Mobile Default: 1 column (Stacked) */
  grid-template-columns: 1fr; 
}

/* 5. PRODUCT CARD */
.product-card {
  background: rgba(0, 0, 0, 0.6); /* Dark Card */
  border: 1px solid #00D4CD;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #333;
}

.product-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
}

/* 6. SHOPIFY BUTTON ROW (Side-by-Side Override) */
.shopify-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* Space between the two buttons */
  width: 100%;
  flex-wrap: nowrap; /* Forces them to stay on the same line */
}

/* This targets the Shopify code specifically to stop it from being 100% wide */
.shopify-btn-row > div {
  width: auto !important; /* Overrides Shopify's full width setting */
  flex: 0 1 auto !important; /* Tells the button to only take the space it needs */
  margin: 0 !important;
}

/* DESKTOP GRID OVERRIDE (3 Per Row) */
@media (min-width: 768px) {
  .product-grid {
    /* Desktop: 3 columns */
    grid-template-columns: repeat(3, 1fr); 
  }
}

/* =========================== */
/* ABOUT PAGE STYLES           */
/* =========================== */

.about-container {
  max-width: 800px; /* Limits width for readability */
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-text-box {
  background-color: rgba(0, 0, 0, 0.6); /* Dark semi-transparent box */
  border: 2px solid #00D4CD; /* Teal border */
  border-radius: 8px;
  padding: 30px;
  
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
  line-height: 1.6; /* ample spacing between lines */
  color: #fff;
  text-align: left; /* Left align is easier to read for paragraphs */
}

.about-text-box p {
  margin-bottom: 20px; /* Space between paragraphs */
}

.about-text-box p:last-child {
  margin-bottom: 0;
}

/* =========================== */
/* CONTACT PAGE STYLES         */
/* =========================== */

.contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px 20px;
  max-width: 600px;
  margin: 0 auto;
}

/* The visual text of the email address */
.email-display-text {
  font-family: 'Varela Round', sans-serif;
  color: #191970; /* Orange */
  font-size: 20px;
  margin-top: -10px; /* Pulls it closer to the Email button */
  margin-bottom: 30px; /* Space before socials */
  user-select: all; /* Highlights all text when clicked (for easy copying) */
  text-align: center;
}

/* Desktop sizing for the email text */
@media (min-width: 768px) {
  .email-display-text {
    font-size: 28px;
  }
}