/*
Theme Name: Dawah Library
Theme URI: https://dawah.yasirnajeep.com/
Author: Yasir Najeep
Author URI: https://yasirnajeep.com/
Description: A bilingual, artwork-first library for reviewed Dawah designs.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dawah-library
*/

@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cairo-arabic-400-normal.1b36945f5f6a.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC;
}
@font-face {
  font-family: Cairo;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cairo-arabic-700-normal.673212b4908a.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC;
}

:root {
  --paper: #f6f4ed;
  --surface: #fffdf8;
  --ink: #173c34;
  --body-ink: #293f36;
  --muted: #52635c;
  --border: #d4dacf;
  --soft-green: #e8ede4;
  --accent: #7c3f25;
  --focus: #a54c21;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --content-width: 85rem;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display-font: Georgia, "Times New Roman", serif;
  --arabic-font: Cairo, "Geeza Pro", Tahoma, Arial, sans-serif;
  --z-menu: 20;
  --z-skip: 40;
}
* { box-sizing: border-box; }
html { scroll-padding-block-start: 1rem; }
body { margin: 0; background: var(--paper); color: var(--body-ink); font-family: var(--body-font); font-size: 1.0625rem; line-height: 1.75; text-align: start; }
body.dawah-ar { font-family: var(--arabic-font); line-height: 1.85; }
button,input,select,textarea { font: inherit; }
button,summary { cursor: pointer; }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img { display: block; max-inline-size: 100%; block-size: auto; }
picture { display: block; }
figure { margin: 0; }
h1,h2,h3 { margin: 0; color: var(--ink); font-family: var(--display-font); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 2vw + 1rem, 2.75rem); line-height: 1.2; }
h2 { font-size: 1.75rem; line-height: 1.3; }
h3 { font-size: 1.25rem; line-height: 1.4; }
.dawah-ar h1,.dawah-ar h2,.dawah-ar h3 { font-family: var(--arabic-font); font-weight: 700; line-height: 1.5; }
.dawah-ar h1 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); }
.dawah-ar h2 { font-size: 1.5rem; }
p { margin-block: 0 1rem; text-wrap: pretty; }
bdi { font-variant-numeric: tabular-nums; }
.container { inline-size: min(calc(100% - 4rem), var(--content-width)); margin-inline: auto; }
.site-main { min-block-size: 60vh; }
.screen-reader-text { border: 0; clip-path: inset(50%); block-size: 1px; inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; }
.skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 1rem; z-index: var(--z-skip); background: var(--ink); color: white; padding: .75rem 1.5rem; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); color: white; }

