@import url('https://googleapis.com');

/* ==========================================================================
   1. RESET & LAYOUT BASE
   ========================================================================== */
*, *:before, *:after {
  box-sizing: border-box; /* Prevents margins/padding from breaking layout widths */
}

html {
  min-height: 101%;
}

body {
  margin: 10px 5px 5px 5px;
  padding: 10px 5px 5px 5px;
  background: #000000;
  color: #ffffff; /* Makes your text white so it is visible on the black background */
}

/* FIRST LINE: Title styling */

h1 {
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
  font-size: 2.8rem;         /* Clean, controlled desktop scale */
  line-height: 1.1;
  margin-bottom: 15px;    
  text-transform: uppercase; 
}

h6 {
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
  font-size: 1rem;     
  text-transform: uppercase; 
}

/* DESKTOP SUBTITLE: Readable handwriting without being overly huge */
p {
  font-family: 'Caveat', 'Lato', cursive, sans-serif;
  font-size: 1.8rem;         
  line-height: 1.4;
  margin-top: 0;         
}

/* Styling for the opening words in the H1 */
p .p-font-start {
  font-family: 'Caveat', 'Lato', cursive, sans-serif; /* Use your paragraph font */
  font-size: 2rem;                 
  color: #ffffff;                 
  margin-right: 5px;                /* Adds a tiny gap before the next word */
  text-transform: none; 
}

/* ==========================================================================
   2. STRUCTURAL CONTAINERS
   ========================================================================== */
#wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

#page {
  width: 100%;             /* Stretches fluidly on mobile */
  max-width: 1000px;       /* Restricts max expansion on desktop screen sizes */
  position: relative;
  clear: both;
  overflow: hidden;
  margin: 0 auto;          /* Centers website layout horizontally */
  padding: 0 15px;         
  background: #ffffff;
  border-radius: 20px;
}

#header {
  width: 100%;
  max-width: 960px;
  margin: 60px auto 0 auto;
  border-bottom: 0px solid #ffffff;
}

#page-split {
  margin: 0;
  padding: 0;
}

#menu-wrapper {
  position: relative;
  clear: both;
  overflow: hidden;
  width: 100%;
  background: transparent;
}

.outer {
  max-height: 5000em;
}

/* ==========================================================================
   3. MAIN CONTENT BLOCKS
   ========================================================================== */
#content, #content1, #content2 {
  width: 100%;             
  max-width: 960px;        
  margin: 0 auto;          
  padding: 20px 0;
  position: relative;
  left: 0;                 
}

/* ==========================================================================
   4. HOME GRID LAYOUT (ARTIST / DESIGNER / PRINTMAKER)
   ========================================================================== */
.grid-container {
  display: grid !important; /* FIXED SYNTAX: Semi-colon placed at the end */
  grid-template-columns: repeat(3, 1fr) !important; /* FIXED SYNTAX */
  border-radius: 20px;
  grid-gap: 20px;
  background: #d2d2d2;
  padding: 20px;
}

.grid-container > div {
  border-radius: 15px;
  text-align: left;
  padding: 100px 15px 20px 25px; 
  font-size: 3em;
  color: #f2f2f2;
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
  background-color: #336633;     
  
  /* Flexbox settings ensure the handwriting and Bebas words sit side-by-side cleanly */
  display: flex;
  flex-direction: row;
  align-items: baseline; 
  flex-wrap: wrap;       /* Allows wrapping smoothly if space runs tight */
}

/* Specific styling for the brand new Caveat handwriting layer */
.intro-handwritten {
  font-family: 'Caveat', 'Lato', cursive, sans-serif;
  font-size: 0.55em;      /* Scaled down relative to the parent box's massive 3em font-size */
  font-weight: normal;
  text-transform: none;   /* Keeps capitalization natural (overrides structural locks) */
  color: #ffffff;         /* Keeps it bright white over your signature green cards */
  margin-right: 5px;     /* Leaves breathing room before the formal word */
}

/* ==========================================================================
   5. RESPONSIVE IMAGE SLIDER (60% DESKTOP SIZE - ONE AT A TIME)
   ========================================================================== */
.slider-wrapper {
  position: relative; /* Anchor point for positioning the navigation arrows */
  width: 100%;
}

.slider-container {
  width: 100%;
  max-width: 60%;         /* Restricts the window width to your exact original image size */
  margin: 0 auto;          /* Perfectly centers the slideshow box on the page */
  overflow: hidden;
  padding: 20px 0 20px 0; 
}

.slider {
  display: flex;
  overflow-x: auto;       /* Smooth native finger swiping tracking */
  scroll-snap-type: x mandatory; /* Snaps instantly to next clean frame on release */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
  -ms-overflow-style: none;  /* Hides scrollbars on IE/Edge */
  scrollbar-width: none;     /* Hides scrollbars on Firefox */
}

/* Hides scrollbars on Chrome, Safari, and Opera web view rendering engines */
.slider::-webkit-scrollbar {
  display: none;
}

/* SLIDER IMAGE STYLING */
.img {
  flex: 0 0 100%;          /* Forces the image box to fill the 60% container window entirely */
  width: 100%;             
  max-width: 100%;         
  height: auto;
    /* ADD THIS LINE: Tells the browser the safe shape container to reserve while loading */
  aspect-ratio: 4 / 5;   /* Change to 1 / 1 if square, or 3 / 4 depending on your frame layout shape */
  
  object-fit: cover;      
  scroll-snap-align: center; 
  margin: 0;               /* Zero margins ensures precise edge tracking with zero gap bleeding */
  display: block;
}

.imgicon {
  margin: 0;
}

