/*
Theme Name: The Vault Blog
Theme URI: https://www.imtiazvaultmajan.com/
Description: Blog theme for The Vault at Majan, matched to the main project website (cream and olive palette, Optima headings). Includes enquiry CTA, WhatsApp button, reading time, breadcrumbs and Article schema.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vault-blog
License: GPL-2.0-or-later
*/

@font-face {
  font-family: "Optima";
  src: url("https://www.imtiazvaultmajan.com/fonts/Optima-Medium.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cream: #f8f5e8;
  --paper: #fffdf6;
  --olive: #47390b;
  --olive-dark: #362b08;
  --stone: #a39c85;
  --line: #e4dcc2;
  --ink: #2a2518;
  --muted: #6b6450;
  --display: "Optima", "Linux Biolinum", Candara, "Segoe UI", sans-serif;
  --body: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --wrap: 1170px;
  --measure: 72ch;
  --radius: 6px;
  --space: clamp(1.25rem, 3vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-underline-offset: 3px; }
a:hover { color: var(--olive-dark); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--olive);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 .6em;
}
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto;
  background: var(--olive); color: #fff; padding: .6rem 1rem; border-radius: var(--radius);
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(71, 57, 11, .06);
}
.admin-bar .site-header { top: 32px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.site-brand img { max-height: 52px; width: auto; }
.site-title { font-family: var(--display); font-size: 1.35rem; color: #7a1f2b; text-decoration: none; line-height: 1.1; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .45rem .7rem; font: inherit; font-size: .9rem; color: var(--olive); cursor: pointer;
}
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.primary-nav a {
  font-family: var(--display); font-size: 1.05rem; color: var(--muted); text-decoration: none;
  padding: 1.4rem 0; display: block; border-bottom: 3px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_parent > a {
  color: var(--olive); border-bottom-color: var(--olive);
}
@media (max-width: 900px) {
  .admin-bar .site-header { top: 0; }
  .nav-toggle { display: block; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: .5rem 20px 1rem; }
  .primary-nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
}

/* Page head */
.page-head { text-align: center; padding: calc(var(--space) * 1.4) 0 var(--space); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; letter-spacing: .01em; margin-bottom: .4rem; }
.page-head p { color: var(--muted); max-width: 60ch; margin: 0 auto; }
.pill {
  display: inline-block; font-family: var(--display); font-size: .95rem; color: var(--muted);
  border: 1px solid var(--stone); border-radius: 100vmax; padding: .15rem .9rem; margin-bottom: .9rem;
  text-decoration: none;
}
a.pill:hover { background: var(--olive); border-color: var(--olive); color: #fff; }

/* Breadcrumbs */
.breadcrumbs { font-size: .9rem; color: var(--muted); padding-top: 1.2rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--stone); }
.breadcrumbs a { color: var(--muted); }

/* Lead post (first post on blog home) */
.lead-post { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space); align-items: center; margin-bottom: calc(var(--space) * 1.5); }
.lead-post__image { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--line); }
.lead-post__image img { width: 100%; height: 100%; object-fit: cover; }
.lead-post h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.lead-post h2 a { color: inherit; text-decoration: none; }
.lead-post h2 a:hover { text-decoration: underline; }
@media (max-width: 800px) { .lead-post { grid-template-columns: 1fr; } }

