/*
Theme Name: OPDE Rwanda
Theme URI: https://opderwanda.org
Author: Kevin Nyawakira
Description: Bespoke theme for OPDE Rwanda — Œuvre Humanitaire pour la Protection et le Développement de l'Enfant en Difficulté. Editorial, photo-led design ("Warm Documentary"). Built for a bilingual French/English site with Polylang.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opde
Tags: nonprofit, editorial, custom-colors, translation-ready, accessibility-ready
*/

/*
  The design lives in assets/css/design.css — ported verbatim from the approved
  Design A prototype. It is enqueued from functions.php.

  This file exists for the WordPress theme header above, plus the small number of
  styles that only apply once content is coming from the editor rather than from
  hand-written HTML.
*/

/* --- Language switcher --------------------------------------------------
   The prototype used <button> elements driven by JavaScript. Polylang outputs
   real <a> links instead — better for SEO and it works without JS — so the same
   pill styling is repeated here for anchors. */
.lang a {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .34rem .7rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-45);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.lang a:hover { color: var(--forest-deep); }
.lang a.is-active { background: var(--forest); color: #fff; }

/* --- WordPress core alignment classes ----------------------------------- */
.alignleft {
  float: left;
  margin: .4rem 1.75rem 1.25rem 0;
}
.alignright {
  float: right;
  margin: .4rem 0 1.25rem 1.75rem;
}
.aligncenter {
  clear: both;
  display: block;
  margin-inline: auto;
}
.alignwide,
.alignfull {
  margin-inline: auto;
}

/* Full-bleed blocks inside the narrow article column */
.article-body .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.article-body .alignwide {
  width: min(100vw - 2 * var(--gut), 1100px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- Editor-inserted media --------------------------------------------- */
.wp-caption { max-width: 100%; }
.wp-caption img { width: 100%; }
.wp-caption-text,
.wp-element-caption {
  font-size: .84rem;
  color: var(--ink-45);
  margin-top: .65rem;
  padding-left: .9rem;
  border-left: 2px solid var(--gold);
}

.wp-block-image { margin-block: 2.25rem; }
.wp-block-image img { border-radius: var(--r-md); }

/* --- Screen-reader text (WordPress convention) -------------------------- */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  clip-path: none;
  color: var(--forest-deep);
  display: block;
  font-size: .9rem;
  font-weight: 600;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: .8rem 1.25rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 200;
}

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

/* --- Comments are not used on this site --------------------------------- */
.comments-area { display: none; }

/* --- Pagination --------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 3rem;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding-inline: .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-70);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.pagination .page-numbers:hover {
  border-color: var(--moss);
  color: var(--forest-deep);
}
.pagination .page-numbers.current {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}
.pagination .dots {
  border-color: transparent;
  background: transparent;
}

/* --- Empty states ------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--ink-45);
  background: var(--paper);
}
.empty-state p { margin: 0; }

/* --- Contact form ------------------------------------------------------- */

/* Honeypot. Kept out of view without display:none, which some bots detect. */
.field--trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  background: #FDECEA;
  border-left: 4px solid #B32D2E;
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: #8A2322;
  font-weight: 500;
}

/* The success note is the same pill as the prototype's, shown above the fields. */
.form .form-note {
  margin-top: 0;
  margin-bottom: 1.25rem;
}