/*
|--------------------------------------------------------------------------
| Pajhwok Theme Colors
|--------------------------------------------------------------------------
| Global light/dark mode system.
| The theme is controlled by html[data-theme="light"] and html[data-theme="dark"].
|--------------------------------------------------------------------------
*/

:root,
html[data-theme='light'] {
  color-scheme: light;

  --pjw-bg: #ffffff;
  --pjw-body-bg: #ffffff;
  --pjw-surface: #ffffff;
  --pjw-surface-soft: #f8fafc;
  --pjw-surface-muted: #f1f5f9;
  --pjw-card-bg: #ffffff;
  --pjw-card-bg-hover: #f8fafc;

  --pjw-text: #111827;
  --pjw-heading: #0f172a;
  --pjw-muted: #64748b;
  --pjw-muted-2: #7b8490;
  --pjw-border: #e5e7eb;
  --pjw-border-strong: #cbd5e1;

  --pjw-primary: #0b2f63;
  --pjw-primary-dark: #081d3f;
  --pjw-primary-soft: #eaf2ff;
  --pjw-accent: #1389c9;
  --pjw-gold: #c78a1b;

  --pjw-link: #0b2f63;
  --pjw-link-hover: #081d3f;

  --pjw-header-top-bg: #172f5e;
  --pjw-header-top-text: #ffffff;
  --pjw-nav-bg: #ffffff;
  --pjw-nav-text: #111111;
  --pjw-nav-text-hover: #172f5e;
  --pjw-nav-hover-bg: #f4f7fb;

  --pjw-dropdown-bg: #ffffff;
  --pjw-dropdown-text: #172f5e;
  --pjw-dropdown-text-hover: #172f5e;
  --pjw-dropdown-border: rgba(23, 47, 94, 0.12);
  --pjw-dropdown-hover-bg: #f3f6fb;
  --pjw-dropdown-current-bg: rgba(23, 47, 94, 0.08);
  --pjw-dropdown-shadow: 0 18px 45px rgba(15, 34, 68, 0.18);

  --pjw-input-bg: #ffffff;
  --pjw-input-text: #111827;
  --pjw-input-border: #cbd5e1;
  --pjw-input-placeholder: #94a3b8;

  --pjw-modal-bg: #ffffff;
  --pjw-modal-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);

  --pjw-theme-toggle-bg: #ffffff;
  --pjw-theme-toggle-text: #172f5e;
  --pjw-theme-toggle-border: rgba(23, 47, 94, 0.18);
  --pjw-theme-toggle-hover-bg: #f4f7fb;
  --pjw-theme-toggle-hover-text: #0b2f63;
  --pjw-theme-toggle-hover-border: rgba(23, 47, 94, 0.34);

  --pjw-focus-ring: rgba(19, 137, 201, 0.18);
  --pjw-spinner-track: rgba(23, 47, 94, 0.14);

  --pjw-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --pjw-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --pjw-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);

  --pjw-ad-bg: #eeeeee;
  --pjw-overlay: rgba(0, 0, 0, 0.58);
}

html[data-theme='dark'] {
  color-scheme: dark;

  /*
     * Dark mode is intentionally not pure black.
     * This is softer for news reading and close to the reference screenshot.
     */
  --pjw-bg: #1b1b1b;
  --pjw-body-bg: #1b1b1b;
  --pjw-surface: #222222;
  --pjw-surface-soft: #292929;
  --pjw-surface-muted: #303030;
  --pjw-card-bg: #242424;
  --pjw-card-bg-hover: #2d2d2d;

  --pjw-text: #e8e8e8;
  --pjw-heading: #ffffff;
  --pjw-muted: #b8b8b8;
  --pjw-muted-2: #a6a6a6;
  --pjw-border: #3a3a3a;
  --pjw-border-strong: #4a4a4a;

  --pjw-primary: #7ab2ff;
  --pjw-primary-dark: #a8ccff;
  --pjw-primary-soft: rgba(122, 178, 255, 0.14);
  --pjw-accent: #5cc7ff;
  --pjw-gold: #d6a44a;

  --pjw-link: #a8ccff;
  --pjw-link-hover: #ffffff;

  --pjw-header-top-bg: #242424;
  --pjw-header-top-text: #ffffff;
  --pjw-nav-bg: #232323;
  --pjw-nav-text: #f4f4f4;
  --pjw-nav-text-hover: #ffffff;
  --pjw-nav-hover-bg: #303030;

  --pjw-dropdown-bg: #292929;
  --pjw-dropdown-text: #f4f4f4;
  --pjw-dropdown-text-hover: #ffffff;
  --pjw-dropdown-border: #454545;
  --pjw-dropdown-hover-bg: #343434;
  --pjw-dropdown-current-bg: rgba(122, 178, 255, 0.16);
  --pjw-dropdown-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);

  --pjw-input-bg: #242424;
  --pjw-input-text: #ffffff;
  --pjw-input-border: #484848;
  --pjw-input-placeholder: #9ca3af;

  --pjw-modal-bg: #222222;
  --pjw-modal-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);

  --pjw-theme-toggle-bg: #303030;
  --pjw-theme-toggle-text: #ffffff;
  --pjw-theme-toggle-border: #4a4a4a;
  --pjw-theme-toggle-hover-bg: #3a3a3a;
  --pjw-theme-toggle-hover-text: #ffffff;
  --pjw-theme-toggle-hover-border: #5a5a5a;

  --pjw-focus-ring: rgba(122, 178, 255, 0.24);
  --pjw-spinner-track: rgba(255, 255, 255, 0.18);

  --pjw-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.22);
  --pjw-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  --pjw-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.38);

  --pjw-ad-bg: #262626;
  --pjw-overlay: rgba(0, 0, 0, 0.72);
}

