/*
Theme Name: Bayan
Theme URI: https://example.com/bayan
Author: Bayan Studio
Author URI: https://example.com
Description: Bayan ("clarity" / "eloquence" in Arabic & Urdu) is a multilingual WordPress theme built for readers and writers. Native support for English, Arabic and Urdu (LTR & RTL), a dedicated Book showcase with an in-browser, non-downloadable reader, full compatibility with Elementor, Beaver Builder and Divi, and optional WooCommerce support for selling physical or digital books.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bayan
Tags: blog, e-commerce, custom-menu, featured-images, rtl-language-support, translation-ready, custom-post-types, theme-options
*/

/* ==========================================================================
   Bayan — Base styles
   Design language: "manuscript & ledger" — warm parchment surface, deep ink
   navy for text, a single burgundy accent used sparingly for interactive
   elements. Typography pairs a serif display face with a body face that
   covers Latin, Arabic and Urdu scripts gracefully.
   ========================================================================== */

:root{
  --bayan-ink:        #202A3C;   /* primary text / navy-black */
  --bayan-ink-soft:    #4B5468;  /* secondary text */
  --bayan-parchment:   #EFE9DA;  /* page background */
  --bayan-parchment-2: #E4DCC8;  /* card / panel background */
  --bayan-accent:      #8C2F39;  /* burgundy accent */
  --bayan-accent-soft: #C97B83;
  --bayan-gold:        #A98338;  /* rule lines, dividers */
  --bayan-line:        #D7CCB2;
  --bayan-white:       #FBF9F3;

  --bayan-font-display: "Amiri", "Lora", Georgia, serif;
  --bayan-font-body:    "Noto Naskh Arabic", "Lora", Georgia, serif;
  --bayan-font-ui:      "Nastaliq Awami", "Lora", Georgia, serif;

  --bayan-radius: 3px;
  --bayan-max-width: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bayan-parchment);
  color: var(--bayan-ink);
  font-family: var(--bayan-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--bayan-accent); text-decoration:none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--bayan-accent);
  outline-offset: 2px;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--bayan-font-display);
  color: var(--bayan-ink);
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 700;
}

.bayan-container{
  max-width: var(--bayan-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.bayan-site-header{
  background: var(--bayan-white);
  border-bottom: 1px solid var(--bayan-line);
}
.bayan-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  padding: 22px 0;
}
.bayan-site-branding{ display:flex; align-items:center; gap:12px; }
.bayan-site-title{ margin:0; font-size: 1.6rem; letter-spacing:.02em; }
.bayan-site-title a{ color: var(--bayan-ink); }
.bayan-site-title a:hover{ text-decoration:none; color: var(--bayan-accent); }
.bayan-site-description{ margin:2px 0 0; font-size:.85rem; color: var(--bayan-ink-soft); }

.bayan-primary-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.bayan-primary-nav a{ color: var(--bayan-ink); font-weight:600; font-size:.95rem; }
.bayan-primary-nav a:hover{ color: var(--bayan-accent); text-decoration:none; }

.bayan-lang-switcher{ display:flex; gap:10px; font-size:.8rem; }
.bayan-lang-switcher a{ padding:2px 8px; border:1px solid var(--bayan-line); border-radius: var(--bayan-radius); color: var(--bayan-ink-soft); }
.bayan-lang-switcher a.is-active{ border-color: var(--bayan-accent); color: var(--bayan-accent); }

/* ---------- Layout ---------- */
.bayan-content-area{ padding: 48px 0; }
.bayan-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 48px; }
.bayan-layout.no-sidebar{ grid-template-columns: 1fr; }

@media (max-width: 860px){
  .bayan-layout{ grid-template-columns: 1fr; }
  .bayan-header-inner{ flex-wrap:wrap; }
  .bayan-primary-nav ul{ flex-wrap:wrap; gap:14px; }
}

/* ---------- Cards / entries ---------- */
.bayan-card{
  background: var(--bayan-white);
  border: 1px solid var(--bayan-line);
  border-radius: var(--bayan-radius);
  padding: 28px;
  margin-bottom: 28px;
}
.bayan-eyebrow{
  display:inline-block;
  font-family: var(--bayan-font-ui);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--bayan-gold);
  margin-bottom:10px;
}
.bayan-entry-title{ font-size:1.6rem; margin-bottom:.3em; }
.bayan-entry-title a{ color: var(--bayan-ink); }
.bayan-entry-meta{ font-size:.82rem; color: var(--bayan-ink-soft); margin-bottom:14px; }
.bayan-entry-meta span{ margin-inline-end: 14px; }

