/*
Theme Name: Mona
Description: Seun Beauty & Skincare — Stitch "Serene Skin Editorial" design (seun.vn)
Author: Mona
Version: 1.0.0
Text Domain: mona
*/

:root {
  --mona-primary:     #4d6151;
  --mona-primary-ink: #ffffff;
  --mona-accent:      #5A6B5C;
  --mona-ink:         #181c20;
  --mona-bg:          #f7f9ff;
  --mona-line:        #E5E7EB;
  --mona-soft:        #FDF5F2;
  --mona-font-head:   'Libre Caslon Text', serif;
  --mona-font-body:   'Be Vietnam Pro', sans-serif;
}

html { background: var(--mona-bg); overflow-x: hidden; }

body {
  background: var(--mona-bg);
  color: var(--mona-ink);
  font-family: var(--mona-font-body);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { color: var(--mona-ink); font-family: var(--mona-font-head); }

img { max-width: 100%; height: auto; display: block; }

/* =============================================
   BASE LAYOUT — monatheme
   ============================================= */

.main {
  position: relative;
  z-index: 1;
  min-height: 94vh;
}

.container {
    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 15px;
}

iframe {
  vertical-align: middle;
}

/* =============================================
   ROW / COL SYSTEM — 12 columns
   ============================================= */

.row {
  --cg: 24px;
  --rg: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 calc(var(--cg) * -0.5) calc(var(--rg) * -1);
}

.row.small {
  --cg: 16px;
  --rg: 16px;
}

@media screen and (max-width: 1200px) {
  .row {
    --cg: 12px;
    --rg: 12px;
  }
}

.rows {
  --cg: 24px;
  --rg: 24px;
  margin: 0 calc(var(--cg) * -0.5);
}

@media screen and (max-width: 1200px) {
  .rows {
    --cg: 12px;
    --rg: 12px;
  }
}

.rows .col {
  margin-bottom: 0;
}

.col {
  width: 100%;
  padding: 0 calc(var(--cg) / 2);
  margin-bottom: var(--rg);
}

.col-11 { width: 91.6666666667%; }
.col-10 { width: 83.3333333333%; }
.col-9  { width: 75%; }
.col-8  { width: 66.6666666667%; }
.col-7  { width: 58.3333333333%; }
.col-6  { width: 50%; }
.col-5  { width: 41.6666666667%; }
.col-4  { width: 33.3333333333%; }
.col-3  { width: 25%; }
.col-2  { width: 16.6666666667%; }
.col-1  { width: 8.3333333333%; }
.col-5i { width: 20%; }
.col-4i { width: 25%; }

/* =============================================
   MONA CONTENT — rich text / wysiwyg
   ============================================= */

.mona-content strong,
.mona-content b { font-weight: bold; }

.mona-content em,
.mona-content i { font-style: italic; }

.mona-content h1,
.mona-content h2,
.mona-content h3,
.mona-content h4,
.mona-content h5,
.mona-content h6 {
  line-height: 1.3;
  margin-bottom: 0.5em;
  margin-top: 0.6em;
  font-weight: 700;
}

.mona-content h1 { font-size: 1.7em; }
.mona-content h2 { font-size: 1.6em; }
.mona-content h3 { font-size: 1.25em; }
.mona-content h4 { font-size: 1.125em; }
.mona-content h5 { font-size: 1em; }
.mona-content h6 { font-size: 0.85em; }

.mona-content p { margin-top: 0.4em; }

.mona-content ul,
.mona-content ol {
  margin: 1em 0;
  list-style-position: inside;
}

.mona-content ul ul,
.mona-content ul ol,
.mona-content ol ul,
.mona-content ol ol { margin-left: 1em; }

.mona-content ul { list-style-type: disc; }
.mona-content ol { list-style-type: decimal; }
.mona-content ul ul,
.mona-content ol ul { list-style-type: circle; }
.mona-content ol ol,
.mona-content ul ol { list-style-type: lower-latin; }

.mona-content img,
.mona-content iframe {
  max-width: 100% !important;
  height: auto;
}

.mona-content blockquote {
  background: var(--mona-soft);
  border-left: 10px solid var(--mona-primary);
  margin: 1em 0;
  padding: 1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.mona-content blockquote::before {
  color: var(--mona-primary);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.mona-content blockquote p { display: inline; }

.mona-content table {
  border-collapse: collapse;
  max-width: 100%;
  margin: 1em 0;
  border: 1px solid var(--mona-line);
}

.mona-content table th,
.mona-content table td {
  border-right: 1px solid var(--mona-line);
  border-bottom: 1px solid var(--mona-line);
  padding: 5px 10px;
  vertical-align: middle;
}

.mona-content .mona-youtube-wrap {
  position: relative;
  height: 0;
  padding-top: 56.25%;
}

.mona-content .mona-youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mona-content .mona-table-wrap {
  overflow: auto;
}

/* =============================================
   Stitch nav — no underline on hover
   ============================================= */
.stitch-nav a:hover, .stitch-nav a { text-decoration: none !important; }

/* =============================================
   Mobile Drawer
   ============================================= */
.hd-nav {
  position: fixed;
  top: 0; right: 0;
  z-index: 200;
  width: 280px;
  height: 100%;
  background: var(--mona-bg);
  box-shadow: -4px 0 32px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.hd-nav.is-open { transform: translateX(0); }

.hd-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hd-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.no-scroll { overflow: hidden; touch-action: none; overscroll-behavior: none; }

.hd-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--mona-line);
  flex-shrink: 0;
}
.hd-nav__brand {
  font-family: var(--mona-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--mona-primary);
}
.hd-nav__brand:hover { text-decoration: none; }
.hd-nav__close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: none; cursor: pointer;
  color: var(--mona-ink); border-radius: 6px;
  transition: background 0.15s; padding: 0;
}
.hd-nav__close:hover { background: var(--mona-soft); }

.hd-nav__body { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }

.hd-mobile-item {
  display: block;
  padding: 13px 20px;
  font-family: var(--mona-font-head);
  font-size: 0.92rem; font-weight: 600;
  color: var(--mona-ink);
  border-bottom: 1px solid var(--mona-line);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.hd-mobile-item:hover { color: var(--mona-primary); background: var(--mona-soft); text-decoration: none; }
.hd-mobile-item--active { color: var(--mona-primary); border-left: 3px solid var(--mona-primary); padding-left: 17px; }

/* =============================================
   Home — misc helpers
   ============================================= */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }