/* =========================================================
   CHAGDALI.COM — SINGLE SITE STYLESHEET
   Merged from: site.css, home.css, gallery.css, artwork.css,
   simple-page.css, gallery.css (collection pages reuse gallery.css).
   Load this ONE file from /style.css on every page.

   All colors and font families are defined once below as CSS
   variables. To re-theme the site, change values HERE ONLY —
   every rule below references var(--...), nothing is hardcoded.
   ========================================================= */

:root {
  /* ---- Fonts ---- */
  --font-serif: 'IBM Plex Serif', Georgia, serif;   /* body copy, headings, most of the site */
  --font-sans:  'IBM Plex Sans', Arial, sans-serif;  /* header + footer only */

  /* ---- Core text colors ---- */
  --color-text:  #555;     /* normal body/paragraph text */
  --color-title: #414141;  /* h1/h2/h3, site logo, active nav state */

  /* ---- Links ---- */
  --color-link:       #1F86B3; /* default link color, site-wide */
  --color-link-hover: #000;    /* hover color for every link */

  /* ---- Header & footer (kept distinct from --color-link) ---- */
  --color-nav:         #757575; /* home link / lang switch, inactive */
  --color-footer-link: #666;    /* footer nav links */

  /* ---- Secondary / muted UI text ---- */
  --color-muted:      #999;   /* breadcrumbs base text, footer copyright */
  --color-separator:  #d1d1d1; /* breadcrumb "/" separators */
  --color-disabled:   #bbb;   /* disabled pagination, pictorem separators */

  /* ---- Borders & backgrounds ---- */
  --color-border:       #ccc;
  --color-border-light: #eee;
  --color-bg-light:     #f4f4f4; /* hero frame placeholder background */
  --color-white:        #fff;

  /* ---- Form status colors ---- */
  --color-success: #2ea44f;
  --color-error:   #cb2431;

  /* ---- Dark button (contact form submit) ---- */
  --color-button-dark-bg:       #111;
  --color-button-dark-bg-hover: #333;
}

/* =========================================================
   Fonts — self-hosted IBM Plex (no Google Fonts / no CDN)
   Files expected at:
   /fonts/IBMPlexSerif-Regular.woff2
   /fonts/IBMPlexSerif-Bold.woff2
   /fonts/IBMPlexSans-Regular.woff2
   /fonts/IBMPlexSans-Bold.woff2
   ========================================================= */
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/fonts/IBMPlexSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/fonts/IBMPlexSerif-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Global base
   - Body copy: IBM Plex Serif, --color-text
   - Titles / logo / h1-h3: IBM Plex Serif bold, --color-title
   - Header & footer: IBM Plex Sans (overrides the rule above)
   ========================================================= */
body {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-text);
}

/* <picture> is inline by default — force block so it never introduces
   the classic few-px gap under an image (used by pictureTag() in
   includes/helpers.php for the WebP-with-JPEG-fallback markup). */
picture { display: block; }

h1, h2, h3, .site-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-title);
}

/* Header & footer use IBM Plex Sans throughout (incl. the logo) */
.site-header, .site-header *,
.site-footer, .site-footer * {
  font-family: var(--font-sans);
}

/* =========================================================
   Links — global default color + hover behaviour
   Default link color is --color-link everywhere, EXCEPT:
   - header & footer links (nav, logo, lang switch, footer nav)
     stay on the normal text/title colors, set below.
   - Related Artworks links stay on the normal body text color,
     set in the Related Artworks section below.
   No underline on hover; hover color is always --color-link-hover,
   for every link on the site, no exceptions. The hover rule uses
   "body a:hover" (not just "a:hover") so it always outranks the
   per-section link-color rules below, regardless of source order.
   ========================================================= */
a {
  color: var(--color-link);
  text-decoration: none;
}
body a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* =========================================================
   Header navigation
   ========================================================= */
