/*
Theme Name: Mina's Prom & Grad
Theme URI: https://www.minasbridal.com/
Author: Mina's Prom & Grad
Description: Custom WordPress theme for Mina's Prom & Grad — West Edmonton Mall. Pagelayer-native. Product cards are built and edited entirely inside Pagelayer. Click any image to upload, click any text to edit.
Version: 16.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: minas-prom-grad
*/

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --gold:         #c9a96e;
  --gold-light:   #f7f1e6;
  --black:        #171514;
  --white:        #fff;
  --soft:         #faf8f4;
  --line:         #eadfcb;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', Arial, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--soft); color:var(--black); font-family:var(--font-body); line-height:1.65; }
a { color: inherit; }
img { max-width:100%; height:auto; display:block; }

/* ── Layout ────────────────────────────────────────────────── */
.wrap { width: min(1180px, 92vw); margin: auto; }

/* ── Announcement bar ──────────────────────────────────────── */
.announce {
  background: var(--black); color: var(--white);
  text-align: center; padding: 10px 16px;
  letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
}

/* ── Site header ───────────────────────────────────────────── */
.site-header {
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0; }
.logo img { width: 260px; }
.menu {
  display:flex; gap:26px; list-style:none; margin:0; padding:0;
  text-transform:uppercase; font-size:13px; letter-spacing:.12em;
}
.menu a { text-decoration:none; }
.menu a:hover { color: var(--gold); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:13px 22px;
  border:1px solid var(--gold); text-decoration:none;
  text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  transition:background .15s, color .15s;
}
.btn.primary { background:var(--gold); color:#fff; }
.btn.primary:hover { background:transparent; color:var(--gold); }
.btn:not(.primary):hover { background:var(--gold); color:#fff; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding:88px 0; background:linear-gradient(120deg,#fff 0%,#f8f2e8 100%); }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.22em; font-size:13px; }
.hero h1, .page-title {
  font-family:var(--font-display); font-size:clamp(48px,8vw,88px);
  line-height:.95; margin:14px 0 20px; font-weight:400;
}
.lead { font-size:19px; color:#514b46; max-width:680px; }
.btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ── Sections (generic) ─────────────────────────────────────── */
.section { padding:72px 0; }
.section h2 { font-family:var(--font-display); font-size:48px; font-weight:400; margin:0 0 18px; }

/* ── Feature grid (home page) ───────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature { background:#fff; border:1px solid var(--line); padding:28px; }
.feature h3 { margin:0 0 8px; font-size:19px; }

/* ── Contact ────────────────────────────────────────────────── */
.reviews-box, .contact-box { background:#fff; border:1px solid var(--line); padding:30px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.hours { width:100%; border-collapse:collapse; }
.hours td { border-bottom:1px solid var(--line); padding:10px 0; }
.hours td:last-child { text-align:right; }
.map iframe { width:100%; min-height:360px; border:0; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background:var(--black); color:#fff; padding:36px 0; text-align:center; }
.site-footer img { width:210px; filter:brightness(1.08); margin:0 auto 12px; }

/* ── Page intro sections ────────────────────────────────────── */
.pg-intro-section { padding: 60px 0 32px; }
.pg-cards-section { padding: 0 0 72px; }

.pg-intro, .designer-intro {
  text-align:center; max-width:680px; margin:0 auto;
}
.pg-intro h1, .designer-intro h1 {
  font-family:var(--font-display);
  font-size:clamp(42px,7vw,76px);
  line-height:.95; margin:12px 0 18px; font-weight:400;
}
.pg-intro p, .designer-intro p { font-size:17px; color:#514b46; }

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD STYLES
   Used by both seed HTML and Pagelayer-built cards.
   ══════════════════════════════════════════════════════════════ */

/* Grids */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card shell */
.minas-card, .pg-card, .dp-card {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
  transition: box-shadow .2s;
}
.minas-card:hover, .pg-card:hover, .dp-card:hover {
  box-shadow: 0 14px 40px rgba(0,0,0,.1);
}

/* Image wrap */
.minas-img-wrap, .pg-img-wrap, .dp-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.minas-img-wrap img,
.pg-img-wrap img,
.dp-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.pg-card:hover .minas-img-wrap img,
.dp-card:hover .minas-img-wrap img { transform: scale(1.04); }

/* Placeholder state */
.minas-img-placeholder {
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.minas-img-placeholder svg { opacity: .35; }
.minas-img-placeholder span {
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .7;
}

/* Card body */
.pg-body, .dp-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pg-body-title, .dp-body-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.15;
}
.dp-body-title { font-size: 22px; }
.pg-body-desc, .dp-body-desc {
  margin: 0;
  font-size: 13px;
  color: #5d5751;
  line-height: 1.6;
  flex: 1;
}

/* Designer link */
.dp-designer-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; color: var(--gold);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none;
}
.dp-designer-link:hover { opacity: .75; }

/* Pagelayer overrides — ensure images fill card correctly when
   Pagelayer wraps them in its own div structure */
.pg-card .pl-image img,
.dp-card .pl-image img,
.minas-card .pl-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.pg-card .pl-image,
.dp-card .pl-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1040px) { .pg-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 960px)  { .dp-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px)  { .pg-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px)  { .dp-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px)  { .pg-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2,1fr); }
  .nav { flex-direction:column; align-items:flex-start; }
  .menu { flex-wrap:wrap; gap:14px; }
  .logo img { width:220px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns:1fr; }
  .section { padding:48px 0; }
  .hero { padding:54px 0; }
}

/* ── Pagelayer content area on product pages ───────────────── */
.pg-pagelayer-area {
  padding: 0 0 48px;
}
/* Let Pagelayer rows breathe inside the page container */
.pg-pagelayer-area .pagelayer-row-holder {
  max-width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* ── Pagelayer page areas (v11) ──────────────────────────── */
.home-pagelayer-area,
.reviews-pagelayer-area,
.contact-pagelayer-area {
  width: 100%;
}
/* Constrain Pagelayer fixed-width rows to site max-width */
.home-pagelayer-area .pagelayer-row-stretch-fixed .pagelayer-row-holder,
.reviews-pagelayer-area .pagelayer-row-stretch-fixed .pagelayer-row-holder,
.contact-pagelayer-area .pagelayer-row-stretch-fixed .pagelayer-row-holder {
  max-width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* ── Footer v12 ──────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: #fff;
  padding: 40px 0;
  text-align: center;
}
.site-footer .footer-logo,
.site-footer .custom-logo {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
  filter: brightness(1.1);
}
.site-footer p {
  margin: 6px 0;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  font-family: var(--font-body);
}
.site-footer a {
  color: var(--gold);
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-copy {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
}

/* ── Announce bar v12 ────────────────────────────────────── */
.announce {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 10px 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  font-family: var(--font-body);
}

/* ══════════════════════════════════════════════════════════════
 * v13 — Logo + Footer fixes
 * ══════════════════════════════════════════════════════════════ */

/* ── Header logo — all variants same size ────────────────── */
.logo .site-logo,
.logo .custom-logo,
.logo img {
  width: 240px;
  height: auto;
  display: block;
}

/* ── Footer layout ────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: #fff;
  padding: 44px 0 36px;
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ── Footer logo — all variants same size ─────────────────── */
.footer-logo-wrap {
  margin-bottom: 12px;
}
.footer-logo-wrap .footer-logo,
.footer-logo-wrap .custom-logo,
.footer-logo-wrap img {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(1.1);
}

/* ── Footer text ──────────────────────────────────────────── */
.footer-line {
  margin: 2px 0;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  font-family: var(--font-body);
}
.footer-line a {
  color: var(--gold);
  text-decoration: none;
}
.footer-line a:hover { text-decoration: underline; }
.footer-copy {
  margin-top: 14px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.4) !important;
  letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════════════
 * v14 — Promo Banner + What's in Store card links
 * ══════════════════════════════════════════════════════════════ */

/* Promo banner — full-width dark section */
.pagelayer-row .promo-banner-row,
.home-pagelayer-area [class*="pagelayer-row"]:first-child {
  min-height: 340px;
}

/* Ensure promo image fills its column at full height */
.home-pagelayer-area .pagelayer-col .pagelayer-image-holder img {
  width: 100%;
  object-fit: cover;
}

/* What's in store cards — hover lift */
.home-pagelayer-area .pagelayer-col {
  transition: box-shadow .2s, transform .2s;
}
.home-pagelayer-area .pagelayer-col:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
  transform: translateY(-2px);
}

/* Card linked headings */
.home-pagelayer-area .pagelayer-heading-holder a {
  color: #c9a96e;
  text-decoration: none;
}
.home-pagelayer-area .pagelayer-heading-holder a:hover {
  text-decoration: underline;
  opacity: .8;
}

/* ══════════════════════════════════════════════════════════════
 * v15 — Full-width hero banner with overlay text
 * ══════════════════════════════════════════════════════════════ */

/* ── Banner overlay wrapper ─────────────────────────────────── */
.minas-banner-overlay {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 8vw 80px calc((100vw - min(1180px,92vw)) / 2 + min(1180px,92vw) * 0.04);
  background: linear-gradient(
    100deg,
    rgba(10,9,8,.80) 0%,
    rgba(10,9,8,.65) 45%,
    rgba(10,9,8,.15) 75%,
    rgba(10,9,8,.00) 100%
  );
  box-sizing: border-box;
}

/* ── Eyebrow ─────────────────────────────────────────────────── */
.minas-banner-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

/* ── Headline ────────────────────────────────────────────────── */
.minas-banner-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  line-height: .95;
  color: #ffffff;
  margin: 0 0 22px;
  max-width: 560px;
}

/* ── Sub-text ────────────────────────────────────────────────── */
.minas-banner-sub {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255,255,255,.80);
  max-width: 420px;
  margin: 0 0 36px;
}

/* ── CTA button row ──────────────────────────────────────────── */
.minas-banner-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.minas-btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background: var(--gold);
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--gold);
  transition: background .15s, color .15s;
}
.minas-btn-primary:hover {
  background: transparent;
  color: var(--gold) !important;
}