/*
|--------------------------------------------------------------------------
| Base Elements
|--------------------------------------------------------------------------
*/

html {
  background: var(--pjw-bg);
}

body {
  background: var(--pjw-body-bg) !important;
  color: var(--pjw-text);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

body,
button,
input,
textarea,
select {
  color: var(--pjw-text);
}

a {
  color: var(--pjw-link);
}

a:hover,
a:focus {
  color: var(--pjw-link-hover);
}

hr {
  border-color: var(--pjw-border);
}

input,
textarea,
select {
  background-color: var(--pjw-input-bg) !important;
  color: var(--pjw-input-text) !important;
  border-color: var(--pjw-input-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--pjw-input-placeholder) !important;
}

/*
|--------------------------------------------------------------------------
| Global Layout Surfaces
|--------------------------------------------------------------------------
*/

.site,
.site-content,
.page-content,
.entry-content,
#page,
#content,
main,
.main,
.content-area {
  background: var(--pjw-bg);
  color: var(--pjw-text);
}

.container {
  color: inherit;
}

/*
|--------------------------------------------------------------------------
| Common Story/Card Components
|--------------------------------------------------------------------------
*/

.latest-story,
.story-card,
.card,
.views-row,
.views-field,
.more-stories,
.section-bordered-top,
.category-field,
.author-field,
.author-biography,
.tags {
  color: var(--pjw-text);
}

.latest-story,
.story-card,
.card {
  background: transparent;
}

.story-title,
.story-title a,
.latest-story h4,
.latest-story h4 a,
.views-field-title,
.views-field-title a,
.section-title,
.section-title a,
.page-header h4 {
  color: var(--pjw-heading) !important;
}

.story-title a:hover,
.latest-story h4 a:hover,
.views-field-title a:hover,
.section-title a:hover {
  color: var(--pjw-link-hover) !important;
}

.post-time,
.publish-date,
.author-info,
.author-name,
.category-field {
  color: var(--pjw-muted);
}

.category-field a {
  color: var(--pjw-link);
}

.category-field a:hover,
.category-field a:focus {
  color: var(--pjw-link-hover);
}

/*
|--------------------------------------------------------------------------
| Header / Navigation
|--------------------------------------------------------------------------
*/

.header,
.desktop-wrap.header {
  background: var(--pjw-surface);
  color: var(--pjw-text);
}

.logo-wrap,
.main-logo,
.pjw-main-nav {
  background: var(--pjw-nav-bg);
  color: var(--pjw-nav-text);
}

.pjw-main-nav {
  border-color: var(--pjw-border);
}

.pjw-main-nav__inner {
  color: var(--pjw-nav-text);
}

.pjw-main-nav__link,
.pjw-main-nav__category-toggle {
  color: var(--pjw-nav-text) !important;
}

.pjw-main-nav__link:hover,
.pjw-main-nav__link:focus,
.pjw-main-nav__category-toggle:hover,
.pjw-main-nav__category-toggle:focus {
  color: var(--pjw-nav-text-hover) !important;
  background: var(--pjw-nav-hover-bg) !important;
}

/*
|--------------------------------------------------------------------------
| Search Modal
|--------------------------------------------------------------------------
*/

.pjw-search-modal__dialog,
.search-form-wrap,
.search-form {
  background: var(--pjw-modal-bg);
  color: var(--pjw-text);
}

.pjw-search-modal__title,
.pjw-search-result__title {
  color: var(--pjw-heading) !important;
}

.pjw-search-result {
  background: var(--pjw-card-bg);
  border-color: var(--pjw-border);
}

.pjw-search-result:hover {
  background: var(--pjw-card-bg-hover);
}

.pjw-search-result__meta,
.pjw-search-results__state {
  color: var(--pjw-muted);
}

/*
|--------------------------------------------------------------------------
| Home Sections - Global Variables Bridge
|--------------------------------------------------------------------------
*/

.home-top-stories,
.pjw-home-latest,
.pjw-feature-pro,
.pjw-opinion-pro,
.pjw-home-video-news,
.pjw-home-shorts,
.pjw-home-section {
  background: var(--pjw-bg) !important;
  color: var(--pjw-text) !important;
}

.home-hero-card,
.home-side-card,
.pjw-feature-pro__main,
.pjw-feature-pro__side-card,
.pjw-feature-pro__grid-card,
.pjw-opinion-pro__featured,
.pjw-opinion-pro__side,
.pjw-opinion-pro__side-card,
.pjw-opinion-pro__more-card {
  background: var(--pjw-card-bg) !important;
  border-color: var(--pjw-border) !important;
  color: var(--pjw-text) !important;
}

.home-hero-card__title,
.home-hero-card__title a,
.home-side-card__title,
.home-side-card__title a,
.pjw-home-latest__title,
.pjw-home-latest__headline,
.pjw-home-latest__headline a,
.pjw-feature-pro__title,
.pjw-feature-pro__main-title,
.pjw-feature-pro__main-title a,
.pjw-feature-pro__side-title,
.pjw-feature-pro__side-title a,
.pjw-feature-pro__grid-title,
.pjw-feature-pro__grid-title a,
.pjw-opinion-pro__title,
.pjw-opinion-pro__featured-title,
.pjw-opinion-pro__featured-title a,
.pjw-opinion-pro__side-title,
.pjw-opinion-pro__side-card-title,
.pjw-opinion-pro__more-title {
  color: var(--pjw-heading) !important;
}

.home-post-meta,
.home-side-card__meta,
.pjw-home-latest__meta,
.pjw-home-latest__date,
.pjw-feature-pro__subtitle,
.pjw-feature-pro__date,
.pjw-feature-pro__excerpt,
.pjw-opinion-pro__subtitle,
.pjw-opinion-pro__date,
.pjw-opinion-pro__excerpt,
.pjw-opinion-pro__side-meta {
  color: var(--pjw-muted) !important;
}

.pjw-home-latest__category,
.pjw-feature-pro__label,
.pjw-opinion-pro__label {
  color: var(--pjw-accent) !important;
}

.pjw-home-latest__ads-box,
.sidebar-ads-wrap,
.ads-wrap {
  background: var(--pjw-ad-bg) !important;
  border-color: var(--pjw-border) !important;
}

.pjw-home-latest__ads-title {
  color: var(--pjw-muted) !important;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.pjw-site-footer {
  background: var(--pjw-bg) !important;
  color: var(--pjw-muted) !important;
}

.pjw-site-footer__inner {
  border-top-color: var(--pjw-border) !important;
}

.pjw-site-footer__title,
.pjw-site-footer__social-head {
  color: var(--pjw-heading) !important;
}

.pjw-site-footer__list-item a,
.pjw-site-footer__brand-copy {
  color: var(--pjw-muted) !important;
}

.pjw-site-footer__list-item a:hover,
.pjw-site-footer__list-item a:focus {
  color: var(--pjw-heading) !important;
}

.pjw-site-footer__social-link {
  color: var(--pjw-heading) !important;
}

.pjw-site-footer__social-link--linkedin i {
  color: var(--pjw-heading) !important;
}

html[data-theme='dark'] .pjw-site-footer__social-link[aria-label='X'] svg path {
  fill: #ffffff !important;
}

/*
|--------------------------------------------------------------------------
| Gallery / Media
|--------------------------------------------------------------------------
*/

.pjw-news-single-media,
.pjw-news-mosaic,
.pjw-news-mosaic__item,
.thumbnail-16-9,
.thumbnail-4-3 {
  background: var(--pjw-surface-muted);
}

.pjw-gallery-lightbox {
  background: #000000;
}

/*
|--------------------------------------------------------------------------
| Auth Pages Bridge
|--------------------------------------------------------------------------
*/

.pjw-auth-screen,
.pjw-auth-screen__column,
.pjw-auth-form,
.pjw-auth-card {
  background: var(--pjw-bg);
  color: var(--pjw-text);
}

.pjw-auth-screen__footer a {
  color: var(--pjw-link);
}

/*
|--------------------------------------------------------------------------
| Dark Mode Image Treatment
|--------------------------------------------------------------------------
*/

html[data-theme='dark'] img {
  filter: none;
}

html[data-theme='dark'] .story-thumbnail,
html[data-theme='dark'] .pjw-home-latest__thumb img,
html[data-theme='dark'] .home-hero-card__image img,
html[data-theme='dark'] .home-side-card__media img,
html[data-theme='dark'] .pjw-feature-pro__media img,
html[data-theme='dark'] .pjw-opinion-pro__media img {
  opacity: 0.92;
}

html[data-theme='dark'] .story-thumbnail:hover,
html[data-theme='dark'] .pjw-home-latest__thumb-link:hover img,
html[data-theme='dark'] .home-side-card:hover img,
html[data-theme='dark'] .pjw-feature-pro__main:hover img,
html[data-theme='dark'] .pjw-feature-pro__side-card:hover img,
html[data-theme='dark'] .pjw-opinion-pro__featured:hover img {
  opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Utilities
|--------------------------------------------------------------------------
*/

.pjw-surface {
  background: var(--pjw-surface) !important;
  color: var(--pjw-text) !important;
}

.pjw-card {
  background: var(--pjw-card-bg) !important;
  border-color: var(--pjw-border) !important;
  color: var(--pjw-text) !important;
}

.pjw-muted {
  color: var(--pjw-muted) !important;
}

.pjw-heading {
  color: var(--pjw-heading) !important;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
  .pjw-theme-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .pjw-theme-toggle svg {
    width: 21px;
    height: 21px;
  }
}