/*
Theme Name: MyEPK
Theme URI: https://myepk.com
Author: MyEPK
Author URI: https://myepk.com
Description: Custom theme for the MyEPK platform. Designed to work alongside the MyEPK plugin.
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myepk
Tags: custom
*/

/* =========================================================
   SHOWCARD BRAND FONTS
   Used by the universal nav/footer below, plus any page
   template content built with the "hw-" component classes.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* =========================================================
   BASE RESET
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================================
   ROOT VARIABLES — tweak these to restyle the site
   ========================================================= */
:root {
  --color-bg:         #0d0d0d;
  --color-surface:    #1a1a1a;
  --color-border:     #2e2e2e;
  --color-text:       #f0f0f0;
  --color-muted:      #888888;
  --color-accent:     #7c3aed;  /* purple — change to your brand color */
  --color-accent-alt: #a78bfa;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 8px;
  --max-width: 1100px;

  /* ---- Showcard brand tokens (used by the universal
         nav/footer, and by "hw-" component markup on
         individual page templates) ---- */
  --cream:     #F5F2EB;
  --dark:      #1A1714;
  --violet:    #6C3DF0;
  --violet-lt: #F0EBFD;
  --violet-bd: #D4C9F9;
  --muted:     #6B655C;
  --border:    #E4DDD0;
  --dark-bg:   #121114;
  --dark-bg2:  #1c1b1f;
  --dark-bd:   #2a282f;
  --dark-txt:  #F3F1EC;
  --dark-sub:  #A8A2B0;
  --dark-mono: #7a7682;
  --mono-hi:   #a99cf2;
  --sand:      #EDE8DE;
}

/* =========================================================
   GLOBAL
   ========================================================= */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--color-accent-alt);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =========================================================
   SITE NAV (universal — rendered in header.php)
   Fixed/overlay brand nav. Because it's fixed, page content
   needs top clearance — see .site-main below. Page templates
   with their own full-bleed hero (e.g. page-home-v3) handle
   their own top padding instead and should NOT double up on
   .site-main's padding.
   ========================================================= */
.hw-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.hw-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
}
.hw-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.hw-nav-logo:hover {
  text-decoration: none !important;
}
.hw-nav-logo-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--dark);
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.hw-nav-logo-dot::after {
  content: '';
  position: absolute;
  left: 6px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--violet);
}
.hw-nav-logo-text {
  font: 800 19px/1 'Archivo', sans-serif;
  letter-spacing: -.02em;
  color: var(--dark);
  transition: color .2s;
}
.hw-nav-logo-text em { font-style: normal; color: var(--violet); }

.hw-nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  font: 500 12px/1 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hw-nav-link {
  color: var(--muted);
  transition: color .15s;
  text-decoration: none;
}
.hw-nav-link:hover { color: var(--dark); }

.hw-nav-signin {
  border: 1px solid rgba(26,23,20,.3);
  border-radius: 999px;
  padding: 9px 20px;
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.hw-nav-signin:hover {
  border-color: var(--dark);
  background: rgba(26,23,20,.06);
  text-decoration: none !important;
}

/* scrolled state — frosted cream */
.hw-nav.is-scrolled {
  background: rgba(245,242,235,.94);
  backdrop-filter: blur(10px);
  border-color: var(--border);
}
.hw-nav.is-scrolled .hw-nav-link { color: var(--muted); }
.hw-nav.is-scrolled .hw-nav-link:hover { color: var(--dark); }

@media (max-width: 960px) {
  .hw-nav-bar { padding: 18px 24px; }
}
@media (max-width: 540px) {
  .hw-nav-actions .hw-nav-link { display: none; }
}

/* =========================================================
   MAIN CONTENT AREA
   Standard (non full-bleed) page templates render inside
   #content > .site-main and need top clearance for the fixed
   .hw-nav above (~70px at desktop, ~66px at mobile).
   ========================================================= */
.site-main {
  padding: calc(2rem + 70px) 0 2rem;
}
@media (max-width: 960px) {
  .site-main { padding-top: calc(2rem + 66px); }
}

/* =========================================================
   SITE FOOTER (universal — rendered in footer.php)
   ========================================================= */
.hw-footer {
  background: var(--dark-bg);
}
.hw-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--dark-bd);
}
.hw-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hw-footer-logo-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--dark-txt);
  position: relative; flex-shrink: 0;
}
.hw-footer-logo-dot::after {
  content: '';
  position: absolute;
  left: 5px; top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet);
}
.hw-footer-name {
  font: 800 16px 'Archivo', sans-serif;
  color: var(--dark-txt);
}
.hw-footer-copy {
  font: 400 12px 'Space Mono', monospace;
  color: var(--dark-mono);
}
.hw-footer-links {
  display: flex;
  gap: 20px;
}
.hw-footer-links a {
  font: 400 12px/1 'Space Mono', monospace;
  color: var(--dark-mono);
  text-decoration: none;
  transition: color .15s;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hw-footer-links a:hover { color: var(--dark-txt); }

@media (max-width: 960px) {
  .hw-footer-inner { padding: 24px; flex-direction: column; gap: 12px; text-align: center; }
  .hw-footer-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* =========================================================
   ENTRY / POST
   ========================================================= */
.entry-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.entry-content {
  max-width: 720px;
}

.entry-content > * + * {
  margin-top: 1em;
}