/*
Theme Name: Bay Area Oil
Description: Custom theme cho website Bay Area Oil.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mona
*/

/* CSS vars — giá trị thật do functions.php (mona_dynamic_css) ghi đè từ option. */
:root{
	--mona-primary:#0ea5e9;
	--mona-primary-ink:#ffffff;
	--mona-ink:#0f172a;
	--mona-bg:#ffffff;
	--mona-muted:#64748b;
	--mona-line:#e6e8ec;
	--mona-soft:#f6f8fa;
	--mona-radius:14px;
	--mona-maxw:1140px;
	--mona-font-head:"Inter",system-ui,-apple-system,sans-serif;
	--mona-font-body:"Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--mona-font-body);color:var(--mona-ink);background:var(--mona-bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--mona-primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--mona-font-head);line-height:1.25;font-weight:700;color:var(--mona-ink);margin:1.6em 0 .6em}
h1{font-size:2.1rem}h2{font-size:1.55rem}h3{font-size:1.25rem}
p,ul,ol{margin:0 0 1.1em}
blockquote{margin:1.4em 0;padding:.6em 1.2em;border-left:4px solid var(--mona-primary);background:var(--mona-soft);color:var(--mona-muted)}
table{width:100%;border-collapse:collapse;margin:1.4em 0}
th,td{border:1px solid var(--mona-line);padding:.6em .8em;text-align:left}
th{background:var(--mona-soft)}
code{background:var(--mona-soft);padding:.1em .4em;border-radius:6px;font-size:.9em}

.mona-wrap{max-width:var(--mona-maxw);margin:0 auto;padding:0 20px}
.mona-btn{display:inline-block;background:var(--mona-primary);color:var(--mona-primary-ink);padding:.7em 1.4em;border-radius:999px;font-weight:600;transition:opacity .15s}
.mona-btn:hover{opacity:.88;text-decoration:none}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}

/* Header */
.mona-header{border-bottom:1px solid var(--mona-line);background:var(--mona-bg);position:sticky;top:0;z-index:50}
.mona-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.mona-brand{font-family:var(--mona-font-head);font-weight:800;font-size:1.3rem;color:var(--mona-ink)}
.mona-brand img{max-height:40px;width:auto}
.mona-brand:hover{text-decoration:none}
.mona-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.mona-nav a{color:var(--mona-ink);font-weight:500;font-size:.97rem}
.mona-nav a:hover{color:var(--mona-primary);text-decoration:none}
.mona-nav .current-menu-item>a{color:var(--mona-primary)}
.mona-burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--mona-ink)}

/* Brand mark (logo placeholder) */
.mona-brand{display:flex;align-items:center;gap:10px}
.mona-brand__mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--mona-primary),var(--mona-accent));color:var(--mona-primary-ink);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;flex:0 0 auto;overflow:hidden}
.mona-brand__mark--img{background:none;padding:0}
.mona-brand__mark--img img{width:100%;height:100%;object-fit:cover;display:block}
.mona-brand__name{font-family:var(--mona-font-head);font-weight:800;font-size:1.25rem}

.mona-btn--ghost{background:transparent;color:var(--mona-ink);border:1.5px solid var(--mona-line)}
.mona-btn--ghost:hover{border-color:var(--mona-primary);color:var(--mona-primary);opacity:1}
.mona-btn--on-accent{background:#fff;color:var(--mona-ink)}

.mona-eyebrow{display:inline-block;font-family:var(--mona-font-head);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mona-primary);margin-bottom:14px}

/* Visual / placeholder (dùng cho hero/split/service khi chưa có ảnh) */
.mona-visual{border-radius:var(--mona-radius);overflow:hidden;line-height:0}
.mona-visual img{width:100%;height:100%;object-fit:cover;display:block}
.mona-visual--ph{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;line-height:1;background:
	radial-gradient(120% 120% at 0% 0%, color-mix(in srgb,var(--mona-primary) 26%, transparent), transparent 60%),
	radial-gradient(120% 120% at 100% 100%, color-mix(in srgb,var(--mona-accent) 30%, transparent), transparent 55%),
	var(--mona-soft)}
.mona-visual--ph::before{content:"";position:absolute;inset:0;background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:18px 18px;color:color-mix(in srgb,var(--mona-ink) 8%, transparent)}
.mona-visual__glyph{position:relative;font-size:3.4rem;color:color-mix(in srgb,var(--mona-primary) 60%, var(--mona-ink));opacity:.85}

/* Hero (front-page) */
.mona-hero{position:relative;padding:84px 0 76px;text-align:center;overflow:hidden;background:
	radial-gradient(90% 120% at 50% -10%, color-mix(in srgb,var(--mona-primary) 16%, transparent), transparent 60%),
	linear-gradient(180deg,var(--mona-soft),var(--mona-bg))}
