/*
Theme Name: Zayn Mahal
Theme URI: https://zaynmahal.example.com
Author: Zayn Mahal
Author URI: https://zaynmahal.example.com
Description: A royal jewellery theme for WooCommerce — Mughal-inspired, with a maroon & antique-gold palette, Cormorant Garamond serif headings, a mega menu, slide-in mini cart drawer, and a fully designed homepage, shop, product, cart, checkout and account experience. Built for the Zayn Mahal brand ("Wear the palace.") and easily re-brandable from the Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zayn-mahal
Tags: e-commerce, two-columns, custom-menu, custom-logo, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.9
*/

/* =====================================================
   This file intentionally holds only WordPress-required
   base styles. The full Zayn Mahal design system lives in
   assets/css/main.css and the WooCommerce skin lives in
   assets/css/woocommerce.css (both enqueued by the theme).
   ===================================================== */

/* ---------- Accessibility ---------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--zm-ivory);
  clip: auto !important;
  clip-path: none;
  color: var(--zm-royal);
  display: block;
  font-size: 14px;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
  border: 1px solid var(--zm-gold);
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100000; }

/* ---------- Admin bar / sticky header ---------- */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* ---------- WordPress core classes ---------- */
.alignleft { float: left; margin: 6px 28px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 28px; }
.aligncenter { display: block; margin: 24px auto; }
.alignwide { margin-left: -64px; margin-right: -64px; max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
@media (max-width: 1100px) { .alignwide { margin-left: 0; margin-right: 0; } }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption,
figcaption {
  font-size: 13px;
  color: var(--zm-graphite);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}
.sticky { display: block; }
.bypostauthor { display: block; }
.gallery-caption { display: block; }

/* ---------- Entry content (Journal / pages) ---------- */
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content > * + * { margin-top: 24px; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 48px; color: var(--zm-royal); }
.entry-content p { color: var(--zm-charcoal); line-height: 1.85; }
.entry-content a { color: var(--zm-gold-deep); border-bottom: 1px solid var(--zm-gold); transition: color 200ms; }
.entry-content a:hover { color: var(--zm-royal); }
.entry-content ul, .entry-content ol { padding-left: 24px; }
.entry-content li { margin: 8px 0; }
.entry-content blockquote {
  border-left: 2px solid var(--zm-gold);
  padding: 8px 0 8px 28px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  color: var(--zm-royal);
}
.entry-content img { margin-left: auto; margin-right: auto; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content table th, .entry-content table td { border: 1px solid var(--zm-mist); padding: 12px 16px; text-align: left; }
.entry-content table th { background: var(--zm-cream); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.entry-content pre { background: var(--zm-cream); padding: 20px; overflow: auto; font-size: 14px; }

.entry-meta {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zm-gold-deep);
}

/* ---------- Journal (blog) cards ---------- */
.zm-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1024px) { .zm-post-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 640px) { .zm-post-grid { grid-template-columns: 1fr; } }

.zm-post-card { background: var(--zm-white); border: 1px solid var(--zm-mist); transition: box-shadow 250ms ease-out, transform 250ms ease-out; display: flex; flex-direction: column; }
.zm-post-card:hover { box-shadow: 0 16px 40px rgba(92, 31, 38, 0.10); transform: translateY(-3px); }
.zm-post-card .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--zm-cream); }
.zm-post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; }
.zm-post-card:hover .thumb img { transform: scale(1.05); }
.zm-post-card .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.zm-post-card .title { font-family: var(--font-serif); font-size: 24px; line-height: 1.3; color: var(--zm-royal); }
.zm-post-card .excerpt { font-size: 14px; color: var(--zm-graphite); }
.zm-post-card .more { margin-top: auto; }

/* ---------- Posts pagination / nav ---------- */
.zm-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 56px; }
.zm-pagination .page-numbers {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--zm-mist); font-size: 14px; color: var(--zm-graphite);
}
.zm-pagination .page-numbers.current { background: var(--zm-royal); color: var(--zm-ivory); border-color: var(--zm-royal); }
.zm-pagination a.page-numbers:hover { border-color: var(--zm-gold); color: var(--zm-royal); }