.site-header {
  border-bottom: none;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header a {
  color: var(--color-title);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lang-switch {
  display: flex;
  gap: 4px;
}

.home-link,
.lang-switch a {
  font-size: 10px;
  color: var(--color-nav);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 1px;
}

.lang-switch a.active {
  color: var(--color-title);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 24px 16px 30px;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}
.footer-links a {
  font-size: 13px;
  color: var(--color-footer-link);
}
.footer-copyright {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}

/* =========================================================
   Breadcrumbs (artwork, gallery, about pages)
   ========================================================= */
.breadcrumbs {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 18px;
  letter-spacing: 0.02em;
}
.breadcrumbs a {
  color: var(--color-title);
}
.breadcrumbs .sep {
  margin: 0 7px;
  color: var(--color-separator);
}
.breadcrumbs [aria-current="page"] {
  color: var(--color-muted);
}

/* =========================================================
   Home page
   ========================================================= */
.home-h1 {
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
  max-width: 900px;
  margin: 28px auto 22px;
  padding: 0 16px;
}
@media (max-width: 640px) {
  .home-h1 { font-size: 18px; margin: 20px auto 16px; }
}

.page-home { max-width: 1100px; margin: 0 auto; padding: 30px 16px; }
.page-home h2 { font-size: 22px; margin-bottom: 16px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.card { color: var(--color-text); }
.card img { width: 100%; height: 160px; object-fit: cover; border-radius: 0; display: block; }
.card .name { font-size: 14px; margin-top: 6px; font-weight: 400; }
.see-all { display: inline-block; margin-top: 24px; }

/* Single hero, centered, fixed height */
.hero {
  display: block;
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 0 16px;
}
.hero .hero-card { display: block; color: var(--color-link); }
.hero .hero-frame {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-bg-light);
}
.hero .hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero .cap {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 16px;
}
@media (max-width: 700px) {
  .hero .hero-frame { height: 280px; }
}

/* =========================================================
   Gallery page (also used by collection.php)
   ========================================================= */
.page-gallery { max-width: 1100px; margin: 0 auto; padding: 30px 16px 60px; }
.page-gallery h1 { font-size: 24px; margin-bottom: 20px; }
.empty { color: var(--color-text); }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; }
.pagination a {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-link);
  font-size: 14px;
}
.pagination span.disabled {
  padding: 8px 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  color: var(--color-disabled);
  font-size: 14px;
}
.pagination .page-info { font-size: 14px; color: var(--color-text); }

/* =========================================================
   Artwork page
   ========================================================= */
.page-artwork { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }
.page-artwork h1 { font-size: 24px; margin-bottom: 6px; }
.page-artwork h2 { font-size: 19px; margin-top: 30px; margin-bottom: 10px; }
.art-figure { margin: 0; }
.art-figure a { display: block; }
.art-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
  border-radius: 0;
}

.mini-desc { font-size: 16px; line-height: 1.8; color: var(--color-text); margin-bottom: 30px; }
.main-desc { font-size: 16px; line-height: 1.8; color: var(--color-text); }

/* BEGIN: canvas mockup thumbnails — delete this whole block to remove
   the feature's styling (also remove the matching PHP block in
   artwork.php, fenced the same way). */
.canvas-views { margin-top: 26px; }
.canvas-views h2 { font-size: 18px; margin: 0 0 10px; }
.canvas-views-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 520px;
}
.canvas-views-grid a { display: block; }
.canvas-views-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
/* END: canvas mockup thumbnails */

/* Formats section ("Available as Fine Art Prints") */
.formats { margin-top: 26px; }
.formats h2 { font-size: 18px; margin: 0 0 8px; }
.formats-intro { font-size: 13px; color: var(--color-text); line-height: 1.6; margin: 0 0 8px; }

.pictorem-mediums {
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 26px;
}
.pictorem-mediums a { color: var(--color-link); }
.pictorem-mediums .sep { margin: 0 5px; color: var(--color-disabled); }

