/*
Theme Name:   Prop House
Theme URI:    https://prophouse.studio
Description:  Astra child theme for Prop House — warm editorial aesthetic for an Asian
              wedding and events prop hire studio. Designed for Elementor Free page building.
              80% mobile-optimised.
Author:       Prop House Studio
Author URI:   https://prophouse.studio
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  prop-house
Tags:         custom-colors, custom-logo, full-width-template, custom-menu
*/


/* =================================================================
   1. COLOUR TOKENS
   Use these as CSS classes (e.g. .ph-bg-ivory) or as var() in
   Elementor's "Custom CSS" box for any section or widget.
   ================================================================= */
:root {
  /* Warm neutrals */
  --ph-ivory:       #F6F1EA;   /* page background */
  --ph-cream:       #EFE7DB;   /* section backgrounds, feature bands */
  --ph-bone:        #E6DCCC;   /* image placeholders */
  --ph-paper:       #FBF8F3;   /* card backgrounds, nav bar */
  --ph-ink:         #221C16;   /* primary text, dark sections */
  --ph-ink-soft:    #3B2F26;   /* body copy */
  --ph-taupe:       #8A7866;   /* muted labels, metadata */
  --ph-taupe-soft:  #B8A893;   /* footer column headers */
  --ph-line:        #D9CFBE;   /* borders, dividers */

  /* Accents — use sparingly */
  --ph-blush:       #D6B5A0;   /* script highlights */
  --ph-sage:        #A3A893;   /* occasional green-grey accent */
  --ph-gold:        #B89763;   /* gold rim details */
  --ph-amber:       #c9813a;   /* topbar dots, stat numbers */

  /* Typography stacks */
  --ph-serif:  "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ph-script: "Mrs Saint Delafield", "Allura", cursive;
  --ph-sans:   "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ph-mono:   "JetBrains Mono", "Courier New", monospace;

  /* Layout */
  --ph-container:  1320px;
  --ph-container-w: 1480px;
  --ph-nav-h:      66px;
  --ph-topbar-h:   34px;
}

/* Background utility classes (handy in Elementor's "CSS Classes" field) */
.ph-bg-ivory  { background-color: var(--ph-ivory)  !important; }
.ph-bg-cream  { background-color: var(--ph-cream)  !important; }
.ph-bg-bone   { background-color: var(--ph-bone)   !important; }
.ph-bg-paper  { background-color: var(--ph-paper)  !important; }
.ph-bg-ink    { background-color: var(--ph-ink)    !important; color: var(--ph-paper); }


/* =================================================================
   2. BASE RESET & TYPOGRAPHY
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ph-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ph-ink);
  background-color: var(--ph-ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ph-serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}

p  { margin: 0 0 1em; }
em { font-style: italic; }
a  { color: inherit; text-decoration: none; transition: color 0.2s; }
img { display: block; max-width: 100%; height: auto; }


/* =================================================================
   3. ASTRA OVERRIDES
   Neutralise Astra defaults that conflict with our design system.
   ================================================================= */

/* Body background */
body, .ast-separate-container { background-color: var(--ph-ivory) !important; }

/* Remove Astra link colour */
a, a:visited { color: inherit; }
a:hover { color: var(--ph-taupe); }

/* Content area: remove default Astra entry padding when Elementor is active */
.elementor-page .entry-content,
.ast-page-builder-template .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Full-width Elementor sections */
.elementor-section.elementor-section-full_width { max-width: 100%; }


/* =================================================================
   4. LAYOUT HELPERS
   ================================================================= */
.ph-container      { width: 100%; max-width: var(--ph-container);   margin: 0 auto; padding: 0 40px; }
.ph-container-wide { width: 100%; max-width: var(--ph-container-w); margin: 0 auto; padding: 0 40px; }

section { scroll-margin-top: calc(var(--ph-nav-h) + var(--ph-topbar-h) + 8px); }


/* =================================================================
   5. TOPBAR
   The slim strip above the nav with location, booking status, phone.
   Hidden on mobile — too dense on small screens.
   ================================================================= */
.ph-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--ph-topbar-h);
  padding: 0 40px;
  background: var(--ph-paper);
  border-bottom: 1px solid rgba(34, 28, 22, 0.06);
  font-family: var(--ph-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-taupe);
}

.ph-topbar a { color: inherit; }
.ph-topbar a:hover { color: var(--ph-ink); }