/* Post grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * .9) var(--space); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; }
.card__image { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--line); margin-bottom: 1rem; }
.card__image img { width: 100%; height: 100%; object-fit: cover; }
.card h2, .card h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }
.card p { margin: 0 0 .6rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.meta { font-size: .88rem; color: var(--muted); margin-bottom: .5rem; }
.meta a { color: var(--muted); }
.cat-link { font-family: var(--display); color: var(--olive); text-decoration: none; font-size: .95rem; }

/* Single */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: calc(var(--space) * 1.4); align-items: start; padding-bottom: calc(var(--space) * 2); }
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; } }
.article-head { text-align: left; padding: var(--space) 0 1.2rem; }
.article-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.article-hero { margin: 0 0 var(--space); }
.article-hero img { width: 100%; border-radius: var(--radius); }
.article-hero figcaption { font-size: .85rem; color: var(--muted); padding-top: .5rem; }
.entry-content { max-width: var(--measure); }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content p { margin: 0; }
.entry-content h2 { font-size: 1.85rem; margin-top: 2em; }
.entry-content h3 { font-size: 1.4rem; margin-top: 1.7em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote {
  margin-left: 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid var(--olive);
  font-family: var(--display); font-size: 1.25rem; color: var(--olive);
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content .wp-block-table { margin-left: 0; margin-right: 0; overflow-x: auto; }
figure { margin: 0; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.entry-content th { background: var(--paper); font-family: var(--display); color: var(--olive); font-weight: 500; }
.entry-content img, .entry-content figure { border-radius: var(--radius); }
.entry-content figcaption { font-size: .85rem; color: var(--muted); }
.entry-content .alignwide { max-width: none; }
.entry-content details { border-top: 1px solid var(--line); padding: .8rem 0; }
.entry-content summary { font-family: var(--display); color: var(--olive); font-size: 1.15rem; cursor: pointer; }
.tags { margin-top: var(--space); display: flex; flex-wrap: wrap; gap: .5rem; }

.author-box { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--line); margin-top: var(--space); padding-top: var(--space); max-width: var(--measure); }
.author-box img { border-radius: 50%; flex: none; }
.author-box h2 { font-size: 1.2rem; margin-bottom: .2rem; }
.author-box p { margin: 0; font-size: .95rem; color: var(--muted); }

/* Sidebar + enquiry box */
.sidebar { position: sticky; top: 100px; display: grid; gap: var(--space); }
.enquiry-box { background: var(--olive); color: var(--cream); border-radius: var(--radius); padding: 1.6rem; }
.enquiry-box h2 { color: #fff; font-size: 1.45rem; }
.enquiry-box p { margin: 0 0 1.2rem; font-size: .98rem; line-height: 1.6; color: #e9e2c9; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: 1.02rem; text-decoration: none; cursor: pointer;
  border-radius: 100vmax; padding: .7rem 1.4rem; border: 1px solid var(--olive);
  background: var(--olive); color: #fff; transition: background .2s;
}
.btn:hover { background: var(--olive-dark); color: #fff; }
.btn--light { background: var(--cream); color: var(--olive); border-color: var(--cream); width: 100%; }
.btn--light:hover { background: #fff; color: var(--olive); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(248, 245, 232, .5); width: 100%; margin-top: .7rem; }
.btn--ghost:hover { background: rgba(248, 245, 232, .12); color: #fff; }
.widget h2, .widget .widget-title { font-size: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.widget li a { text-decoration: none; }

/* In-content CTA (after article) */
.cta-strip {
  max-width: var(--measure); margin-top: var(--space); padding: 1.4rem 1.6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta-strip p { margin: 0; font-family: var(--display); font-size: 1.2rem; color: var(--olive); }

/* Related */
.related { border-top: 1px solid var(--line); padding: calc(var(--space) * 1.4) 0 calc(var(--space) * 2); }
.related > h2 { font-size: 1.8rem; text-align: center; margin-bottom: var(--space); }

/* Pagination */
.pagination { margin: calc(var(--space) * 1.4) 0; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 100vmax; text-decoration: none; font-family: var(--display);
}
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--olive); border-color: var(--olive); color: #fff; }

/* Search */
.search-form { display: flex; gap: .5rem; max-width: 480px; margin: 1rem auto 0; }
.search-form input[type="search"] {
  flex: 1; font: inherit; font-size: 1rem; padding: .65rem 1rem; border: 1px solid var(--stone);
  border-radius: 100vmax; background: var(--paper); color: var(--ink);
}
.empty-state { text-align: center; padding: var(--space) 0 calc(var(--space) * 2); }

/* Comments */
.comments { max-width: var(--measure); margin-top: calc(var(--space) * 1.3); }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 1.5rem; }
.comment-body { border-top: 1px solid var(--line); padding: 1rem 0; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea {
  width: 100%; font: inherit; padding: .6rem .8rem; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--paper);
}
.comment-form .submit { font-family: var(--display); background: var(--olive); color: #fff; border: 0; border-radius: 100vmax; padding: .7rem 1.4rem; cursor: pointer; }

/* Footer (matches the main project site) */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.site-footer {
  background: #9f8019; color: #e9ecef; font-family: var(--display);
  font-size: 1.05rem; line-height: 1.6; padding: 1.3rem 0; margin-top: calc(var(--space) * 1.5);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-line { margin: 0; }
.footer-line .sep { opacity: .7; margin: 0 .35rem; }
.footer-note { margin: .35rem 0 0; font-family: var(--body); font-size: .82rem; color: rgba(255, 255, 255, .78); }
@media (max-width: 600px) {
  .site-footer { text-align: center; font-size: .98rem; padding-bottom: 80px; }
}

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }