/* ============================================================
   Upgrade Pleasing Allah Child Theme — overrides.css
   Purpose:
   1) Match the main pleasing-allah.com visual style
   2) Plain white background (no drops / no gradients)
   3) Slim Olivero header
   4) Green + gold colour scheme
   5) Clean header search + buttons
   6) Wider main content area
   7) Generic branding block styling
   8) Mobile header stacking
   9) Zuko nested accordion readability helpers
   10) Force bold where text filters suppress it

   Based on the current UPA child-theme CSS, rebuilt to match
   the discover.pleasing-allah.com working version.
   ============================================================ */


/* ------------------------------------------------------------
   0) Brand variables
   ------------------------------------------------------------ */

:root {
  --pa-green: #007A3D;
  --pa-green-dark: #005F2C;
  --pa-gold: #CBA135;
  --pa-black: #111111;
  --pa-light-bg: #F7F7F7;

  --zx-accent: #6aa86f;
  --zx-accent-soft: #d7ead9;
}


/* ------------------------------------------------------------
   1) Global background: plain white
   ------------------------------------------------------------ */

html,
body,
.dialog-off-canvas-main-canvas,
.layout-container,
.page-wrapper {
  background-color: #ffffff !important;
  background-image: none !important;
}


/* ------------------------------------------------------------
   2) Force bold when filtered text weakens strong/b
   ------------------------------------------------------------ */

strong,
b {
  font-weight: 700 !important;
}


/* ------------------------------------------------------------
   3) Slimmer Olivero header (desktop)
   ------------------------------------------------------------ */

@media (min-width: 900px) {
  .site-header {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    min-height: 0 !important;
  }

  .site-header__inner,
  .site-header .header__inner,
  .site-header .region-header,
  .site-header .site-branding,
  .site-header .site-branding__inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  main[role="main"],
  .region-content {
    margin-top: 0.5rem !important;
  }
}


/* ------------------------------------------------------------
   4) Widen main content area (desktop)
   ------------------------------------------------------------ */

@media (min-width: 900px) {
  .page-wrapper {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #main > .main-content > .layout-container,
  .main-content .layout-container,
  .region-content {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}


/* ------------------------------------------------------------
   5) Main colour theme + remove unwanted Olivero effects
   ------------------------------------------------------------ */

.site-header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 2px solid var(--pa-gold) !important;
  box-shadow: none !important;
}

.site-header::before,
.site-header::after,
.site-header__inner::before,
.site-header__inner::after,
.region-header::before,
.region-header::after {
  content: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Links */
a {
  color: var(--pa-green);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--pa-gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Buttons */
button,
.button,
.btn,
input[type="submit"] {
  background-color: var(--pa-green) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  border: none !important;
  background-image: none !important;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover {
  background-color: var(--pa-green-dark) !important;
}

/* Menu links */
header .menu a,
.region-header a,
.site-header a {
  color: var(--pa-black);
}

header .menu a:hover,
.region-header a:hover,
.site-header a:hover {
  color: var(--pa-green) !important;
}

/* HR lines */
hr {
  border: 0 !important;
  border-top: 2px solid var(--pa-green) !important;
}

/* Regions */
.region-content {
  background-color: #ffffff !important;
}

.region-highlighted,
.region-featured {
  background-color: var(--pa-light-bg) !important;
}

/* Footer */
.site-footer {
  background-color: #ffffff !important;
  border-top: 3px solid var(--pa-green) !important;
  color: var(--pa-black) !important;
}

.site-footer a {
  color: var(--pa-green) !important;
}

.site-footer a:hover {
  color: var(--pa-gold) !important;
}


/* ------------------------------------------------------------
   6) Header branding block
   Generic version for subdomain use
   ------------------------------------------------------------ */

/* Remove blue gradient / visual effects from branding area */
.site-branding,
.site-branding__inner,
.region-header,
.region-header .block-system-branding-block,
.region-header .site-branding-block,
.region-header .block {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Branding row */
.site-branding,
.block-system-branding-block,
.site-branding__inner {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* Logo sizing */
.site-branding img,
.block-system-branding-block img,
.region-header img {
  max-height: 42px !important;
  height: auto !important;
  width: auto !important;
  margin-right: 8px !important;
}

/* Site name */
.site-branding__name,
.site-branding__name a,
.block-system-branding-block .site-branding__name,
.block-system-branding-block .site-branding__name a {
  color: var(--pa-green) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Hide any odd gradient banner look from nested wrappers */
.region-header *,
.site-branding * {
  background-image: none;
}


/* ------------------------------------------------------------
   7) Header search: clean and simple
   ------------------------------------------------------------ */

.block-search,
.block-search-form-block,
.search-block-form {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Compact in header */
.site-header .block-search,
.site-header .block-search-form-block {
  max-width: 420px;
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0.25rem 0;
}

/* Horizontal row on desktop */
.site-header .block-search form,
.site-header .block-search-form-block form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}

/* White search input */
header .block-search input[type="search"],
.site-header .block-search input[type="search"],
.region-header .block-search input[type="search"],
.block-search input[type="search"],
input[type="search"].form-search,
.block-search [name="keys"][type="search"] {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #c9c9c9 !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.9rem !important;
}

/* Placeholder */
header .block-search input[type="search"]::placeholder,
.site-header .block-search input[type="search"]::placeholder,
.region-header .block-search input[type="search"]::placeholder,
.block-search input[type="search"]::placeholder {
  color: #666666 !important;
  opacity: 1 !important;
}

/* Search submit */
header .block-search .form-actions input[type="submit"],
header .block-search button[type="submit"],
.site-header .block-search .form-actions input[type="submit"],
.site-header .block-search button[type="submit"],
.search-block-form input[type="submit"],
#block-searchform input[type="submit"] {
  background-color: var(--pa-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.375rem !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.85rem !important;
}

header .block-search .form-actions input[type="submit"]:hover,
header .block-search button[type="submit"]:hover,
.site-header .block-search .form-actions input[type="submit"]:hover,
.site-header .block-search button[type="submit"]:hover,
.search-block-form input[type="submit"]:hover,
#block-searchform input[type="submit"]:hover {
  background-color: var(--pa-green-dark) !important;
  box-shadow: 0 0 0 2px var(--pa-gold) !important;
}

/* Focus */
input[type="search"]:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  outline: 2px solid var(--pa-gold) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------
   8) Mobile header: stack logo, search, menu
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  .site-header__inner {
    display: block !important;
  }

  .site-header__inner > * {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .site-branding,
  .block-system-branding-block,
  .site-branding__inner {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .site-branding__name,
  .site-branding__name a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .site-header .block-search,
  .site-header .block-search-form-block {
    max-width: 100% !important;
    margin: 0.25rem auto !important;
  }

  .site-header .block-search form,
  .site-header .block-search-form-block form {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .site-header .block-search input[type="search"] {
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  .site-header .block-search .form-actions input[type="submit"],
  .site-header .block-search button[type="submit"] {
    width: auto !important;
    align-self: flex-end !important;
  }

  .mobile-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0.25rem !important;
  }

  .mobile-buttons button,
  .mobile-buttons .button {
    white-space: nowrap !important;
    background-color: var(--pa-green) !important;
  }

  .mobile-buttons button:hover,
  .mobile-buttons .button:hover {
    background-color: var(--pa-green-dark) !important;
    box-shadow: 0 0 0 2px var(--pa-gold) !important;
  }
}


/* ------------------------------------------------------------
   9) Lesson taxonomy tags as inline pills
   Keep in case upgrade later uses Lesson content
   ------------------------------------------------------------ */

.node--type-lesson .field--type-taxonomy-term-reference .field__items,
.node--type-lesson .field--type-entity-reference .field__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node--type-lesson .field--type-taxonomy-term-reference .field__item,
.node--type-lesson .field--type-entity-reference .field__item {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
}

.node--type-lesson .field--type-taxonomy-term-reference .field__item a,
.node--type-lesson .field--type-entity-reference .field__item a {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: #eef3ff;
  font-size: 0.9rem;
  text-decoration: none;
}

.node--type-lesson .field--type-taxonomy-term-reference .field__item a:hover,
.node--type-lesson .field--type-entity-reference .field__item a:hover {
  background-color: #d8e4ff;
  text-decoration: underline;
}


/* ------------------------------------------------------------
   10) Zuko accordion readability helpers
   ------------------------------------------------------------ */

.zx-nested {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--zx-accent-soft);
}

.zx-nested > details {
  margin-top: 0.75rem;
}

.zx-nested summary {
  font-size: 0.95em;
}

.zx-lead {
  margin: 0 0 0.75rem 0;
  color: #111111;
}

.zx-close {
  margin: 0.75rem 0 0 0;
  color: #111111;
}

.zx-divider {
  border: 0 !important;
  border-top: 1px solid #e0e0e0 !important;
  margin: 1rem 0 !important;
}


/* ------------------------------------------------------------
   11) Optional note styling
   ------------------------------------------------------------ */

blockquote {
  margin: 0.75rem 0;
  padding: 0;
  border: 0;
  font-size: 1em;
  line-height: 1.5;
}

blockquote strong.zx-note-label {
  color: #b30000;
  font-weight: 700;
}


/* ------------------------------------------------------------
   12) Image sanity
   ------------------------------------------------------------ */

img {
  max-width: 100%;
  height: auto;
}