/* FLOWERS + FORMAL WEAR - BerryVines.com */

.flex-container {display: flex; gap: 20px; flex-wrap: wrap;}

/* 1-Column Layout Variations */
.one-col-full .flex-item { flex: 0 0 100%; }
.one-col-narrow .flex-item { flex: 0 0 70%; margin: 0 auto; }

/* 2-Column Layout Variations */
.two-col-even .flex-item { flex: 0 0 calc(50% - 10px); }

/* First item: grow to fill remaining space */
#intro.flex-container .flex-item:nth-child(1) {flex: 1; min-width: 0; /* prevents overflow if content is wide */}

/* Second item: fixed width */
#intro.flex-container .flex-item:nth-child(2) {flex: 0 0 200px;}

/* Shrink image column between 900px and 600px */
@media (max-width: 900px) and (min-width: 601px) {
#intro.flex-container {flex-wrap: nowrap;}
#intro.flex-container .flex-item:nth-child(2) {flex: 0 0 150px;}

}

/* Stack columns under 600px, image on top */
@media (max-width: 600px) {#intro.flex-container {flex-direction: column;}
/* Force image column to top */
#intro.flex-container .flex-item:nth-child(2) {order: -1; margin: 0 auto;}
#intro.flex-container .flex-item:nth-child(1) {width: 100%;}
}


/* PHOTO GRIDS */
.photo-grid {margin: 0 auto 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0;}
.photo-item {position: relative; overflow: hidden; border-radius: 3px;}
#grid-formal .photo-item {width: 200px; height: 300px;}
#grid-flowers .photo-item {width: 200px; height: 200px;}
.photo-item img.scalable {width: 100%; height: auto; display: block; border-radius: 3px;}
/*.photo-item:hover {cursor: pointer;}*/



/* BUTTON - BURGUNDY */
.btn-brg {display: inline-block; position: relative;
background-color: rgba(107,82,94, .9); margin: 0 1em; padding: 6px 10px; border-radius: 5px; cursor: pointer; text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); text-align: center; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff; transition: all 0.3s ease; overflow: hidden;}
.btn-brg:hover {background-color: rgba(107,82,94, 1); border-color: rgba(255, 255, 255, 0.8); transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);}
.btn-brg::before {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 100%);
transform: rotate(45deg); opacity: 0; transition: opacity 0.1s ease;}
.btn-brg:active::before, .btn-brg:focus::before {animation: sparkle 1.75s ease-out;}
@keyframes sparkle {0% {opacity: 1; transform: rotate(45deg) translateX(-100%);}
20% {opacity: 1;} 80% {opacity: 0.8;} 100% {opacity: 0; transform: rotate(45deg) translateX(100%);}}
@media screen and (max-width: 480px) {.btn-brg {bottom: 8px; background-color: rgba(107,82,94, 1); font-weight: bold;}}
@media screen and (max-width: 639px) {.btn-brg {font-size: 1.25rem; padding: 0.625em 1em;}}
@media screen and (min-width: 640px) and (max-width: 1023px) {.btn-brg {font-size: 1.375rem; padding: .625em 1em;}}
@media screen and (min-width: 1024px) {.btn-brg {font-size: 1.375rem; padding: .625em 1em;}}
.btn-brg-glow {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 18px rgba(160, 220, 135, 0.85); z-index: 1; position: relative;}
.btn-brg-glow:hover {box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 24px rgba(160, 220, 135, 0.9);}

/* ---------- FAQs TOGGLE  ---------- */
/* ────── Base & Layout ────── */
.faq {width: 100%; margin: 0 auto; padding: 0;}
.cmscontent .faq li {margin-bottom: .25em;}
.faq-item {margin-bottom: .5em; /* space between each Q&A */}
/* ────── Question Button ────── */
.faq dt .faq-toggle {display: block; width: 100%; text-align: left;
  font-size: 1.1em; /* slightly larger question font */
  line-height: 1; color: #fff; background: #6b525e;
  padding: 0.75em 1em; /* vertical+horizontal padding */
  border: none; border-radius: 4px; cursor: pointer; margin-bottom: 0.5em; /* gap before the answer */
}
/* ────── Answer Collapse/Expand ────── */
/* collapsed: no vertical padding so nothing peeks out */
.faq-item dd {max-height: 0; overflow: hidden; padding: 0 1em; /* only horizontal padding when closed */
  transition: max-height 0.3s ease, padding 0.3s ease;  /* animate padding too */
  background: rgba(255,255,255,.3);
}
/* expanded: restore full padding */
.faq-item.open dd {max-height: 800px; /* must exceed your longest answer */
  padding: 0.75em 1.5em; /* vertical + horizontal padding */
  overflow: visible;
}
/* ────── “Close” Link ────── */
.faq .close {Display: block; float: right; margin: 0 .5em .5em .5em; font-size: 0.9em; text-decoration: none;
  border: 1px solid #999; border-radius: 2px; padding: 5px; background: rgba(255,255,255,.5); cursor: pointer;}
.faq .close:hover {background: rgba(255,255,255,.8);}
/* ────── Print — always fully expanded ────── */
@media print {.faq-item dd {max-height: none !important; overflow: visible !important; padding: 0.75em 1em !important;}}