/*
Theme Name: Blocksy Child
Template: blocksy
Description: Child theme for the West African Queer Dictionary
Version: 1.0.0
*/

/* ======================================================
   WAQD Dictionary Styles

   COLOR SYSTEM: every color used below is a CSS variable
   defined here at the top. When the client sends a brand
   kit, you only need to change the values in :root and
   [data-theme="dark"] — nothing else in this file needs
   to be touched.
====================================================== */

:root {
    --waqd-bg: #f6f4ef;
    --waqd-surface: #fdfcfa;
    --waqd-text: #1c1a2e;
    --waqd-text-muted: #5c5868;
    --waqd-border: #e4e1d8;
    --waqd-chip-bg: #f3f1ea;
    --waqd-accent: #0f766e;
    --waqd-accent-hover: #0b5c56;
    --waqd-accent-text: #ffffff;
    --waqd-warning-border: #f59e0b;
    --waqd-warning-bg: #fffbeb;
    --waqd-restricted-border: #dc2626;
    --waqd-restricted-bg: #fef2f2;

    /* Indigo — primary brand voice for Home and future page redesigns. */
    --waqd-indigo: #2b2560;
    --waqd-indigo-deep: #1c1840;

    /* Community/CTA band — a mid-tone in light mode (lighter than
       the deepest indigo), deepens further in dark mode below. */
    --waqd-band-bg: #2b2560;
    --waqd-band-text: #ffffff;
}

/* ======================================================
   NAMING GUIDE — read this before changing any color.
   Every --waqd-* variable controls ONE role, used everywhere
   that role appears on the site. Change the value here once;
   it updates every matching element automatically.

     --waqd-bg            page background
     --waqd-surface       card/panel background
     --waqd-text           main text color
     --waqd-text-muted     secondary/quieter text
     --waqd-border         hairline borders
     --waqd-chip-bg         pill/chip background (meta tags)
     --waqd-accent          teal — utility buttons (Reveal Definition,
                             Request Access, language toggle)
     --waqd-accent-hover    teal button on hover
     --waqd-indigo           primary brand color — main CTA buttons,
                              hero/section headings
     --waqd-indigo-deep      darker indigo — hover fill, dark headings
     --waqd-band-bg           the full-width "Suggest a Word" band
     --waqd-band-text         text color inside that band
====================================================== */

/* ======================================================
   Dark mode — two layers.
   1. A blunt whole-page color inversion (base fallback), which still
      covers pages we haven't designed yet (Home/About/News use
      Blocksy's default styling we've never touched) — no need to know
      Blocksy's internal class names for those.
   2. Real, hand-picked dark colors for the areas we HAVE actually
      designed (.waqd-wrapper on dictionary pages, and the whole
      .waqd-home-* set on the Home page). These areas cancel out the
      blunt inversion (applying the same filter twice returns to
      normal) and use proper dark variables instead.
====================================================== */

[data-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;

    --waqd-bg: #1c1830;
    --waqd-surface: #292440;
    --waqd-text: #eeeaf5;
    --waqd-text-muted: #a49dbd;
    --waqd-border: #3d3559;
    --waqd-chip-bg: #342d52;
    --waqd-accent: #14b8a6;
    --waqd-accent-hover: #2dd4bf;
    --waqd-accent-text: #15121f;

    /* Deepened from the earlier pastel-lilac tone — richer, less washed out. */
    --waqd-indigo: #6d5fd1;
    --waqd-indigo-deep: #eeeaf5;

    /* Darker than the page background, so the band still reads as a
       distinct, deliberate section rather than blending in. */
    --waqd-band-bg: #0b0a14;
    --waqd-band-text: #eeeaf5;

    /* Warning/restricted boxes — the colored BORDER is the signal;
       background stays the same neutral dark surface as every other
       card, instead of introducing an off-brand brown/red tint. */
    --waqd-warning-border: #f59e0b;
    --waqd-warning-bg: #292440;
    --waqd-restricted-border: #ef4444;
    --waqd-restricted-bg: #292440;
}

[data-theme="dark"] img,
[data-theme="dark"] video,
[data-theme="dark"] iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Cancel the blunt inversion specifically on the areas we've designed
   for real, so they show true, intentional dark colors instead. */
[data-theme="dark"] .waqd-wrapper,
[data-theme="dark"] .waqd-home-hero,
[data-theme="dark"] .waqd-home-section,
[data-theme="dark"] .waqd-home-band,
[data-theme="dark"] .waqd-home-closing,
[data-theme="dark"] .wpforms-container,
[data-theme="dark"] body > footer,
[data-theme="dark"] #footer,
[data-theme="dark"] .site-footer {
    filter: invert(1) hue-rotate(180deg);
}

[data-theme="dark"] .wpforms-container {
    background: var(--waqd-bg);
    padding: 20px;
    border-radius: 16px;
}

