/**
 * Kadence bridge — maps the Kadence parent theme's own markup and palette
 * variables onto the Major Tom design tokens defined in style.css.
 *
 * WHY THIS FILE EXISTS
 * style.css defines tokens and `.mtom-*` components. Kadence renders the header,
 * footer, archive cards, forms and pagination with its OWN class names, so none
 * of those tokens reach them. The alternative is setting colors in the WordPress
 * Customizer — but Customizer values live in the database, not in this repo, so
 * they are invisible to code review, absent from a fresh install, and lost on a
 * database restore. Every visual decision belongs in version control. This file
 * is that decision.
 *
 * Loaded at priority 100 so it wins against Kadence's inline dynamic CSS.
 * `!important` is used deliberately and only on color/background/border
 * declarations that Kadence prints inline from Customizer defaults.
 */

/* ==========================================================================
   1. Remap Kadence's global palette to Major Tom tokens
   Kadence generates most of its CSS against --global-palette1..9. Remapping
   them here recolors components this file never names explicitly.
   ========================================================================== */
:root,
body,
.entry-content,
.editor-styles-wrapper {
  --global-palette1: var(--accent-primary);
  --global-palette2: var(--accent-secondary);
  --global-palette3: var(--text-primary);
  --global-palette4: var(--text-primary);
  --global-palette5: var(--text-secondary);
  --global-palette6: #6a6a80;
  --global-palette7: var(--bg-elevated);
  --global-palette8: var(--bg-surface);
  --global-palette9: var(--bg-base);

  --global-palette-highlight: var(--accent-primary);
  --global-palette-highlight-alt: var(--accent-secondary);
  --global-palette-highlight-alt2: var(--bg-elevated);

  --global-palette-btn: var(--text-primary);
  --global-palette-btn-hover: var(--text-primary);
  --global-palette-btn-bg: var(--accent-primary);
  --global-palette-btn-bg-hover: var(--accent-secondary);

  --global-body-font-family: var(--font-body);
  --global-heading-font-family: var(--font-heading);
  --global-primary-nav-font-family: var(--font-heading);

  --global-content-boxed-background: var(--bg-surface);
  --global-content-edge-padding: var(--gutter);
  --global-content-width: var(--content-max);
}

/* ==========================================================================
   2. Page shell
   ========================================================================== */
html,
body,
#wrapper,
.site,
#inner-wrap,
.content-area,
#main,
.site-container,
.content-container {
  background-color: var(--bg-base) !important;
  color: var(--text-primary);
}

/* ==========================================================================
   3. Header
   Kadence stacks up to three header rows, each with its own container inner.
   ========================================================================== */
#masthead,
.site-header,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-row-container-inner,
.site-top-header-wrap .site-header-row-container-inner,
.site-main-header-wrap .site-header-row-container-inner,
.site-bottom-header-wrap .site-header-row-container-inner,
.site-header-row-container.site-header-focus-item {
  background-color: var(--bg-base) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

#masthead,
.site-header-wrap {
  border-bottom: 1px solid var(--border) !important;
}

/* Site title / tagline */
.site-branding .site-title,
.site-branding a.brand,
.site-branding a.brand:hover,
.site-title a,
.site-title a:hover {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--text-primary) !important;
}

.site-branding .site-description {
  color: var(--text-secondary) !important;
}

/* Primary navigation */
.header-navigation .header-menu-container > ul > li > a,
.header-navigation ul li a,
.header-navigation .header-menu-container ul li a {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-medium);
  color: var(--text-secondary) !important;
  transition: color var(--dur-fast) var(--ease);
}

.header-navigation ul li a:hover,
.header-navigation ul li.current-menu-item > a,
.header-navigation ul li.current_page_item > a,
.header-navigation ul li a:focus-visible {
  color: var(--accent-primary) !important;
}

/* Dropdown submenus */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation ul ul.submenu,
.header-menu-container ul.sub-menu {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised) !important;
}

/* Mobile toggle + slide-out drawer */
.mobile-toggle-open-container .menu-toggle-open,
.menu-toggle-open,
.drawer-toggle {
  color: var(--text-primary) !important;
  background: transparent !important;
}

