/*
 * PostSecret theme tokens
 * ----------------------------------------------------------------------------
 * Layered on top of theme.json's `--wp--preset--color--*` presets. Keep
 * additions grouped by semantic role so consumers know which token to reach
 * for. Raw hex / rgba in stylesheets should stay minimal — if you find
 * yourself repeating a value, promote it here. See issue #94.
 */
:root {

  /* -- Brand ---------------------------------------------------------- */
  --ps-red: #E02A2A;              /* Primary PostSecret red (also in theme.json as --accent) */
  --ps-red-dark: #8A1A1A;         /* Darker red for hover / Patreon CTA bg */
  --ps-red-soft: rgba(224, 42, 42, 0.15);   /* Error banner / search-error tint */
  --ps-red-medium: rgba(224, 42, 42, 0.25); /* Match highlight tint */
  --ps-red-glow: rgba(224, 42, 42, 0.3);    /* Similarity-badge drop shadow */
  --ps-red-accessible: #FF5252;   /* Lighter red for text on dark surfaces.
                                     Passes WCAG AA 4.5:1 against #1a1a1a
                                     (helpline band) — brand --ps-red is 3.55:1
                                     and fails for body-size text. Use only
                                     where the colour conveys meaning AND the
                                     text size is below large-text threshold. */

  /* -- Surfaces ------------------------------------------------------- */
  --ps-helpline-bg: #1a1a1a;      /* Dark helpline band */

  /* -- Scrims (white-on-dark overlay tints) --------------------------- */
  --ps-scrim-08: rgba(255, 255, 255, 0.08);  /* Hover tint on dropdown options */
  --ps-scrim-10: rgba(255, 255, 255, 0.1);   /* Results divider hairline */
  --ps-scrim-15: rgba(255, 255, 255, 0.15);  /* Topic chip border, footer legal border */
  --ps-scrim-20: rgba(255, 255, 255, 0.2);   /* Filter pill border */
  --ps-scrim-60: rgba(255, 255, 255, 0.6);   /* Footer legal text */
  --ps-scrim-80: rgba(255, 255, 255, 0.8);   /* Footer description text */
  --ps-scrim-85: rgba(255, 255, 255, 0.85);  /* Helpline card text */
  --ps-scrim-90: rgba(255, 255, 255, 0.9);   /* Primary dark-surface text (About body copy) */

  /* -- Facet palette (ROYGBV, chosen for legibility on the dark bg) --- */
  --ps-facet-feeling: #f87171;    /* red   */
  --ps-facet-location: #fb923c;   /* orange */
  --ps-facet-meaning: #facc15;    /* yellow */
  --ps-facet-style: #4ade80;      /* green */
  --ps-facet-topic: #60a5fa;      /* blue */
  --ps-facet-vibe: #a78bfa;       /* purple */

  /* -- Match-badge semantic colors (bg tint + WCAG-AA text step) ------
     issue #232: the indigo/violet text read as low-contrast on the cards.
     Brightened the fg one step (200) and firmed the translucent bg so the
     light image behind a card can't bleed through and wash it out. */
  --ps-badge-text-bg: rgba(67, 56, 202, 0.32);        /* indigo tint */
  --ps-badge-text-fg: #c7d2fe;                        /* indigo-200 */
  --ps-badge-semantic-bg: rgba(109, 40, 217, 0.32);   /* violet tint */
  --ps-badge-semantic-fg: #ddd6fe;                    /* violet-200 */
  --ps-badge-topic-bg: rgba(16, 185, 129, 0.2);       /* emerald tint */
  --ps-badge-topic-fg: #6ee7b7;                       /* lighter emerald */
  --ps-badge-facet-bg: rgba(245, 158, 11, 0.2);       /* amber tint */
  --ps-badge-facet-fg: #fbbf24;                       /* lighter amber */

  /* -- Card-snippet highlight ---------------------------------------- */
  --ps-highlight-fg: #f87171;     /* Red tint for `<mark>` inside card snippets */

  /* -- Topic-tag "ghost" neutral ------------------------------------- */
  --ps-ghost: #C5C5C5;            /* Topic-tag border + text on dark bg */
}

/* Baseline page surfaces */
body,
html {
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text);
}

.wp-block-post,
.wp-block-query .wp-block-post-template > li {
  background: var(--wp--preset--color--bg);
  border: none;
  border-radius: 0;
  padding: clamp(2rem, 4vw, 3rem) 0;
  margin-bottom: 0;
}