/* Familiar, compact navigation leaves the artwork above the fold. */
.site-header { border-block-end: 1px solid var(--border); }
.header-inner { min-block-size: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-brand { display: flex; align-items: baseline; gap: 1rem; flex-shrink: 0; text-decoration: none; }
.brand-name { font-family: var(--display-font); font-size: 1.875rem; line-height: 1.25; }
.dawah-ar .brand-name { font-family: var(--arabic-font); font-weight: 700; }
.brand-byline { color: var(--muted); font-size: .75rem; }
.desktop-nav,.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.desktop-nav a,.language-link { min-block-size: 2.75rem; display: inline-flex; align-items: center; font-size: .875rem; }
.desktop-nav a { text-decoration: none; }
.desktop-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.language-link { white-space: nowrap; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { min-block-size: 2.75rem; display: list-item; padding-block: .6rem; font-size: .875rem; }
.mobile-menu nav { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .5rem); inline-size: 17rem; max-inline-size: calc(100vw - 1.5rem); padding: .75rem; border: 1px solid var(--border); background: var(--surface); z-index: var(--z-menu); }
.mobile-menu nav a { display: flex; align-items: center; min-block-size: 2.75rem; padding: .5rem; font-size: .9375rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: .6rem 1rem; gap: .5rem; border: 1px solid var(--ink); border-radius: .1875rem; background: var(--ink); color: white; font-weight: 700; font-size: .9375rem; line-height: 1.6; text-decoration: none; text-align: center; }
.button:hover { background: #214f44; border-color: #214f44; color: white; }
.button-outline { background: transparent; color: var(--ink); }
.button-outline:hover { background: var(--soft-green); border-color: var(--ink); color: var(--ink); }
.button-small { font-size: .8125rem; padding-inline: .875rem; }
.button-wide { inline-size: 100%; }
.text-link { min-block-size: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; font-size: .9375rem; }
.eyebrow { color: var(--accent); font-size: .8125rem; font-weight: 700; margin-block-end: .75rem; }

/* Two / three / four natural-ratio columns; DOM and keyboard order run down each column. */
.gallery-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem .75rem; }
.gallery-intro h1 { font-size: 2rem; }
.dawah-ar .gallery-intro h1 { font-size: 1.5rem; }
.gallery-intro p { margin-block: .25rem 0; color: var(--muted); font-size: .9375rem; max-inline-size: 68ch; }
.gallery-enquiry { flex-shrink: 0; }
.gallery-toolbar { display: flex; align-items: start; gap: .75rem; scroll-margin-block-start: 1rem; }
.library-search { display: flex; inline-size: 100%; max-inline-size: 40rem; gap: .5rem; margin: 0; }
.gallery-toolbar .library-search { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; }
.library-search input { min-inline-size: 0; inline-size: 100%; min-block-size: 2.75rem; border: 1px solid #84978a; border-radius: .1875rem; background: var(--surface); color: var(--ink); padding: .5rem .75rem; font-size: 1rem; }
.library-search input::placeholder { color: var(--muted); opacity: 1; }
.library-search button { min-block-size: 2.75rem; flex-shrink: 0; border: 1px solid var(--ink); border-radius: .1875rem; background: var(--ink); color: white; padding-inline: 1rem; font-size: .875rem; }
.library-search button:hover { background: #214f44; }
.topic-filter { position: relative; flex-shrink: 0; }
.topic-filter summary { min-block-size: 2.75rem; border: 1px solid #84978a; border-radius: .1875rem; padding: .5rem .75rem; font-size: .875rem; background: var(--surface); }
.topic-filter .topic-links { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: var(--z-menu); inline-size: 19rem; max-inline-size: calc(100vw - 1.5rem); padding: .5rem; border: 1px solid var(--border); background: var(--surface); }
.topic-links { display: flex; flex-wrap: wrap; gap: .25rem; }
.topic-links a { display: flex; align-items: center; min-block-size: 2.75rem; padding: .5rem .75rem; text-decoration: none; font-size: .875rem; }
.topic-filter .topic-links a { flex: 1 1 100%; }
.topic-links a:hover,.topic-links a[aria-current="page"] { background: var(--soft-green); text-decoration: underline; }
.library-section { padding-block: .75rem 2rem; }
.design-grid { column-count: 4; column-gap: 1rem; }
.design-card { display: inline-block; position: relative; vertical-align: top; inline-size: 100%; margin-block: 0 1rem; break-inside: avoid; }
.design-card-image { display: block; text-decoration: none; }
.design-card-image img { inline-size: 100%; block-size: auto; }
.artwork-placeholder { display: block; min-block-size: 2.75rem; padding-block: .5rem; text-decoration: underline; font-size: .875rem; }
.design-card-details { padding-block-start: .25rem; }
.design-card h3 { font-family: var(--body-font); font-size: .875rem; font-weight: 600; line-height: 1.5; }
.dawah-ar .design-card h3 { font-family: var(--arabic-font); font-size: .875rem; line-height: 1.75; }
.design-card h3 a { min-block-size: 2.75rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-block: .25rem; text-decoration: none; overflow-wrap: anywhere; }
.design-card h3 a:hover { text-decoration: underline; }
.card-topic { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.design-card-actions { display: flex; gap: .25rem; }
.design-card-actions a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 0; flex: 1 1 0; padding-inline: .25rem; border-radius: .1875rem; font-size: .8125rem; text-decoration: none; }
.card-download { color: white; background: var(--ink); }
.card-download:hover { color: white; background: #214f44; }
.card-pinterest { color: var(--ink); border: 1px solid #84978a; background: var(--surface); }
.card-pinterest:hover { color: var(--ink); background: var(--soft-green); }
.collection-intro { display: block; }
.collection-intro .breadcrumbs { margin-block-end: .5rem; }
.collection-description { color: var(--muted); font-size: .9375rem; margin-block-start: .5rem; }
.collection-description p:last-child { margin-block-end: 0; }
.pagination { margin-block-start: 1rem; }
.pagination ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: .5rem; }
.pagination a,.pagination .current { display: flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .1875rem; background: var(--surface); text-decoration: none; font-size: .9375rem; }
.pagination .current { background: var(--ink); color: white; border-color: var(--ink); }
.empty-state { max-inline-size: 45rem; padding-block: 1.5rem; }
.empty-state h1,.empty-state h3 { margin-block-end: 1rem; }
.empty-state p { color: var(--muted); }

/* Article image and download precede the readable text and references. */
.single-design { padding-block: 1rem 2rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); font-size: .8125rem; margin-block-end: .75rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--muted); }
.design-heading { max-inline-size: 64rem; margin-block-end: 1rem; }
.design-heading h1 { font-size: clamp(1.75rem, 1.8vw + 1rem, 2.5rem); }
.dawah-ar .design-heading h1 { font-size: clamp(1.375rem, 1.3vw + 1rem, 2rem); }
.design-topic-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; }
.design-topic-list a { min-block-size: 2.75rem; display: inline-flex; align-items: center; color: var(--accent); }
.archive-year { margin-block: .25rem 0; color: var(--muted); font-size: .8125rem; }
.design-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; align-items: start; }
.design-reading,.design-sidebar { min-inline-size: 0; }
.original-artwork a { display: block; }
.original-artwork img { inline-size: 100%; block-size: auto; }
.original-artwork figcaption { margin-block-start: .5rem; color: var(--muted); font-size: .8125rem; }
.reference-note { border-inline-start: 2px solid var(--border); padding-inline-start: 1rem; margin-block-end: .75rem; max-inline-size: 68ch; }
.reference-note h2 { font-family: inherit; font-size: .9375rem; font-weight: 700; margin-block-end: .25rem; }
.dawah-ar .reference-note h2 { font-size: .9375rem; }
.reference-note p { color: var(--muted); font-size: .9375rem; margin: 0; }
.design-download { margin-block-end: 1rem; }
.download-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.download-terms { margin-block-start: 1rem; max-inline-size: 74ch; font-size: .8125rem; line-height: 1.8; color: var(--muted); }
.download-terms h3 { font-family: inherit; font-size: .875rem; font-weight: 700; margin-block-end: .25rem; }
.dawah-ar .download-terms h3 { font-size: .875rem; }
.download-terms p:last-child { margin: 0; }
.reading-section { margin-block-start: 2rem; max-inline-size: 68ch; }
.reading-section h2 { font-size: 1.5rem; margin-block-end: 1rem; }
.dawah-ar .reading-section h2 { font-size: 1.25rem; }
.artwork-text { margin: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--border); font-family: var(--arabic-font); font-size: 1.375rem; line-height: 1.95; overflow-wrap: anywhere; }
.artwork-text p:last-child { margin: 0; }
.source-section { border-block-end: 1px solid var(--border); padding-block-end: 1rem; }
.source-section p { color: var(--muted); }
.prose { max-inline-size: 68ch; overflow-wrap: anywhere; }
.prose p { margin-block-end: 1.25rem; }
.prose h2,.prose h3 { margin-block: 1.5rem .75rem; }
.prose ul,.prose ol { padding-inline-start: 1.5rem; }
.prose li { margin-block-end: .5rem; }
.prose img { margin-block: 1rem; }
.prose table { inline-size: 100%; border-collapse: collapse; }
.prose th,.prose td { border: 1px solid var(--border); padding: .75rem; text-align: start; }
.prose figure { max-inline-size: 100%; overflow-x: auto; }
.enquiry-panel { padding-block: .5rem 1rem; border-block-end: 1px solid var(--border); }
.enquiry-panel h2 { font-family: inherit; font-size: 1.0625rem; font-weight: 700; margin-block-end: .75rem; }
.dawah-ar .enquiry-panel h2 { font-size: 1.0625rem; }
.enquiry-panel p { color: var(--muted); font-size: .9375rem; }
.sidebar-library-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: .875rem; margin-block-start: .5rem; }
.related-section { padding-block: 1.5rem 2rem; border-block-start: 1px solid var(--border); }
.section-heading { margin-block-end: 1rem; }
.document-page { max-inline-size: 54rem; padding-block: 1.5rem 2rem; }
.document-page h1 { margin-block-end: 1.25rem; }
.document-image { inline-size: 100%; block-size: auto; }
.guide-artwork { margin-block: 1rem 1.5rem; }
.guide-list article { border-block-start: 1px solid var(--border); padding-block: 1.5rem; }
.guide-list h2 { margin-block-end: .75rem; }
.guide-list h2 a { display: inline-block; min-block-size: 2.75rem; }