/* ---------- Book grid ---------- */
.bayan-book-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px;
}
.bayan-book-card{ text-align:center; }
.bayan-book-cover{
  aspect-ratio: 2/3;
  background: var(--bayan-parchment-2);
  border: 1px solid var(--bayan-line);
  border-radius: var(--bayan-radius);
  overflow:hidden;
  box-shadow: 4px 4px 0 var(--bayan-line);
  margin-bottom: 12px;
}
.bayan-book-cover img{ width:100%; height:100%; object-fit:cover; }
.bayan-book-title{ font-size:1rem; margin-bottom:2px; }
.bayan-book-author{ font-size:.82rem; color: var(--bayan-ink-soft); font-style:italic; }

/* ---------- Book reader ---------- */
.bayan-reader-wrap{
  background: var(--bayan-white);
  border: 1px solid var(--bayan-line);
  border-radius: var(--bayan-radius);
  padding: 20px;
  margin: 24px 0;
}
.bayan-reader-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap:wrap;
}
.bayan-reader-toolbar .bayan-btn{ font-size:.85rem; }
.bayan-reader-canvas-wrap{
  position:relative;
  background: #2b2b2b;
  border-radius: var(--bayan-radius);
  overflow:auto;
  max-height: 78vh;
  display:flex;
  justify-content:center;
  padding: 16px 0;
  user-select:none;
  -webkit-user-select:none;
}
.bayan-reader-canvas-wrap canvas{ box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.bayan-reader-note{ font-size:.75rem; color: var(--bayan-ink-soft); margin-top:10px; }

.bayan-modal-overlay{
  position:fixed; inset:0; background: rgba(15,15,15,.82);
  display:none; align-items:center; justify-content:center; z-index:9999; padding:24px;
}
.bayan-modal-overlay.is-open{ display:flex; }
.bayan-modal-box{
  background: var(--bayan-white); width:min(920px, 100%); max-height:92vh; overflow:auto;
  border-radius: var(--bayan-radius); padding: 20px;
}
.bayan-modal-close{
  float:inline-end; background:none; border:none; font-size:1.4rem; cursor:pointer; color: var(--bayan-ink-soft);
}

/* ---------- Buttons ---------- */
.bayan-btn{
  display:inline-block;
  background: var(--bayan-accent);
  color: var(--bayan-white);
  border:none;
  padding: 10px 20px;
  border-radius: var(--bayan-radius);
  font-family: var(--bayan-font-ui);
  font-weight:600;
  cursor:pointer;
  font-size:.9rem;
}
.bayan-btn:hover{ background: #6f232b; text-decoration:none; color:var(--bayan-white); }
.bayan-btn.is-outline{ background:transparent; color: var(--bayan-accent); border:1px solid var(--bayan-accent); }

/* ---------- Sidebar ---------- */
.bayan-sidebar .widget{
  background: var(--bayan-white);
  border:1px solid var(--bayan-line);
  border-radius: var(--bayan-radius);
  padding: 20px;
  margin-bottom: 24px;
}
.bayan-sidebar .widget-title{
  font-family: var(--bayan-font-ui);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--bayan-gold);
  border-bottom:1px solid var(--bayan-line);
  padding-bottom:8px;
  margin-bottom:14px;
}

/* ---------- Footer ---------- */
.bayan-site-footer{
  background: var(--bayan-ink);
  color: var(--bayan-parchment);
  padding: 40px 0;
  margin-top: 48px;
  font-size:.85rem;
}
.bayan-site-footer a{ color: var(--bayan-parchment-2); }

/* ---------- Builder full-width canvas ----------
   Elementor / Beaver Builder / Divi all rely on a distraction-free
   canvas template. These rules make sure Bayan's chrome (header/
   footer/sidebar) steps out of the way when a builder's own
   "full width / canvas" template is selected. */
.bayan-builder-canvas .bayan-site-header,
.bayan-builder-canvas .bayan-site-footer,
.bayan-builder-canvas .bayan-sidebar{ display:none; }
.bayan-builder-canvas .bayan-content-area{ padding:0; }
.bayan-builder-canvas .bayan-layout{ display:block; }

/* ---------- WooCommerce alignment ---------- */
.woocommerce ul.products li.product .price{ color: var(--bayan-accent); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--bayan-accent) !important; color: var(--bayan-white) !important;
  border-radius: var(--bayan-radius) !important; font-family: var(--bayan-font-ui);
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:#6f232b !important; }