.ph-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--ph-amber);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 10px 2px;
}


/* =================================================================
   6. NAVIGATION — Desktop
   Split layout: Left group | Brand centre | Right group
   ================================================================= */
.ph-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ph-ivory);
  border-bottom: 1px solid rgba(34, 28, 22, 0.07);
  transition: box-shadow 0.25s;
}

.ph-nav.is-scrolled {
  box-shadow: 0 2px 24px -8px rgba(34, 28, 22, 0.18);
}

.ph-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--ph-nav-h);
  max-width: var(--ph-container-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* Nav groups */
.ph-nav__group             { display: flex; align-items: center; }
.ph-nav__group--left       { justify-content: flex-start; }
.ph-nav__group--right      { justify-content: flex-end; }

/* Reset WordPress nav menu UL */
.ph-nav__menu,
.ph-nav__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.ph-nav__menu li { margin: 0; }

.ph-nav__menu > li > a {
  font-family: var(--ph-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-ink-soft);
  transition: color 0.2s;
  white-space: nowrap;
}

.ph-nav__menu > li > a:hover,
.ph-nav__menu .current-menu-item > a,
.ph-nav__menu .current_page_item > a,
.ph-nav__menu .current_page_ancestor > a {
  color: var(--ph-taupe);
}

/* Brand wordmark (centre column) */
.ph-nav__brand {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  text-decoration: none;
}

.ph-nav__wordmark {
  font-family: var(--ph-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ph-ink);
  white-space: nowrap;
  line-height: 1;
}

.ph-nav__logo {
  max-height: 40px;    /* renders ~215px wide on desktop — matches nav column width nicely */
  width: auto;
  display: block;
}

/* The script ampersand in the wordmark */
.ph-amp {
  font-family: var(--ph-script);
  font-style: normal;
  font-size: 1.18em;
}


/* =================================================================
   7. HAMBURGER BUTTON  (shown on mobile only via media query)
   ================================================================= */
.ph-hamburger {
  display: none;           /* overridden at ≤767px */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.ph-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ph-ink);
  transition: transform 0.3s ease, opacity 0.25s ease;
  transform-origin: center;
  border-radius: 1px;
}

/* Animated to × when active */
.ph-hamburger.is-active span:nth-child(1) { transform: translateY(6.5px)  rotate(45deg); }
.ph-hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ph-hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* =================================================================
   8. MOBILE NAV DRAWER
   Slide-down panel beneath the sticky nav bar.
   Shown as display:flex at ≤767px (via media query below).
   ================================================================= */
.ph-mobile-nav {
  display: none;                 /* shown at ≤767px */
  flex-direction: column;
  background: var(--ph-paper);
  border-bottom: 1px solid var(--ph-line);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.ph-mobile-nav.is-open {
  max-height: 640px;
  opacity: 1;
}

/* Reset WordPress nav menu inside drawer */
.ph-mobile-nav__menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.ph-mobile-nav__menu li {
  margin: 0;
  border-bottom: 1px solid rgba(34, 28, 22, 0.06);
}

.ph-mobile-nav__menu li:last-child { border-bottom: none; }

.ph-mobile-nav__menu a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  min-height: 52px;               /* comfortable touch target */
  font-family: var(--ph-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-ink-soft);
}

.ph-mobile-nav__menu a:hover,
.ph-mobile-nav__menu .current-menu-item > a { color: var(--ph-taupe); }

.ph-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 28px;
  border-top: 1px solid var(--ph-line);
  gap: 2px;
}

.ph-mobile-nav__footer a {
  font-family: var(--ph-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ph-taupe);
  padding: 6px 0;
  text-transform: uppercase;
}


/* =================================================================
   9. BUTTONS
   Use class="ph-btn" on any <a> or <button>.
   In Elementor, add "ph-btn" in the CSS Classes field of a button widget.
   ================================================================= */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  min-height: 48px;               /* touch-friendly */
  font-family: var(--ph-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ph-ink);
  color: var(--ph-paper);
  border: 1px solid var(--ph-ink);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.ph-btn:hover { background: transparent; color: var(--ph-ink); }

.ph-btn--ghost { background: transparent; color: var(--ph-ink); }
.ph-btn--ghost:hover { background: var(--ph-ink); color: var(--ph-paper); }