/* ---------- Hero fallback when no image is set ---------- */
.home-hero.no-image,
.editorial-band.no-image {
  background:
    radial-gradient(1200px 500px at 80% 20%, rgba(201, 169, 97, 0.25), transparent 60%),
    linear-gradient(135deg, var(--zm-royal-deep) 0%, var(--zm-royal) 55%, #6d2730 100%);
}
.page-hero .flourish { margin-top: 12px; }

/* ---------- Search overlay ---------- */
.zm-search-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(250, 246, 238, 0.98);
  display: none; align-items: flex-start; justify-content: center;
  padding: 18vh 24px 0;
}
.zm-search-overlay.open { display: flex; }
.zm-search-overlay form { width: 100%; max-width: 720px; display: flex; gap: 0; border-bottom: 2px solid var(--zm-royal); }
.zm-search-overlay input[type="search"] {
  flex: 1; border: none; background: transparent; font-family: var(--font-serif);
  font-size: 34px; color: var(--zm-charcoal); padding: 12px 0; outline: none;
}
.zm-search-overlay input[type="search"]::placeholder { color: var(--zm-graphite); opacity: .5; }
.zm-search-overlay button[type="submit"] { padding: 0 8px; color: var(--zm-royal); }
.zm-search-close {
  position: absolute; top: 28px; right: 28px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--zm-mist); color: var(--zm-royal); background: var(--zm-white);
}
.zm-search-close:hover { border-color: var(--zm-gold); }

/* ---------- Mobile slide menu ---------- */
.zm-mobile-menu { position: fixed; inset: 0; background: var(--zm-ivory); z-index: 95; overflow-y: auto; display: none; }
.zm-mobile-menu.open { display: block; }
.zm-mobile-menu .top { padding: 20px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--zm-mist); }
.zm-mobile-menu nav { padding: 24px; display: flex; flex-direction: column; }
.zm-mobile-menu nav ul { list-style: none; }
.zm-mobile-menu nav a {
  display: block; font-family: var(--font-serif); font-size: 26px;
  padding: 12px 0; border-bottom: 1px solid var(--zm-mist); color: var(--zm-royal);
}
.zm-mobile-menu nav .sub-menu a { font-size: 18px; padding-left: 20px; color: var(--zm-graphite); }
.zm-mobile-menu .socials { padding: 8px 24px 32px; display: flex; gap: 16px; color: var(--zm-gold-deep); }

/* ---------- Header nav: WP menu compatibility ---------- */
.header-nav ul { list-style: none; display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; }
.header-nav li { position: relative; }
.header-nav li.menu-item-has-children > ul.sub-menu {
  position: absolute; top: 100%; left: -16px; min-width: 220px;
  background: var(--zm-white); border: 1px solid var(--zm-mist); border-top: 2px solid var(--zm-gold);
  padding: 12px 0; display: none; z-index: 60; box-shadow: 0 20px 50px rgba(26,26,26,.10);
}
.header-nav li.menu-item-has-children:hover > ul.sub-menu { display: block; }
.header-nav ul.sub-menu li { display: block; }
.header-nav ul.sub-menu a { display: block; padding: 9px 20px; font-size: 13px; letter-spacing: .04em; text-transform: none; }
.header-nav ul.sub-menu a::after { display: none; }

/* Mega menu (CSS hover) */
.has-mega:hover .mega,
.has-mega:focus-within .mega { display: block; }
.mega { display: none; }

/* Scrolled header + body scroll lock (toggled by main.js) */
.header.scrolled { box-shadow: 0 2px 24px rgba(26, 26, 26, 0.08); }
body.zm-no-scroll { overflow: hidden; }

/* Announce dismissed state */
.announce.dismissed { display: none; }