/*
Theme Name: HopPress Pro
Theme URI: https://example.com/hoppress-pro
Author: You
Description: Stable arcade theme with polished UI, right drawer, custom logo, and genres.
Version: 1.1.4.5
Text Domain: hoppress-pro
*/


/*
 * === Professional Light Theme Enhancements (Blue · Black · Yellow) ===
 * Palette:
 *   --hp-bg:           #F6F8FC;   (light canvas)
 *   --hp-surface:      #FFFFFF;   (cards/blocks)
 *   --hp-text:         #0F172A;   (ink / near-black)
 *   --hp-muted:        #64748B;   (secondary text)
 *   --hp-primary:      #2563EB;   (blue actions)
 *   --hp-primary-600:  #1D4ED8;
 *   --hp-accent:       #FBBF24;   (amber/yellow highlight)
 *   --hp-border:       #E2E8F0;   (light borders)
 *   --hp-ring:         #93C5FD;   (focus ring)
 *
 * Notes:
 *  - This sheet is additive: it overrides existing styles without breaking layout.
 *  - Keep this section at the end of style.css so it wins the cascade.
 */

:root{
  --hp-bg:#F6F8FC;
  --hp-surface:#FFFFFF;
  --hp-text:#0F172A;
  --hp-muted:#64748B;
  --hp-primary:#2563EB;
  --hp-primary-600:#1D4ED8;
  --hp-accent:#FBBF24;
  --hp-border:#E2E8F0;
  --hp-ring:#93C5FD;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 6px 20px rgba(2,6,23,.08);
}

/* Canvas & base typography */
html,body{
  background:var(--hp-bg);
  color:var(--hp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  line-height:1.6;
}

/* Links */
a{
  color:var(--hp-primary);
  text-decoration:none;
}
a:hover, a:focus{
  color:var(--hp-primary-600);
  text-decoration:underline;
}

/* Containers/Cards */
.card, .box, .panel, .widget, .entry, .archive-card, .game-card{
  background:var(--hp-surface);
  border:1px solid var(--hp-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card:hover, .box:hover, .panel:hover, .widget:hover, .entry:hover, .archive-card:hover, .game-card:hover{
  box-shadow:var(--shadow-md);
}

/* Header/Navbar */
.site-header, header.site, .navbar, .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.9), var(--hp-surface));
  border-bottom:1px solid var(--hp-border);
  backdrop-filter:saturate(140%) blur(6px);
}
.navbar a, .site-header a{
  color:var(--hp-text);
}
.navbar a:hover, .site-header a:hover{
  color:var(--hp-primary);
}

/* Buttons */
button, .button, .btn, input[type="submit"], .wp-block-button__link{
  background:var(--hp-primary);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:.65rem 1rem;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
button:hover, .button:hover, .btn:hover, input[type="submit"]:hover, .wp-block-button__link:hover{
  background:var(--hp-primary-600);
  transform: translateY(-1px);
  box-shadow:var(--shadow-md);
}
/* Secondary & Outline */
.button.secondary, .btn.secondary, .wp-block-button.is-style-outline .wp-block-button__link{
  background:#fff;
  color:var(--hp-text);
  border:1px solid var(--hp-border);
}
.button.secondary:hover, .btn.secondary:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--hp-primary);
  color:var(--hp-primary);
}

/* Accent labels/badges */
.badge, .label, .tag{
  background:var(--hp-accent);
  color:#111;
  border-radius:999px;
  padding:.2rem .6rem;
  font-weight:600;
}

/* Forms */
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"],
select, textarea{
  background:#fff;
  border:1px solid var(--hp-border);
  border-radius:12px;
  padding:.6rem .75rem;
  color:var(--hp-text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.03);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--hp-primary);
  box-shadow:0 0 0 3px var(--hp-ring);
}