.mona-hero__inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.mona-hero h1{font-size:2.9rem;margin:0 0 .35em;letter-spacing:-.02em}
.mona-hero__lead{font-size:1.18rem;color:var(--mona-muted);max-width:640px;margin:0 auto 1.6em}
.mona-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mona-hero--img{color:#fff}
.mona-hero--img .mona-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.mona-hero--img .mona-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(15,23,42,.78))}
.mona-hero--img h1,.mona-hero--img .mona-hero__lead{color:#fff}
.mona-hero--img .mona-eyebrow{color:#fff;opacity:.9}

/* Section shell */
.mona-section{padding:60px 0}
.mona-section--soft{background:var(--mona-soft)}
.mona-section--accent{background:linear-gradient(135deg,var(--mona-primary),var(--mona-accent));color:var(--mona-primary-ink)}
.mona-section__head{text-align:center;max-width:680px;margin:0 auto 38px}
.mona-section__title{margin:0 0 .35em}
.mona-section__sub{color:var(--mona-muted);font-size:1.05rem;margin:0}
.mona-section--accent .mona-section__sub{color:inherit;opacity:.9}
.mona-section__more{text-align:center;margin-top:34px}
.mona-richtext-wrap{max-width:760px;margin:0 auto}

/* Features (icon + title + desc) */
.mona-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mona-feature{background:var(--mona-bg);border:1px solid var(--mona-line);border-radius:var(--mona-radius);padding:26px 24px}
.mona-feature__icon{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:13px;background:color-mix(in srgb,var(--mona-primary) 14%, transparent);color:var(--mona-primary);font-size:1.5rem;margin-bottom:14px}
.mona-feature__title{margin:.2em 0 .4em;font-size:1.18rem}
.mona-feature__desc{color:var(--mona-muted);margin:0;font-size:.98rem}

/* Split (about) */
.mona-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mona-split--rev .mona-split__media{order:2}
.mona-split__media .mona-visual,.mona-split__media .mona-visual--ph{min-height:320px;height:100%}
.mona-split__text h2{margin:.1em 0 .5em}
.mona-split__text .mona-btn{margin-top:18px}

/* Service cards (media + body) */
.mona-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mona-svc{background:var(--mona-bg);border:1px solid var(--mona-line);border-radius:var(--mona-radius);overflow:hidden;transition:box-shadow .15s,transform .15s}
.mona-svc:hover{box-shadow:0 12px 32px rgba(15,23,42,.09);transform:translateY(-2px)}
.mona-svc__media{border-radius:0}
.mona-svc__media.mona-visual--ph{min-height:170px}
.mona-svc__media img{aspect-ratio:16/10}
.mona-svc__body{padding:18px 20px 22px}
.mona-svc__title{margin:0 0 .4em;font-size:1.14rem}
.mona-svc__desc{color:var(--mona-muted);margin:0;font-size:.96rem}

/* Steps (numbered) */
.mona-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;counter-reset:none}
.mona-step{display:flex;gap:16px;align-items:flex-start}
.mona-step__num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--mona-primary);color:var(--mona-primary-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--mona-font-head)}
.mona-step__title{margin:.2em 0 .3em;font-size:1.1rem}
.mona-step__desc{color:var(--mona-muted);margin:0;font-size:.95rem}

/* Stats */
.mona-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center}
.mona-stat__value{display:block;font-family:var(--mona-font-head);font-weight:800;font-size:2.6rem;line-height:1}
.mona-stat__label{display:block;margin-top:6px;opacity:.9;font-size:.98rem}

/* CTA band */
.mona-cta-band{background:linear-gradient(135deg,var(--mona-primary),var(--mona-accent));color:var(--mona-primary-ink)}
.mona-cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:48px 0;flex-wrap:wrap}
.mona-cta-band h2{margin:0 0 .3em;color:inherit}
.mona-cta-band p{margin:0;opacity:.92}
.mona-cta-band__btn{flex:0 0 auto}

/* Contact block (page section type=contact) */
.mona-contact__intro{max-width:680px;margin:0 auto 28px;text-align:center}
.mona-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:900px;margin:0 auto}
.mona-contact__item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--mona-bg);border:1px solid var(--mona-line);border-radius:var(--mona-radius);padding:20px 22px}
.mona-contact__icon{font-size:1.5rem;line-height:1}
.mona-contact__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mona-muted)}
.mona-contact__value{font-weight:600;color:var(--mona-ink);word-break:break-word}
.mona-contact__cta{text-align:center;margin-top:28px}