#mobile-drawer,
.popup-drawer .drawer-inner,
.popup-drawer .drawer-content,
.popup-drawer .drawer-header {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

#mobile-drawer .drawer-content ul li a,
.mobile-navigation ul li a {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

#mobile-drawer .drawer-content ul li a:hover,
.mobile-navigation ul li a:hover {
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   4. Hero / page title block
   ========================================================================== */
.entry-hero-container-inner,
.entry-hero .entry-header,
.hero-section-overlay,
.page-hero-section {
  background-color: var(--bg-base) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
}

.entry-hero .entry-title,
.entry-hero .archive-title,
.entry-hero .entry-taxonomies,
.entry-hero .entry-meta {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   5. Content cards — archive loop and single boxed content
   `.content-bg` is Kadence's boxed-content wrapper. Its default is white.
   ========================================================================== */
.content-bg,
.entry.content-bg,
.entry.loop-entry,
.entry.loop-entry.content-bg,
.single-content .entry-content-wrap,
.content-style-boxed .content-bg,
.wp-site-blocks .content-bg {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-primary) !important;
}

.entry.loop-entry {
  transition: transform var(--dur-med) var(--ease),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}

.entry.loop-entry:hover {
  border-color: var(--accent-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised) !important;
}

/* Card typography */
.entry-title,
.entry-title a,
.loop-entry .entry-title a {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
}

.entry-title a:hover,
.loop-entry .entry-title a:hover {
  color: var(--accent-primary) !important;
}

.entry-summary,
.entry-summary p,
.entry-content p,
.loop-entry .entry-summary p {
  color: var(--text-secondary) !important;
}

/* Meta line and taxonomy pills */
.entry-meta,
.entry-meta a,
.entry-meta .posted-on,
.entry-meta .byline {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem;
}

.entry-meta a:hover {
  color: var(--accent-primary) !important;
}

.entry-taxonomies,
.entry-taxonomies a,
.entry-taxonomies .category-link {
  color: var(--accent-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.category-style-pill .entry-taxonomies .category-link {
  background-color: rgba(0, 212, 255, 0.08) !important;
  border: 1px solid var(--accent-primary) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
}

/* Read more */
.more-link-wrap .post-more-link,
.post-more-link {
  color: var(--accent-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.more-link-wrap .post-more-link:hover {
  color: var(--text-primary) !important;
}

/* Featured image frame */
.post-thumbnail,
.post-thumbnail img,
.loop-entry .post-thumbnail {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--bg-elevated) !important;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.wp-block-button__link,
.button,
button:not(.menu-toggle-open):not(.drawer-toggle):not(.mtom-nav__toggle),
input[type="submit"],
.kb-button,
.kt-button {
  background: var(--accent-gradient) !important;
  background-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-medium);
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  transition: transform var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover,
.kb-button:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
  color: var(--text-primary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   7. Forms — WPForms and core comment/search fields
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-primary) !important;
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.wpforms-field-label,
label {
  color: var(--text-primary) !important;
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-medium);
}

.wpforms-field-description,
.wpforms-required-label {
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   8. Sidebar / widgets
   ========================================================================== */
.widget-area,
.sidebar-inner-wrap,
.primary-sidebar.widget-area .widget {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.widget-area .widget-title,
.widget .widget-title {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

.widget-area a {
  color: var(--text-secondary) !important;
}

.widget-area a:hover {
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */
.pagination .page-numbers,
.navigation .page-numbers,
.pagination a {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background-color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--bg-base) !important;
}

/* ==========================================================================
   10. Comments
   ========================================================================== */
#comments,
.comments-area,
.comment-body,
.comment-respond {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

.comment-meta,
.comment-metadata a {
  color: var(--text-secondary) !important;
}

.comment-body {
  border-bottom: 1px solid var(--border) !important;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
#colophon,
.site-footer,
.site-footer-wrap,
.site-footer-row-container-inner,
.site-top-footer-wrap .site-footer-row-container-inner,
.site-middle-footer-wrap .site-footer-row-container-inner,
.site-bottom-footer-wrap .site-footer-row-container-inner {
  background-color: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

#colophon,
.site-footer-wrap {
  border-top: 1px solid var(--border) !important;
}

.site-footer .footer-html,
.site-footer p,
.site-footer .footer-widget-area {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--text-secondary) !important;
}

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

.site-footer .widget-title,
.site-footer h4 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   12. Scroll-to-top and misc chrome
   ========================================================================== */
#kt-scroll-up,
.kadence-scroll-to-top {
  background-color: var(--bg-elevated) !important;
  color: var(--accent-primary) !important;
  border: 1px solid var(--border) !important;
}

/* Horizontal rules and table chrome inside content */
.entry-content hr,
.wp-block-separator {
  border-color: var(--border) !important;
}

.entry-content table,
.entry-content th,
.entry-content td {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.entry-content th {
  background-color: var(--bg-elevated) !important;
  font-family: var(--font-heading) !important;
}

/* Code blocks read as data, so give them the mono token */
.entry-content code,
.entry-content pre {
  font-family: var(--font-mono) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   13. Selection + scrollbar
   ========================================================================== */
::selection {
  background-color: var(--accent-primary);
  color: var(--bg-base);
}

* {
  scrollbar-color: var(--bg-elevated) var(--bg-base);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}