/*
 * The 20 Resource Directory — front-end styles.
 * Self-contained: every color/size value below has a hardcoded fallback, so
 * the directory looks reasonable even before any Settings are touched. The
 * plugin overrides these fallbacks per-site via the :root custom-property
 * block it prints inline (see class-shortcode.php wrap_vars()).
 */

.t20rd-wrap {
  font-family: inherit;
  color: #1f2933;
  max-width: 1100px;
  margin: 0 auto;
}

.t20rd-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.t20rd-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--t20rd-nav-button-text, #1f2933);
  background: var(--t20rd-nav-button-bg, #f4f6f8);
  border: 2px solid var(--t20rd-nav-button-border, #e2e8f0);
  padding: 10px 20px;
  border-radius: 100px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.t20rd-nav a:hover {
  border-color: var(--t20rd-button-bg, #2c3e50);
  transform: translateY(-2px);
}

/* Keeps the category jump-nav visible while the visitor scrolls through a
   long directory. --t20rd-nav-bg (Settings: "Jump-Nav Bar Background")
   defaults to transparent, so the bar blends into whatever page background
   it happens to scroll over — each filter button still has its own solid
   background (above), so legibility never depends on what's behind the bar.
   --t20rd-sticky-offset (Settings: "Sticky Jump-Nav Top Offset") lets a site
   account for its own sticky theme header, if any. */
.t20rd-nav-sticky {
  position: sticky;
  top: var(--t20rd-sticky-offset, 0px);
  z-index: 40;
  background: var(--t20rd-nav-bg, transparent);
  padding: 12px 8px;
  border-radius: 8px;
}

.t20rd-section {
  margin-bottom: 56px;
  /* Clears the sticky jump-nav's own height (~70px) plus its offset, so a
     jump-nav click scrolls the section heading to just below the sticky
     bar instead of underneath it. */
  scroll-margin-top: calc(var(--t20rd-sticky-offset, 0px) + 70px);
}
.t20rd-section-heading {
  font-size: var(--t20rd-heading-size, 1.5rem);
  margin: 0 0 12px;
  text-align: var(--t20rd-heading-align, center);
}
.t20rd-section-desc {
  max-width: var(--t20rd-desc-width, 640px);
  /* Not just `margin: 0 auto` — the left/right side that gets `auto` has to
     flip with the alignment choice, so the whole shorthand is computed
     server-side (see T20RD_Shortcode::desc_margin_for_align()) rather than
     expressed as a fixed rule here. */
  margin: var(--t20rd-desc-margin, 0 auto 24px);
  text-align: var(--t20rd-desc-align, center);
  color: #52606d;
  font-size: var(--t20rd-desc-size, 0.95rem);
}
.t20rd-section-desc p:last-child {
  margin-bottom: 0;
}

.t20rd-grid {
  display: grid;
  grid-template-columns: repeat(var(--t20rd-columns, 3), 1fr);
  gap: 20px;
}
@media (max-width: 640px) {
  .t20rd-grid { grid-template-columns: 1fr; }
}

.t20rd-card {
  background: var(--t20rd-card-bg, #ffffff);
  border-radius: var(--t20rd-card-radius, 12px);
  box-shadow: var(--t20rd-card-shadow, 0 4px 14px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--t20rd-card-accent, transparent);
}

.t20rd-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.t20rd-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Per-category override (Resource Directory → Categories → "Featured Image
   Display" → "Show Full Image, No Cropping"): drops the fixed 4:3 crop and
   lets the image set its own height at the card's width, so nothing is cut
   off — the right choice for book covers, logos, and other images where any
   cropping looks wrong, as opposed to photos where a uniform crop is fine. */
.t20rd-card-image--contain {
  aspect-ratio: auto;
  background: #f4f6f8;
}
.t20rd-card-image--contain img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.t20rd-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* The only deliberate spacing left in the card body: room above the
     button. .t20rd-card-info (below) is the *other* flex child here, so
     this gap applies exactly once, between the whole text block and the
     button — never between the name/title/location/description lines
     themselves. */
  gap: 20px;
  flex-grow: 1;
}

/* Name, Professional Title, Location, and description read as one flowing
   text block — spacing between them comes from each line's own line-height,
   not an added gap, the same as consecutive lines of a single paragraph. */
.t20rd-card-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
}

.t20rd-card-title {
  font-size: 1.35rem;
  margin: 0;
  line-height: 1.3;
}

.t20rd-card-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: #52606d;
  margin: 0;
  line-height: 1.3;
}

.t20rd-card-location {
  font-size: 0.8rem;
  font-style: italic;
  color: #7b8794;
  margin: 0;
  line-height: 1.3;
}

.t20rd-card-desc {
  font-size: 0.92rem;
  color: #52606d;
  flex-grow: 1;
  margin: 0;
}
/* wpautop() wraps plain text in <p> tags, which carry the browser's default
   ~1em top+bottom margin — reset that explicitly rather than relying on the
   flex gap alone, or the first paragraph visibly floats away from whatever
   is above it regardless of this card's own spacing rules. First paragraph
   gets no top margin (it's the direct continuation of title/subtitle/
   location's line-height-only spacing above); a small margin only appears
   *between* multiple paragraphs, since that's genuinely separate content. */
.t20rd-card-desc p { margin: 0 0 8px; }
.t20rd-card-desc p:last-child { margin-bottom: 0; }

.t20rd-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--t20rd-card-accent, var(--t20rd-button-bg, #2c3e50));
  color: var(--t20rd-button-text, #ffffff);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.t20rd-card-button:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}
.t20rd-btn-icon {
  font-size: 18px;
  margin-left: 6px;
}

.t20rd-back-to-top {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: #475569;
  text-decoration: none;
}
.t20rd-back-to-top:hover { color: var(--t20rd-button-bg, #2c3e50); }

/* Strong, consistent keyboard-focus indicator across every interactive
   element — relying on hover-only cues (color/transform) isn't enough for
   keyboard and low-vision users. */
.t20rd-nav a:focus-visible,
.t20rd-card-button:focus-visible,
.t20rd-back-to-top:focus-visible {
  outline: 3px solid var(--t20rd-button-bg, #2c3e50);
  outline-offset: 2px;
}

/* Visually hides text while keeping it in the accessibility tree — used for
   the button's "(opens in a new tab)" cue, which sighted users already get
   from the open_in_new icon. Standard WordPress-core pattern; defined here
   too so this plugin doesn't depend on the active theme providing it. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
 * Admin-only: Settings page layout (tabs + live preview panel).
 * Scoped to .t20rd-settings-wrap so none of this reaches the front end.
 * Mirrors The 20 Event Calendar's settings-page pattern exactly.
 * ------------------------------------------------------------------- */

/* The CSS selector a setting maps to (e.g. ".t20rd-section-heading"), shown
   as a small, muted line under that setting's own label — a quick reference
   for anyone about to write Custom CSS overrides, without having to open
   this stylesheet to look the selector up. */
.t20rd-css-hint {
  display: block;
  margin-top: 4px;
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
  font-weight: 400;
  color: #8c8f94;
}

.t20rd-settings-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-top: 16px;
}

.t20rd-settings-main {
  flex: 1 1 auto;
  min-width: 0;
}

.t20rd-settings-preview {
  flex: 0 0 340px;
  position: sticky;
  top: 32px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 16px;
}

.t20rd-settings-preview h2 {
  margin-top: 0;
}

.t20rd-tab-panel[hidden] {
  display: none;
}

.t20rd-contrast-report {
  margin-top: 16px;
  border-top: 1px solid #dcdcde;
  padding-top: 12px;
}

.t20rd-contrast-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 4px 0;
}

.t20rd-contrast-badge {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.t20rd-contrast-badge.t20rd-pass {
  background: #d4f4dd;
  color: #0a5c2e;
}

.t20rd-contrast-badge.t20rd-fail {
  background: #f9d5d5;
  color: #7a1212;
}

@media (max-width: 900px) {
  .t20rd-settings-layout {
    flex-direction: column;
  }
  .t20rd-settings-preview {
    position: static;
    flex-basis: auto;
    width: 100%;
  }
}