/* Post grid / cards */
.mona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mona-card{background:var(--mona-bg);border:1px solid var(--mona-line);border-radius:var(--mona-radius);overflow:hidden;transition:box-shadow .15s,transform .15s}
.mona-card:hover{box-shadow:0 10px 30px rgba(15,23,42,.08);transform:translateY(-2px)}
.mona-card__thumb{aspect-ratio:16/9;background:var(--mona-soft);overflow:hidden}
.mona-card__thumb img{width:100%;height:100%;object-fit:cover}
.mona-card__body{padding:16px 18px 20px}
.mona-card__title{margin:.2em 0 .4em;font-size:1.12rem}
.mona-card__title a{color:var(--mona-ink)}
.mona-card__title a:hover{color:var(--mona-primary);text-decoration:none}
.mona-card__meta{color:var(--mona-muted);font-size:.84rem;margin:0 0 .5em}
.mona-card__excerpt{color:var(--mona-muted);font-size:.95rem;margin:0}

/* Single / page */
.mona-article{max-width:760px;margin:0 auto;padding:48px 0}
.mona-article__header{margin-bottom:28px}
.mona-article__title{font-size:2.2rem;margin:.1em 0 .3em}
.mona-article__meta{color:var(--mona-muted);font-size:.9rem}
.mona-article__hero{margin:24px 0;border-radius:var(--mona-radius);overflow:hidden}
.mona-article__body figure{margin:1.6em 0}
.mona-article__body figure img{border-radius:10px}
.mona-article__body figcaption{text-align:center;color:var(--mona-muted);font-size:.85rem;margin-top:.5em}

/* Footer */
.mona-footer{border-top:1px solid var(--mona-line);background:var(--mona-soft);margin-top:40px;padding:40px 0;color:var(--mona-muted)}
.mona-footer__inner{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.mona-footer__menu ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0}
.mona-footer__menu a{color:var(--mona-muted);font-size:.9rem}

.mona-pagination{display:flex;gap:8px;justify-content:center;margin:32px 0;flex-wrap:wrap}
.mona-pagination .page-numbers{padding:.4em .8em;border:1px solid var(--mona-line);border-radius:8px;color:var(--mona-ink)}
.mona-pagination .current{background:var(--mona-primary);color:var(--mona-primary-ink);border-color:var(--mona-primary)}

/* Responsive */
@media(max-width:900px){
	.mona-grid,.mona-features,.mona-cards{grid-template-columns:repeat(2,1fr)}
	.mona-split{grid-template-columns:1fr;gap:28px}
	.mona-split--rev .mona-split__media{order:0}
}
@media(max-width:680px){
	.mona-grid,.mona-features,.mona-cards{grid-template-columns:1fr}
	.mona-burger{display:block}
	.mona-nav{position:absolute;left:0;right:0;top:100%;background:var(--mona-bg);border-bottom:1px solid var(--mona-line);display:none}
	.mona-nav.is-open{display:block}
	.mona-nav ul{flex-direction:column;gap:0;padding:8px 20px}
	.mona-nav li{padding:10px 0;border-bottom:1px solid var(--mona-line)}
	.mona-hero{padding:60px 0 52px}
	.mona-hero h1{font-size:2.1rem}
	.mona-stat__value{font-size:2.1rem}
	.mona-cta-band__inner{flex-direction:column;align-items:flex-start;text-align:left}
	.mona-article__title{font-size:1.7rem}
}

/* =============================================
   BAY AREA OIL — Stitch design tokens override
   ============================================= */
:root{
	--mona-primary:#002068;
	--mona-primary-ink:#ffffff;
	--mona-accent:#a33e00;
	--mona-ink:#191c1d;
	--mona-bg:#f8f9fa;
	--mona-muted:#444653;
	--mona-line:#c4c5d5;
	--mona-soft:#f3f4f5;
	--mona-radius:8px;
	--mona-maxw:1280px;
	--mona-font-head:"Inter",system-ui,-apple-system,sans-serif;
	--mona-font-body:"Inter",system-ui,-apple-system,sans-serif;
}

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

.main {
  position: relative;
  z-index: 1;
  padding-top: var(--size-hd);
  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;
  }
}

.section-pd-t {
  padding-top: var(--pd-sc);
}

.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: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1em 0;
  padding: 1em;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.mona-content blockquote::before {
  color: #ccc;
  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 #e1e1e1;
}

.mona-content table th,
.mona-content table td {
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  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 — bỏ underline mặc định của thẻ a */
.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: 800;
  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: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  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 { position: relative; }
.hd-mobile-item--active { color: var(--mona-primary); }
.hd-mobile-item--active::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mona-primary);
}

/* Fix: link dùng .no-underline (nút CTA, card link...) vẫn bị a:hover{text-decoration:underline}
   ở trên đè khi hover, vì a:hover (0,1,1) đặc hiệu hơn .no-underline (0,1,0) của Tailwind. */
a.no-underline,
a.no-underline:hover { text-decoration: none !important; }

/* Active nav link — underline bằng ::after (position:absolute), KHÔNG dùng border-b/border-left
   thật vì border chiếm block layout (đổi kích thước box khi item active/inactive). */
.mona-nav-active { position: relative; }
.mona-nav-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--mona-primary);
}

/* Logo brand — font khác biệt với body (Barlow Condensed) + viết hoa */
.mona-logo {
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}