/*
Theme Name: Morning Glory Salon
Theme URI: https://morningglory.com.pk/
Author: Morning Glory Beauty Clinic
Description: A custom, responsive WordPress theme for Morning Glory Beauty Clinic.
Version: 1.1.11
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: morning-glory-salon
*/

:root {
  --mg-ink: #281c18;
  --mg-muted: #6f5f58;
  --mg-copper: #a34f27;
  --mg-copper-dark: #78371d;
  --mg-copper-light: #d59a77;
  --mg-cream: #fffaf5;
  --mg-ivory: #f8eee5;
  --mg-blush: #f1ddd0;
  --mg-line: rgba(120, 55, 29, 0.22);
  --mg-white: #ffffff;
  --mg-shadow: 0 24px 70px rgba(72, 37, 23, 0.12);
  --mg-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mg-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mg-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mg-ink);
  background: var(--mg-cream);
  font-family: var(--mg-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--mg-copper-dark); }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--mg-copper-light); outline-offset: 3px; }

.mg-container { width: min(calc(100% - 2rem), var(--mg-max)); margin-inline: auto; }
.mg-section { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.mg-section--soft { background: var(--mg-ivory); }
.mg-section--copper { color: var(--mg-white); background: var(--mg-copper-dark); }
.mg-eyebrow {
  margin: 0 0 0.8rem;
  color: var(--mg-copper);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mg-section--copper .mg-eyebrow { color: #f4c7aa; }
.mg-display, h1, h2, h3 {
  font-family: var(--mg-serif);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { margin: 0; font-size: clamp(3.1rem, 8vw, 7rem); letter-spacing: -0.045em; }
h2 { margin: 0; font-size: clamp(2.25rem, 5vw, 4.6rem); letter-spacing: -0.035em; }
h3 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 2rem); }
p { text-wrap: pretty; }
.mg-lede { max-width: 46rem; color: var(--mg-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.mg-section--copper .mg-lede { color: #f4ddd0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  top: 1rem; left: 1rem; z-index: 100000;
  width: auto; height: auto; padding: 0.75rem 1rem;
  clip: auto; background: var(--mg-white); color: var(--mg-ink);
}

.mg-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--mg-line);
  background: rgba(255, 250, 245, 0.94);
  backdrop-filter: blur(14px);
}
.admin-bar .mg-site-header { top: 32px; }
.mg-header-inner {
  min-height: 5.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.mg-brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.mg-logo-mark {
  width: 5.4rem;
  height: 4.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.mg-logo-mark img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  mix-blend-mode: multiply;
}
.mg-brand-copy { display: grid; line-height: 1.05; }
.mg-brand-copy strong { font-family: var(--mg-serif); font-size: 1.28rem; font-weight: 600; }
.mg-brand-copy span { margin-top: 0.28rem; color: var(--mg-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.mg-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.mg-nav .menu-item { list-style: none; }
.mg-nav a { position: relative; font-size: 0.88rem; font-weight: 650; text-decoration: none; }
.mg-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -0.4rem;
  height: 1px; background: var(--mg-copper);
  transition: right 180ms ease;
}
.mg-nav a:hover::after, .mg-nav .current-menu-item > a::after { right: 0; }
.mg-menu-toggle {
  display: none;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--mg-line);
  background: transparent;
  color: var(--mg-ink);
}

.mg-hero {
  position: relative;
  overflow: hidden;
  min-height: min(790px, calc(100vh - 5.2rem));
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--mg-line);
  background:
    radial-gradient(circle at 82% 18%, rgba(213, 154, 119, 0.32), transparent 25rem),
    linear-gradient(125deg, var(--mg-cream) 0 57%, var(--mg-ivory) 57% 100%);
}
.mg-hero::before {
  content: "MG";
  position: absolute;
  right: -0.03em; bottom: -0.32em;
  color: rgba(163, 79, 39, 0.055);
  font-family: var(--mg-serif);
  font-size: clamp(18rem, 43vw, 42rem);
  line-height: 1;
  pointer-events: none;
}
.mg-hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.mg-hero-copy { padding: clamp(4rem, 8vw, 8rem) 0; }
.mg-hero-copy h1 em { color: var(--mg-copper); font-style: italic; font-weight: 400; }
.mg-hero-copy .mg-lede { margin: 1.6rem 0 0; max-width: 38rem; }
.mg-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.mg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.78rem 1.25rem;
  border: 1px solid var(--mg-copper-dark);
  background: var(--mg-copper-dark);
  color: var(--mg-white);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}
.mg-button:hover { color: var(--mg-white); background: var(--mg-copper); transform: translateY(-2px); }
.mg-button--ghost { color: var(--mg-copper-dark); background: transparent; }
.mg-button--ghost:hover { color: var(--mg-white); }
.mg-hours-card {
  position: relative;
  min-height: 25rem;
  display: grid;
  align-content: end;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--mg-line);
  border-radius: 12rem 12rem 0 0;
  background:
    linear-gradient(to top, rgba(120, 55, 29, 0.96), rgba(120, 55, 29, 0.08)),
    repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,.12) 0 1px, transparent 1px 16px),
    var(--mg-copper);
  color: var(--mg-white);
  box-shadow: var(--mg-shadow);
}
.mg-hours-card::before { content: "✦"; position: absolute; top: 22%; left: 50%; transform: translateX(-50%); font-size: 3.4rem; color: #f4c7aa; }
.mg-hours-card p { margin: 0.25rem 0; }
.mg-hours-card strong { font-family: var(--mg-serif); font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 500; }

.mg-intro-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.mg-rule { width: 4rem; height: 1px; margin: 1.5rem 0; background: var(--mg-copper); }
.mg-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.mg-stat { padding-top: 1.2rem; border-top: 1px solid var(--mg-line); }
.mg-stat strong { display: block; color: var(--mg-copper-dark); font-family: var(--mg-serif); font-size: 2.4rem; font-weight: 500; }
.mg-stat span { color: var(--mg-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.mg-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.mg-service-card {
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.mg-service-card:hover { transform: translateY(-5px); border-color: var(--mg-copper); background: var(--mg-white); }
.mg-service-card .mg-number { color: var(--mg-copper); font-family: var(--mg-serif); font-size: 0.9rem; }
.mg-service-card p { margin: 0.8rem 0 0; color: var(--mg-muted); }
.mg-service-card .mg-arrow { align-self: flex-end; color: var(--mg-copper); font-size: 1.5rem; }

.mg-service-card--with-image {
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  background: var(--mg-white);
}
.mg-service-card--with-image .mg-number {
  padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.6rem) 0;
}
.mg-service-card--with-image > div {
  padding: 0 clamp(1.2rem, 2.4vw, 1.6rem);
}
.mg-service-card--with-image .mg-arrow {
  margin-top: auto;
  padding: 1rem clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.6rem);
}
.mg-service-card-image {
  width: 100%;
  margin: 1rem 0 1.15rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mg-ivory);
}
.mg-service-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.mg-feature { padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.28); }
.mg-feature p { color: #f4ddd0; }

.mg-page-hero { padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--mg-line); background: var(--mg-ivory); }
.mg-page-hero h1 { max-width: 13ch; }
.mg-page-hero .mg-lede { margin-top: 1.4rem; }