/* Card hover effects - subtle background tint */
.wp-block-post:hover,
.wp-block-query .wp-block-post-template > li:hover {
  background: var(--wp--preset--color--tint);
  transition: background-color 0.2s ease;
}

/* Image styling for secrets - clean, no borders */
.wp-block-post-featured-image img {
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Muted text */
.wp-block-post-excerpt,
.post-meta,
.secret-meta {
  color: var(--wp--preset--color--muted);
}

/* Focus states */
button:focus,
a:focus,
input:focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* Theme toggle button */
[data-ps-theme-toggle] {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--text);
  padding: 0.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-ps-theme-toggle]:hover {
  background: transparent;
  color: var(--wp--preset--color--accent);
}

/* Secret archive - catalog layout */
.secret-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.secret-card {

  /* Handled by .ps-catalog-card styles */
}

.secret-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.secret-tag {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.secret-tag:hover {
  background: var(--wp--preset--color--accent);
  color: #fff;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .wp-block-post:hover,
  .wp-block-query .wp-block-post-template > li:hover,
  .secret-card:hover,
  [data-ps-theme-toggle] {
    transform: none;
    transition: none;
  }
}

/* Screen reader only text */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* -----------------------
 * Header is always black — styles live in style.css
 * -----------------------*/

/* Search form styling - Best practices */
.ps-search,
.ps-semantic-search {
  display: flex;
  align-items: stretch;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  position: relative;
}

.ps-search-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* Header search input only (.ps-search__input, double underscore).
   The JS-built unified-search input (.ps-search-input, single hyphen,
   created by search/field.js inside .ps-search-control) must NOT match
   here: these rules used to leak onto it at rest while unified-search.css
   won on :focus, making the hero/SERP box change size and reposition its
   text when clicked (issue #285). unified-search.css owns that element. */
.ps-search__input {
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-right: none;
  padding: 0.625rem 0.875rem;
  color: var(--wp--preset--color--text);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  width: 200px;
  min-width: 150px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ps-search__input:hover {
  border-color: var(--wp--preset--color--muted);
}

.ps-search__input:focus {
  border-color: var(--wp--preset--color--accent);
  border-right: 1px solid var(--wp--preset--color--accent);
  z-index: 1;
  position: relative;
}

.ps-search__input::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 0.7;
}

.ps-search__btn,
.ps-search-button {
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 1px solid var(--wp--preset--color--border);
  padding: 0.625rem 0.875rem;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: all 0.2s ease;
  font-size: 1rem;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.ps-search__btn:hover,
.ps-search-button:hover {
  background: var(--wp--preset--color--accent);
  color: #fff;
  border-color: var(--wp--preset--color--accent);
}

.ps-search__btn:focus,
.ps-search-button:focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  z-index: 2;
  position: relative;
}

.ps-search__btn:active,
.ps-search-button:active {
  transform: scale(0.98);
}

/* Ensure input and button align properly */
.ps-search__input:focus + .ps-search__btn {
  border-left-color: var(--wp--preset--color--accent);
}

/* Responsive search */
@media (max-width: 768px) {
  .ps-search__input {
    width: 150px;
    min-width: 120px;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }

  .ps-search__btn,
  .ps-search-button {
    padding: 0.5rem 0.75rem;
  }
}

/* Header responsive — styles live in style.css */

/* -----------------------
 * Footer Styles
 * -----------------------*/
.ps-footer {
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text);
  border-top: none;
}

/* Footer logo */
.ps-footer__brand {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.ps-footer__brand:hover {
  opacity: 0.8;
}

.ps-logo--footer {
  height: 28px;
  width: auto;
  transition: opacity 0.2s ease;
}

/* Help card styling */
.ps-help-card {
  display: block;
  background: var(--wp--preset--color--accent);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 0;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  border: none;
}

.ps-help-card:hover {
  background: var(--ps-red);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Footer theme toggle - smaller, outline style */
.ps-footer .ps-theme-toggle .wp-block-button__link {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--text);
  padding: 0.375rem;
  border-radius: 0;
  font-size: 0.875rem;
}

.ps-footer .ps-theme-toggle .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--accent);
}

/* Footer responsive */
@media (max-width: 768px) {
  .ps-footer .wp-block-group {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .ps-help-card {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* -----------------------
 * Share a Secret Section
 * Big black band with sample confession in red italics
 * -----------------------*/
.ps-share-section {
  background: var(--wp--preset--color--text); /* Black in light mode, white in dark */
  color: var(--wp--preset--color--bg);
  padding: clamp(3rem, 6vw, 5rem) var(--breathing-room, 2rem);
  text-align: center;
  margin: 0;
}

.ps-share-section__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--accent);
  margin-bottom: 1rem;
}

.ps-share-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--wp--preset--color--bg);
}