.ph-btn--light {
  background: var(--ph-paper);
  color: var(--ph-ink);
  border-color: var(--ph-paper);
}

.ph-btn .ph-arrow {
  font-family: var(--ph-serif);
  font-size: 16px;
  letter-spacing: 0;
}

/* Override Elementor's default button radius to match our pill style */
.elementor-button-wrapper .elementor-button {
  border-radius: 999px !important;
  font-family: var(--ph-sans) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}


/* =================================================================
   10. LINK ARROW
   Usage: <a class="ph-link-arrow" href="...">View collection →</a>
   ================================================================= */
.ph-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-family: var(--ph-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ph-ink);
  padding-bottom: 5px;
  transition: gap 0.2s, color 0.2s, border-color 0.2s;
}

.ph-link-arrow:hover {
  gap: 16px;
  color: var(--ph-taupe);
  border-color: var(--ph-taupe);
}


/* =================================================================
   11. TYPOGRAPHY HELPERS
   Add these as CSS Classes in Elementor widgets.
   ================================================================= */
.ph-eyebrow {
  font-family: var(--ph-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ph-taupe);
}

.ph-label {
  font-family: var(--ph-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ph-serif  { font-family: var(--ph-serif)  !important; font-weight: 400; }
.ph-script { font-family: var(--ph-script) !important; font-weight: 400; }
.ph-sans   { font-family: var(--ph-sans)   !important; }
.ph-mono   { font-family: var(--ph-mono)   !important; }

/* Colour text helpers */
.ph-c-taupe     { color: var(--ph-taupe);    }
.ph-c-blush     { color: var(--ph-blush);    }
.ph-c-gold      { color: var(--ph-gold);     }
.ph-c-ink-soft  { color: var(--ph-ink-soft); }
.ph-c-paper     { color: var(--ph-paper);    }


/* =================================================================
   12. UTILITY / SHARED ELEMENTS
   ================================================================= */
.ph-sep {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  vertical-align: middle;
  margin: 0 14px;
}

.ph-tick {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ph-blush);
  margin-right: 12px;
  vertical-align: middle;
  flex-shrink: 0;
}

.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  font-family: var(--ph-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ph-ink-soft);
  background: var(--ph-paper);
}

.ph-divider      { display: block; height: 1px; background: var(--ph-line);             border: none; margin: 0; }
.ph-divider-soft { display: block; height: 1px; background: rgba(34, 28, 22, 0.08);     border: none; margin: 0; }

/* Image aspect-ratio containers */
.ph-photo            { background: var(--ph-bone); overflow: hidden; }
.ph-photo img        { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-photo--portrait  { aspect-ratio: 3 / 4; }
.ph-photo--wide      { aspect-ratio: 4 / 3; }
.ph-photo--square    { aspect-ratio: 1 / 1; }
.ph-photo--tall      { aspect-ratio: 2 / 3; }

/* Fine noise texture (for cream bands matching the static design) */
.ph-tex {
  background-image:
    radial-gradient(rgba(34, 28, 22, 0.025) 1px, transparent 1px),
    radial-gradient(rgba(34, 28, 22, 0.02)  1px, transparent 1px);
  background-size: 22px 22px, 33px 33px;
  background-position: 0 0, 11px 11px;
}


/* =================================================================
   13. FOOTER
   ================================================================= */
.ph-footer {
  background: var(--ph-ink);
  color: var(--ph-paper);
  padding: 80px 40px 32px;
}

.ph-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  max-width: var(--ph-container);
  margin: 0 auto;
}

/* Brand column — logo image */
.ph-footer__logo-link {
  display: inline-block;
  margin-bottom: 20px;
}

.ph-footer__logo {
  max-width: 200px;    /* rendered width in footer column */
  height: auto;
  display: block;
  opacity: 0.92;
  transition: opacity 0.2s;
}

.ph-footer__logo-link:hover .ph-footer__logo { opacity: 1; }

.ph-footer__tagline {
  font-size: 13px;
  color: rgba(251, 248, 243, 0.6);
  max-width: 28ch;
  line-height: 1.65;
  margin: 0;
}

/* Link columns */
.ph-footer__col h4 {
  font-family: var(--ph-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ph-taupe-soft);
  margin-bottom: 22px;
}

.ph-footer__col ul,
.ph-footer__col .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ph-footer__col li,
.ph-footer__col .menu-item {
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(251, 248, 243, 0.78);
}