.mg-category-nav {
  position: sticky;
  top: 5.2rem;
  z-index: 30;
  overflow-x: visible;
  border-bottom: 1px solid var(--mg-line);
  background: rgba(255, 250, 245, 0.96);
  backdrop-filter: blur(12px);
}
.admin-bar .mg-category-nav { top: calc(5.2rem + 32px); }
.mg-category-nav-inner { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.75rem 0; }
.mg-category-tab {
  flex: 0 0 auto;
  padding: 0.65rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--mg-muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.mg-category-tab:hover { border-color: var(--mg-line); color: var(--mg-copper-dark); background: var(--mg-ivory); }
.mg-category-tab[aria-selected="true"] { border-color: var(--mg-copper-dark); color: var(--mg-white); background: var(--mg-copper-dark); }
.mg-category-tab:focus-visible { outline-offset: 2px; }
.mg-catalogue { display: grid; }
.mg-catalogue-section { scroll-margin-top: 9.5rem; }
.mg-catalogue-section[hidden] { display: none; }
.mg-catalogue-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--mg-copper-dark); }
.mg-catalogue-heading span { color: var(--mg-muted); font-size: 0.82rem; }
.mg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mg-price-table { width: 100%; border-collapse: collapse; }
.mg-price-table th { color: var(--mg-muted); font-size: 0.72rem; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.mg-price-table th, .mg-price-table td { padding: 1rem 0.7rem; border-bottom: 1px solid var(--mg-line); vertical-align: top; }
.mg-price-table th:first-child, .mg-price-table td:first-child { padding-left: 0; }
.mg-price-table th:last-child, .mg-price-table td:last-child { padding-right: 0; text-align: right; }
.mg-price-table .mg-service-name { font-family: var(--mg-serif); font-size: 1.15rem; font-weight: 600; }
.mg-price-table .mg-variant, .mg-price-table .mg-note { color: var(--mg-muted); font-size: 0.86rem; }
.mg-price-table .mg-price { white-space: nowrap; font-weight: 750; }

.mg-deal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; }
.mg-deal-card { position: relative; min-height: 24rem; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border: 1px solid var(--mg-line); background: var(--mg-white); }
.mg-deal-card:nth-child(4n+1), .mg-deal-card:nth-child(4n+4) { background: var(--mg-copper-dark); color: var(--mg-white); }
.mg-deal-card::after { content: attr(data-number); position: absolute; right: -0.03em; bottom: -0.35em; color: rgba(163,79,39,.09); font-family: var(--mg-serif); font-size: 15rem; line-height: 1; }
.mg-deal-card:nth-child(4n+1)::after, .mg-deal-card:nth-child(4n+4)::after { color: rgba(255,255,255,.08); }
.mg-deal-card .mg-price-large { margin: 1.1rem 0; color: var(--mg-copper); font-family: var(--mg-serif); font-size: 2.6rem; }
.mg-deal-card:nth-child(4n+1) .mg-price-large, .mg-deal-card:nth-child(4n+4) .mg-price-large { color: #f4c7aa; }
.mg-deal-card p { position: relative; z-index: 1; max-width: 34rem; }

.mg-content { max-width: 760px; }
.mg-content > * + * { margin-top: 1.2rem; }
.mg-content h2 { margin-top: 3rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.mg-content h3 { margin-top: 2rem; }
.mg-content a { color: var(--mg-copper-dark); }

.mg-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1rem; margin-top: 3rem; }
.mg-contact-card { padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--mg-line); background: var(--mg-white); }
.mg-contact-card dl { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; }
.mg-contact-card dt { color: var(--mg-muted); font-size: 0.76rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-contact-card dd { margin: 0; }
.mg-contact-card a { color: var(--mg-copper-dark); font-weight: 700; }
.mg-social-links { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; }
.mg-placeholder-note { padding: 1rem 1.2rem; border-left: 3px solid var(--mg-copper); background: var(--mg-ivory); color: var(--mg-muted); }

.mg-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mg-post-card { padding: 1.5rem; border: 1px solid var(--mg-line); background: var(--mg-white); }
.mg-post-card time { color: var(--mg-muted); font-size: 0.78rem; }
.mg-post-card h2 { margin-top: 0.7rem; font-size: 1.8rem; }

.mg-site-footer { padding: 4rem 0 2rem; background: var(--mg-ink); color: #f7e8de; }
.mg-site-footer .mg-logo-mark { width: 6.4rem; height: 5.6rem; padding: 0.35rem; border-radius: 0.35rem; background: var(--mg-cream); }
.mg-footer-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 0.7fr; gap: 3rem; }
.mg-site-footer .mg-brand-copy span, .mg-site-footer p, .mg-site-footer a { color: #d8c7bd; }
.mg-site-footer a { text-decoration: none; }
.mg-footer-links { display: grid; gap: 0.55rem; align-content: start; }
.mg-footer-title { margin-bottom: 0.7rem; color: #f4c7aa; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.mg-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); color: #bfaea5; font-size: 0.78rem; }

@media (max-width: 900px) {
  .admin-bar .mg-site-header { top: 46px; }
  .mg-category-nav { overflow-x: auto; }
  .mg-category-nav-inner { flex-wrap: nowrap; white-space: nowrap; }
  .mg-menu-toggle { display: inline-flex; }
  .mg-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    padding: 1.2rem max(1rem, calc((100vw - var(--mg-max)) / 2));
    border-bottom: 1px solid var(--mg-line);
    background: var(--mg-cream);
    flex-direction: column;
    align-items: flex-start;
  }
  .mg-nav.is-open { display: flex; }
  .mg-hero-grid, .mg-intro-grid, .mg-contact-grid { grid-template-columns: 1fr; }
  .mg-hero { min-height: auto; }
  .mg-hours-card { min-height: 20rem; max-width: 28rem; margin-bottom: 4rem; }
  .mg-card-grid, .mg-feature-grid, .mg-post-list { grid-template-columns: repeat(2, 1fr); }
  .mg-footer-grid { grid-template-columns: 1fr 1fr; }
  .mg-footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .mg-logo-mark { width: 4.3rem; height: 3.75rem; }
  .mg-site-footer .mg-logo-mark { width: 5.4rem; height: 4.7rem; }
  .mg-brand-copy strong { font-size: 1.05rem; }
  .mg-brand-copy span { display: none; }
  .mg-card-grid, .mg-feature-grid, .mg-deal-grid, .mg-post-list, .mg-stat-row, .mg-footer-grid { grid-template-columns: 1fr; }
  .mg-footer-grid > :first-child { grid-column: auto; }
  .mg-catalogue-heading { align-items: start; flex-direction: column; }
  .mg-price-table { min-width: 650px; }
  .mg-price-table th, .mg-price-table td { padding: 0.85rem 0.35rem; }
  .mg-contact-card dl { grid-template-columns: 1fr; gap: 0.25rem; }
  .mg-contact-card dd { margin-bottom: 1rem; }
  .mg-footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Bridal and party catalogue. */
.page-id-53 .mg-page-hero h1 { max-width: none; font-size: 48px; letter-spacing: 0; }
.page-id-53 .mg-page-hero { padding: 28px 0; }
.page-id-53 .mg-content { max-width: 1100px; }
.page-id-53 .mg-content h2 { font-size: 36px; letter-spacing: 0; margin-top: 16px; }
.mg-makeup-page h3, .mg-makeup-page th { letter-spacing: 0; }
.mg-makeup-page td, .mg-makeup-page th { vertical-align: top; }
.page-id-27 .mg-deal-card h2 { font-size: 32px; letter-spacing: 0; }
.page-id-27 .mg-deal-card h3 { font-size: 26px; letter-spacing: 0; }
#occasion-deals { font-size: 36px; letter-spacing: 0; }
.mg-deal-card::after { pointer-events: none; }
.mg-deal-card ul { position: relative; z-index: 1; }
@media (min-width: 901px) and (max-width: 1100px) {
  .mg-menu-toggle { display: inline-flex; }
  .mg-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: 20px 16px; border-bottom: 1px solid var(--mg-line); background: var(--mg-cream); flex-direction: column; align-items: flex-start; }
  .mg-nav.is-open { display: flex; }
}
@media (max-width: 620px) {
  .page-id-53 .mg-page-hero h1 { font-size: 36px; }
  .page-id-53 .mg-content h2, #occasion-deals { font-size: 30px; }
}