/* ======================================================
   Pride accent
   A subtle rainbow touch that's independent of whatever
   brand palette arrives later — decorative texture, not a
   color scheme. Used sparingly: a thin gradient strip, not
   full-color blocks.
====================================================== */

:root {
    --waqd-pride-gradient: linear-gradient(
        90deg,
        #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787
    );
}

.waqd-card {
    position: relative;
    overflow: hidden;
}

.waqd-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--waqd-pride-gradient);
}

.waqd-header h1 {
    background: var(--waqd-pride-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ======================================================
   Force our colors to win over Blocksy's own heading/text
   styles, so headings/text inside dictionary cards consistently
   use our palette instead of Blocksy's defaults. Scoped to
   .waqd-wrapper only, so it never touches Blocksy's header/
   footer/nav elsewhere on the site.
====================================================== */

.waqd-wrapper h1,
.waqd-wrapper h2,
.waqd-wrapper h3,
.waqd-wrapper p,
.waqd-wrapper li,
.waqd-wrapper span:not(.waqd-lock) {
    color: var(--waqd-text) !important;
}

.waqd-btn,
.waqd-btn:hover {
    color: var(--waqd-accent-text) !important;
}

.waqd-back-link,
.waqd-back-link:hover,
.waqd-pronunciation {
    color: var(--waqd-text-muted) !important;
}

/* ======================================================
   Layout
====================================================== */

.waqd-wrapper {
    max-width: 1000px;
    margin: 60px auto;
    padding: 30px;
    color: var(--waqd-text);
}

.waqd-header {
    margin-bottom: 40px;
}

.waqd-header h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--waqd-text);
}

.waqd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
}

.waqd-meta span {
    background: var(--waqd-chip-bg);
    color: var(--waqd-text);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 15px;
}

.waqd-card {
    background: color-mix(in srgb, var(--waqd-surface) 72%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: var(--waqd-text);
    border-radius: 20px;
    padding: 35px;
    margin-bottom: 35px;
    border: 1px solid color-mix(in srgb, var(--waqd-text) 8%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, white 40%, transparent) inset,
        0 20px 40px -12px rgba(28, 26, 46, .12),
        0 4px 12px rgba(28, 26, 46, .05);
}

.waqd-card h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 30px;
    color: var(--waqd-text);
}

.waqd-card h3 {
    margin-top: 25px;
    margin-bottom: 8px;
    color: var(--waqd-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.waqd-card p {
    line-height: 1.8;
    font-size: 17px;
    color: var(--waqd-text);
}

hr {
    display: none;
}

@media (max-width: 768px) {
    .waqd-wrapper {
        padding: 20px;
    }
    .waqd-header h1 {
        font-size: 38px;
    }
}

/* ======================================================
   Pronunciation
====================================================== */

.waqd-pronunciation {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--waqd-text-muted);
}

/* ======================================================
   Audio player card
====================================================== */

.waqd-audio audio {
    width: 100%;
}

/* ======================================================
   Chips (related words / tags)
====================================================== */

.waqd-chip {
    display: inline-block;
    background: var(--waqd-chip-bg);
    color: var(--waqd-text);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 15px;
    text-decoration: none;
    transition: opacity .15s ease;
}

a.waqd-chip:hover {
    opacity: .75;
}

/* ======================================================
   References list
====================================================== */

.waqd-references {
    padding-left: 20px;
    line-height: 1.9;
    font-size: 16px;
    color: var(--waqd-text);
}

/* ======================================================
   Buttons (Request Access / Reveal Definition / Language toggle)
====================================================== */

.waqd-btn {
    display: inline-block;
    box-sizing: border-box;
    background: var(--waqd-accent);
    color: var(--waqd-accent-text);
    padding: 13px 26px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
}

.waqd-btn:hover {
    background: var(--waqd-accent-hover);
    color: var(--waqd-accent-text);
}

.waqd-lang-toggle-btn {
    margin-top: 0;
}

/* ======================================================
   Language toggle — only one .waqd-lang-block visible at a time
====================================================== */

.waqd-lang-block {
    display: none;
}

.waqd-lang-block.waqd-active {
    display: block;
}

/* ======================================================
   Sensitive content warning card
====================================================== */

.waqd-sensitive-warning {
    border: 2px solid var(--waqd-warning-border);
    background: var(--waqd-warning-bg);
}

.waqd-hidden-content {
    display: none;
}

.waqd-revealed-content {
    display: block;
}

/* ======================================================
   Restricted content card
====================================================== */

.waqd-restricted {
    border: 2px solid var(--waqd-restricted-border);
    background: var(--waqd-restricted-bg);
    text-align: center;
}

/* ======================================================
   A–Z Archive
====================================================== */

.waqd-az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.waqd-az-group h2 {
    font-size: 24px;
}

.waqd-az-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.waqd-az-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--waqd-border);
}