/* LOGO IMAGE STYLING */
.logoimg {
  flex: 0 0 auto;          /* Stops the image box from forcing a full-width block */
  width: 20%;             
  max-width: 20%;         
  height: auto;
  object-fit: cover;      
  scroll-snap-align: center; 
  margin: 0 auto;          /* Centered horizontally, zero margin on top/bottom */
  display: block;
}

/* SLIDER NAVIGATION BUTTONS */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6); 
  color: #ffffff;
  border: none;
  font-size: 24px;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.slide-btn:hover {
  background: rgba(51, 102, 51, 0.9); /* Changes to brand green layout hue on desktop hover */
}

/* Positions arrows safely right outside the 60% image borders on desktop computers */
.prev-btn {
  left: 12%; 
}

.next-btn {
  right: 12%; 
}

/* ==========================================================================
   6. TYPOGRAPHY & FOOTER
   ========================================================================== */
.copygrey {
  line-height: 1.5em;
  font-size: 1em;
  color: #ffffff;
}

.minihead {
  color: #003000;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

#footer {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 40px 10px 40px; /* Pulls footer contents elegantly inward on desktop */ 
  display: flex;       
  justify-content: space-between;
  align-items: center;
}

.footerimg {
  height: 20px;
  width: auto;
}

.footer-insta-link {
  height: 25px;
  width: auto;
}

.footer-insta-link2 {
  height: 25px;
  width: auto;
}

.footertext {
  font-size: 1em;
  color: #000000;
  font-weight: bold;
  text-align: right;
  letter-spacing: 1px;
}
/* ==========================================================================
   CONTACT FORM CSS Container Box Layout
   ========================================================================== */

.contact-container {
  max-width: 450px;
  margin: 40px auto;
  padding: 30px;
  background-color: #d2d2d2;
  border-radius: 20px;
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
}

.contact-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333333;
  font-size: 2.5rem;      /* Changes how large the text looks */
}

/* Input Fields & Textareas */
.contact-container label {
  display: block;
  margin-bottom: 8px;
  color: #333333;
  font-size: 1.5rem;      /* Changes how large the text looks */
  font-family: 'Caveat', 'Lato', cursive, sans-serif;
}

.contact-container input[type="text"],
.contact-container input[type="email"],
.contact-container textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  font-size: 1rem;     
}

/* Input Focus Glow effect */
.contact-container input:focus,
.contact-container textarea:focus {
  border-color: #336633;
  outline: none;
}

/* Submit Button Styling */
.contact-container button[type="submit"] {
  width: 100%;
  background-color: #336633;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: bold;
  transition: background-color 0.2s ease-in-out;
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
}

.contact-container button[type="submit"]:hover {
  background-color: #ff8c00;
}

/* Utility class to hide elements */
.hidden-element {
  display: none !important;
}

/* Optional styling to center and animate your success message */
#thankYouMessage {
  text-align: center;
  padding: 20px 0;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. MOBILE PHONE OPTIMISATIONS (SCREENS BELOW 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.8rem !important;        
    line-height: 1.1 !important;       
    margin-bottom: 5px !important;
  }

  h6 {
    font-size: 0.75rem !important;   
    letter-spacing: 1px !important; 
  }

  p {
    font-size: 1.1rem !important;      
    line-height: 1.4 !important;
  }
  
  h1 .p-font-start {
    font-family: 'Caveat', 'Lato', cursive, sans-serif; 
    font-size: 1.5rem;                 
    color: #ffffff;                    
    margin-right: 5px;                
    text-transform: none; 
  }
  
  #header {
    margin: 20px auto 0 auto !important; 
    padding: 0 10px !important;
  }

  #page {
    padding: 0 10px !important;
    border-radius: 10px !important;    
  }

  .slide-btn {

    top: auto !important;
    bottom: -25px; /* Pushes them completely below the image frame */
    transform: none; 
    
    /* 2. Change colour to a solid green */
    background: #336633 !important; 
    color: #ffffff;

    /* 4. Keeps the button size tight for mobile */
    font-size: 18px;
    padding: 10px 14px;
    transition: background 0.2s ease, color 0.2s ease;
  }
  
  /* Make sure they stay solid grey when someone taps/hovers on mobile */
  .slide-btn:hover {
    background: #d2d2d2 !important;
    color: #000000 !important; /* Makes the white arrow dark so it stays visible on the light gray background */
  }

  .slider-container {
    max-width: 90%; 
    padding: 30px 0 30px 0; /* Increased the final number to 60px to give the new button position breathing room */     
  }

  .grid-container {
    grid-template-columns: 1fr !important; /* Stacks to 1 column safely on mobile only */
    grid-gap: 15px;
  }
  
  .grid-container > div {
    padding: 60px 15px 20px 20px; 
    font-size: 2.2em;             
  }

  .intro-handwritten {
    font-size: 0.6em;
    margin-right: 8px;
    width: 100%; /* Forces the handwriting onto its own clean top row within the green block */
    margin-bottom: 3px;
  }

.contact-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333333;
  font-size: 1.8rem;      /* Changes how large the text looks */
  font-family: 'Bebas Neue', 'Oswald', 'Verdana', sans-serif;
}

/* Input Fields & Textareas */
.contact-container label {
  display: block;
  margin-bottom: 8px;
  color: #333333;
  font-size: 1.5rem;      /* Changes how large the text looks */
  font-family: 'Caveat', 'Lato', cursive, sans-serif;
}

  .minihead {
    font-size: 2.5em;
  }

  #footer {
    flex-direction: column;
    gap: 25px;
    padding: 20px 15px 40px 15px; 
  }
  
  .footer-insta-link {
    margin: 10px auto 0 auto !important; 
  }

  .footertext {
    text-align: center;
  }
} /* CLOSES MOBILE MEDIA QUERY ONCE AND FOR ALL */