.ps-share-section__confession {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--wp--preset--color--accent);
  margin: 1.5rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ps-share-link {
  display: inline-block;
  margin-top: 1.5rem;
  transition: opacity 0.2s ease;
}

.ps-share-link:hover {
  opacity: 0.9;
}

.ps-share-link:focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

/* -----------------------
 * Hero - Layered collage of postcards
 * Slightly askew, real artifacts vibe
 * -----------------------*/
.ps-hero {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--wp--preset--color--tint);
    border: none;
}

/* Override for dark variant - no background */
.ps-hero--dark {
    background: none !important;
}

/* Force hero text colors regardless of WordPress inline styles */
.ps-hero--dark .ps-hero__dek,
.ps-hero--dark .ps-hero__dek.has-text-color,
.ps-hero--dark p.ps-hero__dek {
    color: var(--ps-red-dark) !important;
}

.ps-hero__visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: var(--content-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--breathing-room, 2rem);
}

.ps-hero__card {
    position: relative;
    display: block;
    border-radius: 0;
    overflow: hidden;
    transform: rotate(-1deg);
    border: none;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.ps-hero__card:nth-child(even) {
    transform: rotate(0.8deg);
}

.ps-hero__card:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: none;
    z-index: 10;
}

.ps-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive: single column on mobile */
@media (max-width: 768px) {
    .ps-hero__visual {
        grid-template-columns: 1fr;
    }

    .ps-hero__card {
        transform: rotate(0);
    }
}

/* Buttons - minimal and confident */
.ps-pill,
.wp-block-button__link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    background: var(--wp--preset--color--accent);
    color: #fff;
    transition: all 0.2s ease;
    border-radius: 0;
}

.ps-pill:hover,
.wp-block-button__link:hover {
    background: var(--ps-red);
    color: #fff;
}

.ps-pill:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Outlined variant */
.ps-pill--outline {
    background: transparent;
    color: var(--wp--preset--color--accent);
}

.ps-pill--outline:hover {
    background: var(--wp--preset--color--accent);
    color: #fff;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
    .ps-pill,
    .wp-block-button__link {
        transition: none;
    }
}

/* ----- Secret Metadata Display ----- */
.ps-secret-metadata {
    margin: var(--wp--preset--spacing--50) 0;
    display: grid;
    gap: var(--wp--preset--spacing--40);
}

.ps-metadata-section {
    background: transparent;
    border-radius: 0;
    padding: var(--wp--preset--spacing--40);
    border: none;
}

.ps-metadata-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    color: var(--wp--preset--color--text);
}