.waqd-az-list li:last-child {
    border-bottom: none;
}

.waqd-az-list a {
    color: var(--waqd-text);
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
}

.waqd-az-list a:hover {
    text-decoration: underline;
}

.waqd-az-snippet {
    margin: 6px 0 0;
    color: var(--waqd-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.waqd-az-snippet-warning {
    font-style: italic;
    color: var(--waqd-warning-border);
}

.waqd-chip-disabled {
    opacity: .3;
    cursor: default;
}

.waqd-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--waqd-text-muted);
    text-decoration: none;
    font-size: 15px;
}

.waqd-back-link-bottom {
    margin-top: 10px;
    margin-bottom: 0;
}

.waqd-back-link:hover {
    color: var(--waqd-text);
    text-decoration: underline;
}

.waqd-lock {
    font-size: 14px;
    margin-left: 4px;
}

/* ======================================================
   Search
====================================================== */

.waqd-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.waqd-search-form .waqd-btn {
    margin-top: 0;
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

.waqd-search-form input[type="search"] {
    flex: 1;
    box-sizing: border-box;
    height: 46px;
    padding: 0 18px;
    border-radius: 30px;
    border: 1.5px solid var(--waqd-border);
    background: var(--waqd-surface);
    color: var(--waqd-text);
    font-size: 15px;
}

.waqd-pagination {
    margin-top: 20px;
}

/* ======================================================
   Site-wide dark/light mode toggle button
   (injected by waqd-site-features.php via wp_footer)
====================================================== */

#waqd-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--waqd-border);
    background: var(--waqd-surface);
    color: var(--waqd-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#waqd-theme-toggle svg {
    width: 16px;
    height: 16px;
    stroke: var(--waqd-text);
}

/* Mobile/tablet: top-right collides with the hamburger menu, so
   move it to the bottom on smaller screens instead. */
@media (max-width: 1024px) {
    #waqd-theme-toggle {
        top: auto;
        bottom: 16px;
        right: 16px;
        width: 30px;
        height: 30px;
    }
    #waqd-theme-toggle svg {
        width: 14px;
        height: 14px;
    }
}

/* ======================================================
   Footer — tying Blocksy's default footer into the brand.
====================================================== */

body > header,
#header,
.site-header {
    position: relative;
}

body > footer,
#footer,
.site-footer,
body > footer *:not(a),
#footer *:not(a),
.site-footer *:not(a) {
    background-color: var(--waqd-band-bg) !important;
    color: #f4f2fb !important;
}

body > footer a,
#footer a,
.site-footer a {
    color: #ffffff !important;
}

body > footer a:hover,
#footer a:hover,
.site-footer a:hover {
    color: var(--waqd-accent) !important;
}


/* ======================================================
   WPForms — Request Access / Suggest a Word.
   WPForms' default markup renders every field with its own
   width/spacing, which is what was making the forms look
   scattered and misaligned. This forces every field to share
   the same full-width, consistent look as the rest of the site.
====================================================== */

.wpforms-container {
    max-width: 560px;
    margin: 0 auto;
}

.wpforms-container .wpforms-field {
    padding: 0 0 20px !important;
}

.wpforms-container .wpforms-field-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--waqd-text);
    margin-bottom: 6px !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--waqd-border) !important;
    background: var(--waqd-surface) !important;
    color: var(--waqd-text) !important;
    font-size: 15px !important;
    font-family: 'Inter', sans-serif;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    border-color: var(--waqd-accent) !important;
    outline: none !important;
}

.wpforms-container textarea {
    min-height: 120px !important;
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
    color: var(--waqd-text-muted) !important;
    font-size: 13px !important;
}

.wpforms-container button[type="submit"] {
    display: inline-block;
    background: var(--waqd-accent) !important;
    color: #fff !important;
    padding: 13px 28px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer;
}

.wpforms-container button[type="submit"]:hover {
    background: var(--waqd-accent-hover) !important;
}

.wpforms-container .wpforms-error {
    color: var(--waqd-restricted-border) !important;
    font-size: 13px !important;
}

/* ======================================================
   Header height — fallback if Blocksy's own Customizer
   padding control isn't found/used. Adjust the padding value
   below to taste.
====================================================== */

body > header,
#header,
.site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ======================================================
   Menu hover/current-page color — overriding Blocksy's
   default blue link color with the brand indigo. Using
   WordPress's own standard "current page" classes (added
   automatically by WP core to any nav menu, regardless of
   theme) so this works reliably without guessing Blocksy's
   internal class names.
====================================================== */

body > header a:hover,
#header a:hover,
.site-header a:hover,
body > header .current-menu-item > a,
#header .current-menu-item > a,
.site-header .current-menu-item > a,
body > header .current_page_item > a,
#header .current_page_item > a,
.site-header .current_page_item > a {
    color: var(--waqd-indigo) !important;
}