/* Buy button — styled as a link like the rest of the site
   (--color-link, not the Related Artworks exception color). */
.buy-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 41px; justify-content: center; }
.buy-btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 16px;
  border: none;
  background: var(--color-white);
  color: var(--color-link);
  border-radius: 0;
}
.buy-btn:hover {
  background: var(--color-white);
  color: var(--color-link-hover);
}

/* Secondary CTA under the buy button — a plain contact link, styled
   like the Related Artworks exception (normal text color, not the
   link blue), centered, with extra breathing room above it. */
.inquire-link {
  text-align: center;
  margin-top: 22px;
  font-size: 16px;
}
.inquire-link a {
  color: var(--color-text);
}

/* Social share links — small, muted, centered under the inquire link. */
.share-links {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-muted);
}
.share-links .share-label {
  color: var(--color-muted);
  margin-right: 4px;
}
.share-links a {
  color: var(--color-nav);
}
.share-links .sep {
  margin: 0 6px;
  color: var(--color-disabled);
}

/* Related Artworks — stacked list, full names.
   Line-height matches the normal site body line-height (1.8),
   with no extra margin between items, so row spacing matches
   normal text exactly. Links keep the normal body text color
   (not --color-link, not --color-title), per exception. */
.related { margin-top: 30px; border-top: 1px solid var(--color-border-light); padding-top: 18px; }
.related h2 { font-size: 18px; margin: 0 0 10px; }
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li { margin: 0; line-height: 1.8; }
.related-list a {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}

/* =========================================================
   Collections index + collection page intro
   ========================================================= */
.collection-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 760px;
  margin: 0 0 26px;
}

.collection-index { list-style: none; margin: 20px 0 0; padding: 0; }
.collection-index li { margin-bottom: 18px; }
.collection-index li a {
  font-weight: 400;
  font-size: 18px;
  color: var(--color-link);
}
.collection-desc {
  display: block;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin-top: 4px;
}

/* =========================================================
   Simple pages (about, contact, faq, 404, legal)
   ========================================================= */
.page-simple { max-width: 720px; margin: 0 auto; padding: 30px 16px 60px; }
.page-simple h1 { font-size: 26px; margin-bottom: 22px; }
p { font-size: 16px; line-height: 1.8; color: var(--color-text); margin-bottom: 18px; }
.legal { font-size: 13px; color: var(--color-text); margin-top: 30px; border-top: 1px solid var(--color-border-light); padding-top: 16px; }

/* Contact form */
.intro { font-size: 16px; line-height: 1.8; color: var(--color-text); margin-bottom: 28px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--color-text); }
input[type=email], textarea {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-family: inherit;
  margin-bottom: 18px;
  box-sizing: border-box;
  color: var(--color-text);
}
textarea { min-height: 140px; resize: vertical; }
.response-area { min-height: 50px; display: flex; align-items: center; font-size: 14px; }
.response-area.success { color: var(--color-success); }
.response-area.error { color: var(--color-error); }
button[type=submit] { padding: 12px 28px; background: var(--color-button-dark-bg); color: var(--color-white); border: none; border-radius: 0; font-size: 15px; cursor: pointer; }
button[type=submit]:hover { background: var(--color-button-dark-bg-hover); }
button[type=submit]:disabled { background: var(--color-muted); cursor: default; }
.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* FAQ */
.faq-list { max-width: 760px; margin-top: 8px; }
.faq-item { margin-bottom: 26px; }
.faq-item h2 { font-size: 18px; margin: 0 0 8px; }
.faq-item p { font-size: 15px; line-height: 1.7; color: var(--color-text); margin: 0; }

/* 404 */
.notfound-links { list-style: none; padding: 0; margin: 16px 0 0; }
.notfound-links li { margin-bottom: 8px; }
.notfound-links a { font-size: 16px; color: var(--color-link); }

/* =========================================================
   Accessibility helper
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}