.site-footer { padding-block: 1.5rem; border-block-start: 1px solid var(--border); }
.footer-inner { display: flex; align-items: start; justify-content: space-between; gap: 2rem; }
.footer-name { color: var(--ink); font-weight: 700; margin-block-end: .25rem; }
.site-footer p { font-size: .8125rem; color: var(--muted); max-inline-size: 44ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; max-inline-size: 42rem; }
.site-footer nav a { min-block-size: 2.75rem; display: inline-flex; align-items: center; font-size: .8125rem; }

/* Fine-pointer overlays reveal on keyboard focus too; touch controls stay in normal flow. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .design-card:not(.design-card-wide) .design-card-details { position: absolute; inset-inline: 0; inset-block-end: 0; background: var(--surface); padding: .25rem .5rem .5rem; opacity: 0; pointer-events: none; }
  .design-card:not(.design-card-wide):hover .design-card-details,.design-card:not(.design-card-wide):focus-within .design-card-details { opacity: 1; pointer-events: auto; }
  .design-card:not(.design-card-wide) .card-topic { display: none; }
  .design-card:not(.design-card-wide) h3 a { display: block; min-block-size: 1.5rem; line-height: 1.75; padding-block: .125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (any-pointer: coarse) {
  .design-card:not(.design-card-wide) .design-card-details { position: static; padding: .25rem 0 0; opacity: 1; pointer-events: auto; }
  .design-card:not(.design-card-wide) h3 a { display: -webkit-box; min-block-size: 2.75rem; padding-block: .25rem; white-space: normal; text-overflow: clip; }
}
@media (max-width: 1099px) {
  .container { inline-size: calc(100% - 3rem); }
  .brand-byline { display: none; }
  .desktop-nav { gap: 1rem; }
  .header-actions { gap: 1rem; }
  .design-grid { column-count: 3; }
  .design-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .enquiry-panel { max-inline-size: 40rem; }
  .enquiry-panel .button { inline-size: auto; }
}
@media (max-width: 849px) {
  .desktop-nav,.header-enquiry { display: none; }
  .mobile-menu { display: block; }
  .header-inner { min-block-size: 4rem; }
  .footer-inner { flex-direction: column; gap: .5rem; }
}
@media (max-width: 767px) {
  .container { inline-size: calc(100% - 1.5rem); }
  .brand-name { font-size: 1.75rem; }
  .header-inner { gap: .75rem; }
  .header-actions { gap: .75rem; }
  .gallery-intro { gap: .5rem; padding-block: .75rem; }
  .gallery-intro h1 { font-size: 1.625rem; }
  .dawah-ar .gallery-intro h1 { font-size: 1.375rem; }
  .gallery-intro p { font-size: .875rem; }
  .gallery-enquiry { display: none; }
  .gallery-toolbar { gap: .5rem; }
  .gallery-toolbar .library-search { flex: 1 1 0; }
  .library-search input { font-size: 1rem; padding-inline: .5rem; }
  .library-search button { padding-inline: .625rem; }
  .topic-filter summary { padding-inline: .5rem; font-size: .8125rem; }
  .library-section { padding-block-start: .75rem; }
  .design-grid { column-count: 2; column-gap: .75rem; }
  .design-card { margin-block-end: .75rem; }
  .card-topic { display: none; }
  .design-card h3 a { font-size: .8125rem; }
  .design-card-actions a { font-size: .75rem; }
  .download-actions .button { flex: 1 1 0; min-inline-size: 0; }
  .design-heading h1 { font-size: 1.75rem; }
  .dawah-ar .design-heading h1 { font-size: 1.375rem; }
  .design-topic-list { gap: .25rem .75rem; }
  .artwork-text { font-size: 1.25rem; padding-inline-start: .75rem; }
  .document-page { padding-block-start: 1rem; }
  .document-page h1 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; }
}
@media print {
  .site-header,.site-footer,.design-sidebar,.related-section,.breadcrumbs,.design-download,.design-card-actions { display: none; }
  body { background: white; color: black; }
  .container { inline-size: 100%; }
  .design-layout { display: block; }
  .design-card-details { position: static !important; opacity: 1 !important; }
}