/*
Theme Name: MianWedding Custom v9-updated
Author: Generated by ChatGPT
Version: 1.0
*/
body { margin:0; font-family: 'Times New Roman', Times, serif; background:#F5EFE6; color:#222; padding-top: var(--header-offset, 0); transition: padding-top .18s ease; }
a { color: inherit; text-decoration:none; }

/* Header */
.site-header { padding:16px 20px; position:sticky; top:0; z-index:1100; background: rgba(245,239,230,0.96); backdrop-filter: blur(4px); transition: box-shadow .22s ease; }
.site-header.scrolled { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.site-header.menu-open { background: rgba(245,239,230,1); }

.site-branding { text-align:center; position:relative; }
.site-title { font-family: 'Dancing Script', cursive; font-size:50px !important; margin:0; color:#111; display:block; }
.site-description { font-family: 'Montserrat', sans-serif; font-size:13px; color:#666; margin:6px 0 0; }

/* Nav */
.main-nav { text-align:center; margin-top:8px; }
.main-nav ul { list-style:none; margin:0; padding:0; display:inline-flex; gap:28px; align-items:center; }
.main-nav a { font-weight:600; font-size:15px; color:#333; padding:8px 6px; display:inline-block; }

/* Active menu: color + weight, no underline */
.main-nav ul li.current-menu-item > a,
.main-nav ul li.current_page_item > a,
.main-nav ul li.current-menu-ancestor > a { color:#b66a49; font-weight:800; text-decoration:none; box-shadow:none; }

/* Submenu */
.main-nav li { position:relative; }
.main-nav li ul {
  display:block; opacity:0; visibility:hidden; position:absolute; left:50%; transform:translateX(-50%) translateY(-6px); top:calc(100% + 8px);
  background: #F5EFE6; padding:8px 6px; box-shadow:0 10px 30px rgba(0,0,0,0.06); border-radius:8px; min-width:220px; transition:all .22s ease; z-index:1200;
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.main-nav li ul li a { display:block; padding:8px 12px; white-space:nowrap; }
.main-nav a.has-submenu-trigger { cursor:default; }

/* Mobile */
.nav-toggle { display:none; position:absolute; right:18px; top:18px; background:transparent; border:0; cursor:pointer; }
.nav-toggle .bar { display:block; width:26px; height:3px; margin:5px 0; background:#333; border-radius:2px; }
.submenu-toggle { display:none; }
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:980px) {
  .main-nav ul { display:block; text-align:left; padding:10px 12px; max-width:320px; margin:0 auto; }
  .main-nav ul li { position:relative; padding-right:52px; }
  /* Reset submenu styles for mobile - make it static dropdown */
  .main-nav li ul {
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    padding-left:20px !important;
    border-radius:0 !important;
    display:none !important;
    margin-top:8px !important;
    margin-bottom:0 !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    min-width:auto !important;
    width:100% !important;
  }
  .main-nav li.open > ul { display:block !important; }
  .nav-toggle { display:block; }
  .site-branding { padding-right:60px; }
  .main-nav ul li ul li { padding-right:38px; margin:6px 0; }
  .submenu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0,0,0,0.06);
    color:#333;
    border:1px solid rgba(0,0,0,0.08);
    transition:background .18s ease, transform .18s ease;
  }
  .submenu-toggle::after {
    content:"+";
    font-size:20px;
    line-height:1;
    font-weight:600;
  }
  .main-nav li.open > .submenu-toggle {
    background:rgba(182,106,73,0.12);
    color:#b66a49;
  }
  .main-nav li.open > .submenu-toggle::after {
    content:"−";
  }
  .submenu-toggle:focus-visible {
    outline:2px solid #b66a49;
    outline-offset:2px;
  }
}

/* Hero and content */
.hero { min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; background-image:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.12)), url('assets/hero.jpg'); background-size:cover; background-position:center; color:#fff; padding:40px 16px; margin-bottom:18px; }

.section { padding:42px 16px; max-width:1100px; margin:0 auto; }

/* Prevent body scroll when menu open */
.no-scroll { overflow:hidden !important; }

/* small helper for submenu toggle button */
.submenu-toggle { background:transparent; border:0; padding:0 6px; cursor:pointer; font-size:16px; }

/* reduce top gap when title hidden */
.page-content h1, .page-content .elementor-heading-title { margin-top:0; }
.site-main .section { padding-top:24px; }


/* Mobile (and tablet) improved menu: overlay panel */
@media (max-width:980px) {
  /* make primary menu overlay to avoid layout shift */
  #primary-menu {
    position: fixed;
    top: var(--header-offset, 72px);
    right:0; left:0; bottom:0;
    background: rgba(245,239,230,0.98);
    z-index:1090;
    overflow:auto;
    padding: 20px 0 40px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .28s ease;
  }
  #primary-menu.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .main-nav ul { 
    display:block; 
    max-width:420px; 
    margin:0 auto; 
    padding: 20px; 
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .main-nav ul li { 
    margin:12px 0; 
    width:100%;
    box-sizing:border-box;
  }
  /* Ensure submenu stays inside menu container on mobile */
  .main-nav ul li ul { 
    padding-left:20px !important; 
    display:none !important; 
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    margin:8px 0 0 0 !important;
  }
  .main-nav ul li ul li {
    width:100% !important;
    margin:6px 0 !important;
    padding-right:0 !important;
  }
  .main-nav ul li ul li a {
    display:block !important;
    width:100% !important;
    white-space:normal !important;
    word-wrap:break-word !important;
    box-sizing:border-box !important;
  }
  .main-nav li.open > ul { display:block !important; }
  /* ensure no horizontal scroll or shift */
  html, body { -webkit-overflow-scrolling: touch; }
  /* overlay already created in JS, keep header on top */
  .site-header { position:fixed; top:0; left:0; right:0; z-index:1105; }
  .hero, .section { transition: none; }
  .site-header {
    backdrop-filter: none !important;    /* tắt blur */
    -webkit-backdrop-filter: none !important;
    background: rgba(245,239,230,1) !important; /* đục hoàn toàn */
  }
}