/* =========================================================
   Base / Reset
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow-y: auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   3-column page core
========================================================= */
.page {
  min-height: 100vh;
  display: flex;
}

.col-left,
.col-right {
  flex: 1 1 0;
  background: #fff;
}

.col-center {
  flex: 0 0 auto;
  width: min(960px, 100%);
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  background: transparent;
}

.content {
  width: min(900px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =========================================================
   TOP SECTION
========================================================= */
.top {
  background-image: url("/Images/pinstripe-fill.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  text-align: center;
  /*padding: 16px 12px;*/
  padding-top: 0px;
  padding-bottom: 0px;
}

/* =========================================================
   TOP SECTION – Fixed Pinstripe
========================================================= */
.top {
  background-image: url("/Images/pinstripe-fill.jpg");
  background-repeat: repeat;
  background-position: center top;
  
  /* CHANGE: This stops the vertical stretching */
  /* 100% width, auto height maintains the correct stripe ratio */
  background-size: 100% auto; 

  text-align: center;
  /*padding: 16px 12px;*/
  padding-top: 0px;
  padding-bottom: 0px;
}

.hero-text {
  display: inline-block;
  font-size: 18pt; 
  line-height: 1.1;
  
  padding-top: 15px;
  
  /* ADD THIS: Distributes text evenly to prevent orphans */
  text-wrap: balance; 
  
  /* Ensure this is NOT 'nowrap' on mobile */
  white-space: normal; 
}


.hero-w {
  font-size: 150%;
  line-height: 1;
  margin-right: -0.08em;
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
  .hero-text {
    font-size: 14pt;      /* Shrink the font */
    white-space: normal;  /* Allow it to wrap to a 2nd line if needed */
    padding-top: 10px;     /* Add a little side breathing room */
  }
  
  .hero-w {
    font-size: 130%;      /* Slightly smaller drop-cap 'W' for mobile balance */
  }
  
  .hero-split {
  display: inline-block; /* Forces these words to act as a single unit */
  white-space: nowrap;   /* Prevents a break between them */
  }

}


/* ============================================================
   IMAGE MONTAGE
   ============================================================ */
.welcome-photos {
  display: grid;
  /* Left Column (Small Frame 182px) | Right Column (Large Frame 388px) */
  grid-template-columns: 182px 388px;
  grid-template-rows: 299px; 
  column-gap: 20px;
  justify-content: center;
  margin: 30px auto;
}

.left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  height: 299px; /* Matches Large Frame height exactly */
}

/* BASE PNG FRAME STYLES */
.photo-frame {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent !important;
  box-shadow: none !important;
  display: block;
  box-sizing: border-box;
}

/* SMALL PNG FRAME (Frame 2-1 for Hoop and Women) */
.photo-frame.small {
  background-image: url("/Images/Photo-Frame2.png") !important;
  width: 182px;
  height: 140px;
  /* MATH from Old Site: Top Offset 12px, Left Offset 12px */
  /* Padding: Top Right Bottom Left */
  padding: 12px 14px 12px 12px; 
}

/* LARGE PNG FRAME (Frame 1-1 for Bride) */
.photo-frame.large {
  background-image: url("/Images/Photo-Frame1.png") !important;
  width: 388px;
  height: 299px;
  /* Matching the 12px top/left logic for consistency */
  padding: 12px 14px; 
}

.photo-frame img {
  display: block;
}

/* EXACT INSET PIXEL SIZES */
.photo-frame.small img {
  width: 156px;
  height: 116px;
}

.photo-frame.large img {
  width: 360px;
  height: 275px;
}

/* Mobile-specific changes */
@media screen and (max-width: 768px) {
  /* Hides the entire left column (small images) */
  .left-col {
    display: none;
  }

  /* Changes the grid to a single column for the large image */
  .welcome-photos {
    grid-template-columns: 1fr;
    width: 90%; /* Let it breathe on small screens */
  }

  .photo-frame.large {
    width: 100%;
    height: auto;
  }
}


/* =========================================================
   MIDDLE SECTION – THE FRAME (FIXED)
========================================================= */
.middle {
  position: relative;
  /* Lift this section so its absolute children stay on top */
  z-index: 10; 
  isolation: isolate; 
}

.middle-bg {
  position: relative; 
  width: 100%;
  background-image: url("/Images/pinstripe-fill-white-middle.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  /* Physical space for the 40px cap images */
  padding-top: 40px; 
  padding-bottom: 40px; 
  overflow: visible !important;
}

/* SHARED CAP STYLES */
.middle-bg::before,
.middle-bg::after {
  content: "";
  display: block; 
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background-repeat: no-repeat;
  /* Use 100% auto to keep the pinstripe look natural */
  background-size: 100% auto !important; 
  z-index: 50; 
}

.middle-bg::before {
  top: 0;
  background-image: url("/Images/pinstripe-fill-large-top.jpg");
  background-position: center top;
}

.middle-bg::after {
  content: "";
  display: block !important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;

  /* 1. Restore the image */
  background-image: url("https://www.countrywagon.com/Images/pinstripe-fill-large-bottom.jpg") !important;
  
  /* 2. CHANGE: Anchor to the TOP of the image */
  /* This shows the first 40 pixels of the 199px file */
  background-position: center top !important; 
  
  /* 3. FIX: Keep the width at 100% but let the height be its natural 199px */
  /* This prevents the "squishing" that makes the cap disappear */
  background-size: 100% auto !important; 
  
  background-repeat: no-repeat !important;
  z-index: 999 !important;
}


.middle-indent {
  padding: 20px 90px;
  position: relative;
  z-index: 5;
}

.middle-justify p {
  /* 1. Aligns text to both left and right edges */
  text-align: justify;

  /* 2. Tells the browser how to handle the spacing between words */
  text-justify: inter-word;

  /* 3. Optional: Helps prevent large awkward gaps on narrow screens */
  hyphens: auto;
  
  /* Standardizing line height for better readability when justified */
  line-height: 1.6;
  margin-bottom: 1.5em;
}


/* =========================================================
   SPACER
========================================================= */
.spacer {
  flex: 1 1 auto;
  background-image: url("/Images/pinstripe-fill-large-middle.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  position: relative;
  z-index: 1; /* Keep behind the middle caps */
}

/* =========================================================
   BOTTOM SECTION (FIXED COMPRESSION)
========================================================= */
.bottom {
  background-image: url("/Images/pinstripe-fill-large-middle.jpg");
  background-repeat: no-repeat;
  /* Anchoring to bottom prevents the stripes from looking "cut off" */
  background-position: center bottom; 
  /* Cover ensures stripes fill the area without squishing */
  background-size: cover; 
  padding: 12px;
  min-height: 120px;
}

/* =========================================================
   Footer
========================================================= */
.copyright {
  text-align: center;
  font-size: 12pt;
  line-height: 1.4;
  margin-top: 10px;
  margin-bottom: 40px;
}

.copyright .small-text {
  display: block;
  font-size: 10pt;
}