/**
 * Hand-written CSS for things Tailwind/DaisyUI utility classes can't reach
 * directly in markup (pseudo-elements, native form controls, sticky
 * positioning tied to WordPress's own template-part wrapper, etc).
 *
 * WordPress's own block-library/global-styles CSS is dequeued (see
 * functions.php) in favor of this Tailwind build, so nothing here may
 * reference `var(--wp--preset--*)` — those variables no longer exist.
 * Reach for DaisyUI's own theme variables (--color-base-100, --color-primary,
 * etc., defined in assets/css/main.css) or literal values instead.
 */

/**
 * `.screen-reader-text` — WordPress core's visually-hidden helper (used by
 * wp:read-more's link label, skip links, the search block's label, etc.) is
 * normally styled by wp-block-library/classic-theme-styles, both dequeued
 * here, so it was rendering as plain visible text. Restoring core's own
 * clip-based implementation.
 */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/**
 * Sticky header — WordPress wraps a template part assigned to the "header"
 * area in its own <header class="wp-block-template-part">; that's the
 * element we stick, not our part's inner #site-header group. The admin-bar
 * offset mirrors core's own convention (32px desktop, 46px on the
 * mobile-toolbar breakpoint) — without it, the sticky header sits under the
 * toolbar for logged-in users.
 */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 99;
}

body.admin-bar header.wp-block-template-part {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

/**
 * Header wordmark accent dot — the design's logo lockup is "Stadia • Ventures"
 * with a small accent-colored dot between the two words. The site title is a
 * single dynamic string (Settings → General), so the dot can't be inserted
 * mid-string without hardcoding — it's appended as a pure decoration instead.
 */
.site-wordmark::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-primary);
  display: inline-block;
}

/**
 * Primary menu (wp_nav_menu via Daisyui_Navwalker) — typography to match the
 * design's nav links, plus the "Get in touch" item's button treatment, driven
 * by the CSS Classes field on that one menu item (Appearance → Menus) rather
 * than hardcoded markup.
 */
.primary-menu > li > a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-base-content);
}

.primary-menu > li > a:hover {
  color: var(--color-primary);
  background: transparent;
}

.primary-menu > li.btn-primary {
  margin-left: 14px;
  padding: 0;
}

.primary-menu > li.btn-primary > a {
  padding: 11px 20px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 700;
  white-space: nowrap;
}

.primary-menu > li.btn-primary > a:hover {
  background: color-mix(in oklab, var(--color-primary) 85%, white);
  color: var(--color-primary-content);
}

.primary-menu--mobile > li > a {
  text-transform: none;
  letter-spacing: normal;
}

/**
 * Hero eyebrow decorator — a short accent-colored rule before the "Sport ·
 * Investment · Innovation" kicker, matching the design. Purely decorative
 * (a wp:html block, not text), so it can't be expressed as block content.
 */
.hero-eyebrow {
  align-items: center;
}

.hero-eyebrow-line {
  width: 34px;
  height: 2px;
  background: var(--color-primary);
  display: inline-block;
}

/**
 * Card hover lift — the design lifts/glows bordered cards (pillars, cohort
 * tiles, post cards) on hover; DaisyUI's `.card`/`.card-border` don't include
 * this interaction on their own.
 */
.card-border {
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

a:hover > .card-border,
.card-border:hover {
  border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
  transform: translateY(-2px);
}

/**
 * Focus-area tile hover — matches the design's subtle background lighten
 * (base-100 → base-200) instead of the border/lift treatment used by
 * bordered cards.
 */
.focus-area-tile {
  transition: background-color 0.2s ease;
}

.focus-area-tile:hover {
  background-color: var(--color-base-200);
}

/**
 * Search block input — theme.json/global-styles is off, so the native
 * search block ships with no color/border styling of its own.
 */
.wp-block-search__input {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

/**
 * Comment form (wp:post-comments-form) — same gap: the block only styles
 * the submit button, not the native <input>/<textarea> fields it renders.
 */
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
}