.minas-btn-outline {
  display: inline-block;
  padding: 14px 28px;
  background: transparent;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.55);
  transition: background .15s, border-color .15s, color .15s;
}
.minas-btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff !important;
}

/* ── Ensure background image fills the Pagelayer row ─────────── */
.home-pagelayer-area .pagelayer-row-holder {
  position: relative;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .minas-banner-overlay {
    min-height: 420px;
    padding: 56px 24px 56px 24px;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg,
      rgba(10,9,8,.75) 0%,
      rgba(10,9,8,.55) 60%,
      rgba(10,9,8,.20) 100%
    );
  }
  .minas-banner-title { font-size: clamp(36px,10vw,56px); max-width:100%; }
  .minas-banner-sub   { max-width: 100%; font-size: 15px; }
  .minas-banner-btns  { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
 * v16 — Page background, spacing, and layout fixes
 * ══════════════════════════════════════════════════════════════ */

/* ── Global background: light gold ─────────────────────────── */
body {
  background: #f7f1e6;
}

/* ── Home hero info & What's in store — light gold bg ─────── */
.home-pagelayer-area {
  background: #f7f1e6;
}

/* ── Spacer row between banner and hero info ─────────────────── */
.minas-spacer-row {
  height: 32px;
  background: #f7f1e6;
}

/* ── Prom & Grad page — light gold bg, black text ───────────── */
.pg-intro-section {
  background: #f7f1e6;
  padding: 60px 0 32px;
}
.pg-cards-section {
  background: #f7f1e6;
  padding: 0 0 64px;
}
.pg-intro h1,
.pg-intro p,
.designer-intro h1,
.designer-intro p {
  color: #171514;
}
.pg-pagelayer-area {
  background: #f7f1e6;
  padding: 0 0 64px;
}

/* Prom & Grad and Designer Pagelayer rows — force light gold bg */
.pg-pagelayer-area .pagelayer-row,
.pg-pagelayer-area [class*="pagelayer-row"] {
  background-color: #f7f1e6 !important;
}

/* Card text: black */
.pg-pagelayer-area .pagelayer-heading-holder,
.pg-pagelayer-area .pagelayer-heading-holder h1,
.pg-pagelayer-area .pagelayer-heading-holder h2,
.pg-pagelayer-area .pagelayer-heading-holder h3 {
  color: #171514 !important;
}
.pg-pagelayer-area .pagelayer-text-holder,
.pg-pagelayer-area .pagelayer-text-holder p {
  color: #171514 !important;
}

/* ── Review page — justified, inset content ─────────────────── */
.reviews-pagelayer-area {
  background: #f7f1e6;
}
.reviews-pagelayer-area .pagelayer-row-stretch-fixed .pagelayer-row-holder {
  max-width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ── Contact page — justified, inset content ────────────────── */
.contact-pagelayer-area {
  background: #f7f1e6;
}
.contact-pagelayer-area .pagelayer-row-stretch-fixed .pagelayer-row-holder {
  max-width: min(1180px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* ── What's in store — 2 cards, centered ───────────────────── */
.home-pagelayer-area .pagelayer-col:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
  transform: translateY(-2px);
}

/* ── Card titles: black text ─────────────────────────────────── */
.home-pagelayer-area .pagelayer-heading-holder a {
  color: #171514 !important;
  text-decoration: none;
}
.home-pagelayer-area .pagelayer-heading-holder a:hover {
  color: #c9a96e !important;
}

/* ── Responsive: stack review/contact rows on mobile ─────────── */
@media (max-width: 768px) {
  .reviews-pagelayer-area .pagelayer-row-holder,
  .contact-pagelayer-area .pagelayer-row-holder {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}