.ph-footer__col a { color: rgba(251, 248, 243, 0.78); }
.ph-footer__col a:hover { color: var(--ph-blush); }

/* Bottom bar */
.ph-footer__bottom {
  max-width: var(--ph-container);
  margin: 60px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 248, 243, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ph-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.55);
}


/* =================================================================
   14. ELEMENTOR INTEGRATION
   These rules ensure Elementor's widgets inherit our design system.
   ================================================================= */

/* Headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ph-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Body text */
.elementor-widget-text-editor {
  font-family: var(--ph-sans);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ph-ink-soft);
}

/* Divider widget */
.elementor-divider-separator {
  border-color: var(--ph-line) !important;
}

/* Image widget */
.elementor-widget-image img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Section default padding (override Elementor defaults to match our design) */
.elementor-section > .elementor-container {
  max-width: var(--ph-container-w);
}


/* =================================================================
   15. RESPONSIVE — TABLET  (768px–1024px)
   ================================================================= */
@media (max-width: 1024px) and (min-width: 768px) {

  .ph-topbar__contact { display: none; }   /* phone/email too wide */

  .ph-nav__menu { gap: 20px; }

  .ph-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}


/* =================================================================
   16. RESPONSIVE — MOBILE  (≤767px)
   80% of users are on mobile — this is the primary experience.
   ================================================================= */
@media (max-width: 767px) {

  /* ---- Topbar: hidden on mobile ---- */
  .ph-topbar { display: none; }

  /* ---- Nav: hamburger layout ---- */
  .ph-nav__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    max-width: 100%;
  }

  .ph-nav__group   { display: none; }   /* desktop groups hidden */
  .ph-nav__brand   { flex: 0 0 auto; }

  .ph-nav__wordmark { font-size: 20px; }

  /* Logo image on mobile: slightly shorter to fit the 60px nav bar */
  .ph-nav__logo { max-height: 30px; }

  .ph-hamburger { display: flex; }

  /* ---- Mobile drawer: shown ---- */
  .ph-mobile-nav { display: flex; }

  /* ---- Containers: tighter padding ---- */
  .ph-container,
  .ph-container-wide { padding: 0 20px; }

  /* ---- Buttons: full width ---- */
  .ph-btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Footer ---- */
  .ph-footer {
    padding: 56px 24px 28px;
  }

  .ph-footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ph-footer__bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-top: 40px;
  }

  /* ---- Elementor sections: fix side overflow ---- */
  .elementor-section {
    overflow-x: hidden;
  }
}


/* =================================================================
   17. SMALL MOBILE  (≤480px)
   ================================================================= */
@media (max-width: 480px) {

  .ph-footer__brand-name { font-size: 28px; }

  .ph-footer__brand-name .ph-amp { font-size: 36px; }
}


/* =================================================================
   18. NAV DROPDOWNS
   WordPress generates .menu-item-has-children on parent items
   and .sub-menu on child <ul> elements automatically.
   ================================================================= */

/* Ensure each top-level item is a positioning context */
.ph-nav__menu > li { position: relative; }

/* Caret on parent items */
.ph-nav__menu > .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ph-nav__menu > .menu-item-has-children > a::after {
  content: '↓';
  font-family: var(--ph-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.38;
}

/* Sub-menu panel — override the inherited flex-row from .ph-nav__menu ul */
.ph-nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  transform: translateX(-50%) translateY(-5px);
  background: var(--ph-paper);
  border: 1px solid var(--ph-line);
  min-width: 210px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
  box-shadow: 0 16px 48px -20px rgba(34, 28, 22, 0.18);
}

/* Open state — hover or keyboard focus */
.ph-nav__menu > li:hover > .sub-menu,
.ph-nav__menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Sub-menu links — override the top-level a style */
.ph-nav__menu .sub-menu > li > a {
  display: block;
  padding: 9px 20px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ph-ink-soft);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.ph-nav__menu .sub-menu > li > a:hover { background: var(--ph-ivory); color: var(--ph-ink); }


/* =================================================================
   19. BUTTON — LIGHT VARIANT HOVER
   .ph-btn--light is used on dark (ink-background) sections.
   ================================================================= */
.ph-btn--light:hover {
  background: transparent;
  color: var(--ph-paper);
  border-color: rgba(251, 248, 243, 0.55);
}