/* Tables */
table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  background:var(--hp-surface);
  border:1px solid var(--hp-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
table th, table td{
  padding:.75rem .9rem;
  border-bottom:1px solid var(--hp-border);
}
table thead th{
  background: #F8FAFF;
  color: var(--hp-muted);
  text-transform: uppercase;
  letter-spacing:.02em;
  font-size:.85rem;
}

/* Footer */
.site-footer, footer.site{
  background:#0B1220; /* rich black for contrast */
  color:#E5E7EB;
}
.site-footer a{ color:#D1E3FF; }
.site-footer a:hover{ color:#fff; }
.site-footer .widget, .site-footer .column{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Utility helpers */
.shadow-md{ box-shadow:var(--shadow-md) !important; }
.rounded-lg{ border-radius:var(--radius-lg) !important; }
.border{ border:1px solid var(--hp-border) !important; }
.bg-surface{ background:var(--hp-surface) !important; }
.text-muted{ color:var(--hp-muted) !important; }

/* Optional: subtle animated focus for interactive cards */
.card:focus-within, .game-card:focus-within{
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

/* Dark header on scroll (if theme adds .is-stuck/.scrolled) */
.is-stuck .site-header, .scrolled .site-header{
  background:#ffffffcc;
}

/* End of Professional Light Theme Enhancements */


/*
 * === Alternative Light (Teal · Charcoal · Amber) ===
 * Palette:
 *   --hp-bg: #FDFDFC;
 *   --hp-surface: #FFFFFF;
 *   --hp-text: #111827;
 *   --hp-muted: #6B7280;
 *   --hp-primary: #0D9488;  (teal)
 *   --hp-primary-600: #0F766E;
 *   --hp-accent: #F59E0B;  (amber)
 *   --hp-border: #E5E7EB;
 *   --hp-ring: #99F6E4;
 *
 * Use by adding class .theme-alt to <body>
 */
body.theme-alt{
  --hp-bg:#FDFDFC;
  --hp-surface:#FFFFFF;
  --hp-text:#111827;
  --hp-muted:#6B7280;
  --hp-primary:#0D9488;
  --hp-primary-600:#0F766E;
  --hp-accent:#F59E0B;
  --hp-border:#E5E7EB;
  --hp-ring:#99F6E4;
}

/*
 * === Dark/Night Mode ===
 * Palette for reduced eye strain at night.
 * Use by toggling [data-theme="dark"] on <html> or <body>.
 */
[data-theme="dark"], body.theme-dark{
  --hp-bg:#0F172A;
  --hp-surface:#1E293B;
  --hp-text:#F1F5F9;
  --hp-muted:#94A3B8;
  --hp-primary:#38BDF8;
  --hp-primary-600:#0EA5E9;
  --hp-accent:#FACC15;
  --hp-border:#334155;
  --hp-ring:#0284C7;
}

[data-theme="dark"], body.theme-dark{
  background:var(--hp-bg);
  color:var(--hp-text);
}

[data-theme="dark"] .card,
body.theme-dark .card,
[data-theme="dark"] .box,
body.theme-dark .box,
[data-theme="dark"] .panel,
body.theme-dark .panel,
[data-theme="dark"] .widget,
body.theme-dark .widget{
  background:var(--hp-surface);
  border-color:var(--hp-border);
  box-shadow:none;
}

[data-theme="dark"] a,
body.theme-dark a{ color:var(--hp-primary); }
[data-theme="dark"] a:hover,
body.theme-dark a:hover{ color:var(--hp-primary-600); }

[data-theme="dark"] .site-footer,
body.theme-dark .site-footer{
  background:#000814;
  color:#CBD5E1;
}


/* === Theme Modes & Alternate Accents ===
   Modes: [data-theme="light"] (Day), [data-theme="dark"] (Night)
   Optional Accent: [data-accent="teal"] to try a different color way.
   The JS (assets/js/hoppress-theme-mode.js) toggles [data-theme] on <html> and saves preference.
*/

/* Defaults (follow system) */
:root{
  --hp-bg:#F6F8FC;
  --hp-surface:#FFFFFF;
  --hp-text:#0F172A;
  --hp-muted:#64748B;
  --hp-primary:#2563EB;       /* blue */
  --hp-primary-600:#1D4ED8;
  --hp-accent:#FBBF24;        /* amber */
  --hp-border:#E2E8F0;
  --hp-ring:#93C5FD;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 6px 20px rgba(2,6,23,.08);
}

/* If user system prefers dark and no manual choice is set, use darker palette */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --hp-bg:#0B1220;
    --hp-surface:#0F172A;
    --hp-text:#E5E7EB;
    --hp-muted:#A3AEC2;
    --hp-primary:#60A5FA;
    --hp-primary-600:#3B82F6;
    --hp-accent:#F59E0B;
    --hp-border:#1E293B;
    --hp-ring:#1D4ED8;
  }
}

/* Explicit Day mode */
:root[data-theme="light"]{
  --hp-bg:#F6F8FC;
  --hp-surface:#FFFFFF;
  --hp-text:#0F172A;
  --hp-muted:#64748B;
  --hp-primary:#2563EB;
  --hp-primary-600:#1D4ED8;
  --hp-accent:#FBBF24;
  --hp-border:#E2E8F0;
  --hp-ring:#93C5FD;
}

/* Explicit Night mode */
:root[data-theme="dark"]{
  --hp-bg:#0B1220;
  --hp-surface:#0F172A;
  --hp-text:#E5E7EB;
  --hp-muted:#A3AEC2;
  --hp-primary:#60A5FA;
  --hp-primary-600:#3B82F6;
  --hp-accent:#F59E0B;
  --hp-border:#1E293B;
  --hp-ring:#1D4ED8;
}

/* Optional alternate accent palette (teal/charcoal/amber) */
:root[data-accent="teal"]{
  --hp-primary:#0EA5A4;       /* teal 600 */
  --hp-primary-600:#0D9488;   /* teal 700 */
  --hp-accent:#F59E0B;        /* amber */
  --hp-ring:#5EEAD4;          /* teal ring */
}

/* Ensure base UI respects variables */
html,body{ background:var(--hp-bg); color:var(--hp-text); }
a{ color:var(--hp-primary); }
a:hover{ color:var(--hp-primary-600); }
.card, .box, .panel, .widget, .entry, .archive-card, .game-card{
  background:var(--hp-surface);
  border:1px solid var(--hp-border);
}
input, select, textarea{ background:#fff; color:var(--hp-text); border:1px solid var(--hp-border); }
.site-footer, footer.site{ background: var(--hp-text); color: #E5E7EB; } /* contrasty footer */