.ps-metadata-grid {
    display: grid;
    gap: var(--wp--preset--spacing--20);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ps-metadata-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ps-metadata-item strong {
    font-weight: 500;
    color: var(--wp--preset--color--text);
    font-size: 0.875rem;
}

.ps-metadata-item span,
.ps-metadata-item p {
    color: var(--wp--preset--color--muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Post meta styling */
.ps-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ps-tag {
    background: transparent;
    color: var(--wp--preset--color--accent);
    padding: 2px 8px;
    border-radius: 0;
    font-size: 0.75rem;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Status indicators */
.ps-review-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.ps-review-status.needs-review {
    background: #fef3c7;
    color: #92400e;
}

.ps-review-status.auto-vetted {
    background: #d1fae5;
    color: #065f46;
}

.ps-review-status.flagged {
    background: #fee2e2;
    color: #991b1b;
}

.ps-pii-status.true {
    color: #dc2626;
    font-weight: 500;
}

.ps-pii-status.false {
    color: #16a34a;
    font-weight: 500;
}

/* Progress bars */
.ps-nsfw-display,
.ps-confidence-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-nsfw-bar,
.ps-confidence-bar {
    flex: 1;
    height: 6px;
    background: var(--wp--preset--color--border);
    border-radius: 3px;
    overflow: hidden;
}

.ps-nsfw-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ps-confidence-fill {
    height: 100%;
    background: var(--wp--preset--color--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Classification tags */
.ps-classification-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ps-classification-tag {
    background: var(--wp--preset--color--border);
    color: var(--wp--preset--color--text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ps-metadata-grid {
        grid-template-columns: 1fr;
    }

    .ps-metadata-section {
        padding: var(--wp--preset--spacing--30);
    }

    .ps-nsfw-display,
    .ps-confidence-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ps-nsfw-bar,
    .ps-confidence-bar {
        width: 100%;
        min-width: 120px;
    }
}

.ps-metadata-section {
    background: var(--wp--preset--color--surface) !important;
    border-color: var(--wp--preset--color--border) !important;
}

.ps-review-status.needs-review {
    background: #451a03;
    color: #fbbf24;
}

.ps-review-status.auto-vetted {
    background: #064e3b;
    color: #34d399;
}

.ps-review-status.flagged {
    background: #7f1d1d;
    color: #f87171;
}

/* ----- Search Results Styling ----- */
.ps-search-info {
    margin-bottom: var(--wp--preset--spacing--30);
    padding: var(--wp--preset--spacing--20);
    background: transparent;
    border-radius: 0;
    border: none;
}

.ps-search-info p {
    margin: 0;
    color: var(--wp--preset--color--muted);
    font-size: 0.875rem;
}

.ps-search-query strong {
    color: var(--wp--preset--color--text);
    font-weight: 500;
}

.ps-search-count {
    margin-left: 0.5rem;
    font-style: italic;
}

/* Search term highlighting */
.ps-highlight {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--bg);
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 500;
}

/* Search results grid responsive */
@media (max-width: 768px) {
    .wp-block-query .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1024px) {
    .wp-block-query .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Overrides to ensure the search-info card and highlight mark render on the
   dark surface tokens even when WordPress block styles cascade in later. */
.ps-search-info {
    background: var(--wp--preset--color--surface) !important;
    border-color: var(--wp--preset--color--border) !important;
}

.ps-highlight {
    background: var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--bg) !important;
}

/* ----- Helpline Section — dark aesthetic to match site ----- */
.ps-helpline-section {
    background: var(--ps-helpline-bg) !important;
    border-top: 1px solid var(--ps-scrim-08);
    border-bottom: 1px solid var(--ps-scrim-08);
}

.ps-helpline-card {
    color: var(--ps-scrim-90) !important;
    padding: 72px 0 !important;
}

/* Ensure WordPress group inside helpline doesn't add extra padding */
.ps-helpline-section .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ps-helpline-card__title {
    color: #fff !important;
}

.ps-helpline-card__text {
    color: var(--ps-scrim-85) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

/* CTA link styled as red accent on dark background.
   Uses the lighter --ps-red-accessible (#FF5252), NOT the brand --ps-red
   (#E02A2A): this CTA sits on the helpline band's dark surface and the
   brand red fails WCAG AA contrast (3.55:1) at body-size text (#169). The
   !important here was overriding the accessible color set in style.css, so
   it must carry the accessible token itself to actually win. */
.ps-helpline-card__cta,
a.ps-helpline-card__cta {
    color: var(--ps-red-accessible) !important;
    font-weight: 600;
}

/* Illustration — invert for dark background */
.ps-helpline-card__visual img {
    filter: invert(1) !important;
    opacity: 0.7;
}

/* Hide external link icon and emoji images - all variants */
.ps-helpline-card__cta .external-link-icon,
.ps-helpline-card__cta svg,
.ps-helpline-card__cta img,
.ps-helpline-card__cta img.emoji,
.ps-helpline-card__cta::after,
a.ps-helpline-card__cta .external-link-icon,
a.ps-helpline-card__cta svg,
a.ps-helpline-card__cta img,
a.ps-helpline-card__cta img.emoji,
a[target="_blank"].ps-helpline-card__cta .external-link-icon,
a[target="_blank"].ps-helpline-card__cta svg,
a[target="_blank"].ps-helpline-card__cta img,
a[target="_blank"].ps-helpline-card__cta img.emoji {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Force grid layout on helpline card */
.ps-helpline-card {
    display: grid !important;
    grid-template-columns: 1fr minmax(0, 600px) !important;
    gap: 48px !important;
    overflow: hidden;
}

/* Helpline visual - responsive with max */
.ps-helpline-card__visual img {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
}

.ps-helpline-card__visual {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 0 !important;
}

/* Desktop only - ensure grid layout */
@media (min-width: 769px) {
    .ps-helpline-card {
        display: grid !important;
        grid-template-columns: 1fr minmax(0, 600px) !important;
    }
}

/* Mobile - make image responsive */
@media (max-width: 768px) {
    .ps-helpline-card {
        grid-template-columns: 1fr !important;
    }

    .ps-helpline-card__visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ps-helpline-card__visual img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}