/*
Theme Name: Blocksy Child
Template:   blocksy
Version:    1.0
Description: Shin Stories - S.B. Braithe dark literary theme
*/

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* === DESIGN TOKENS === */
:root {
  --bg:        oklch(9% 0.012 55);
  --bg2:       oklch(12% 0.014 55);
  --bg3:       oklch(15% 0.015 55);
  --text:      oklch(87% 0.018 75);
  --muted:     oklch(60% 0.015 70);
  --green:     oklch(48% 0.10 145);
  --green-lt:  oklch(62% 0.10 145);
  --red:       oklch(60% 0.18 22);
  --red-lt:    oklch(70% 0.18 22);
  --border:    oklch(22% 0.01 55);
  --serif:     'Cormorant Garamond', Georgia, serif;
  --body:      'Lora', Georgia, serif;
}

/* === BASE === */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  font-size: 17px;
  line-height: 1.7;
}

/* === HIDE PAGE TITLE (Blocksy renders it in entry-header) === */
.entry-header,
header.entry-header,
.hero-section .entry-header,
.ct-page-title,
h1.page-title {
  display: none !important;
}

/* === HEADER & NAV === */
#site-header,
.site-header,
.ct-header,
[data-row],
.ct-header-builder-content {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.site-title a,
.ct-site-title a {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  letter-spacing: 0.05em !important;
  font-size: 1.1rem !important;
  text-decoration: none !important;
}

.ct-menu a,
.main-navigation a,
nav a,
.menu-item a {
  font-family: var(--body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
}

.ct-menu a:hover,
.main-navigation a:hover,
nav a:hover {
  color: var(--text) !important;
}

/* === CONTENT BACKGROUND === */
.ct-container,
.ct-container-full,
.entry-content,
.site-content,
main,
.wp-site-blocks,
.ct-content-area,
article,
.site-main {
  background: var(--bg) !important;
}

/* === HERO SECTION === */
.shin-hero.wp-block-group {
  padding-top: 5rem !important;
  padding-bottom: 4rem !important;
  min-height: 75vh !important;
  display: flex !important;
  align-items: center !important;
}

.shin-hero-inner {
  padding: 3rem 0;
}

.shin-label-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.shin-rule {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--green);
  flex-shrink: 0;
}

.shin-label-text {
  font-family: var(--body) !important;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green) !important;
}

.shin-hero-heading {
  font-family: var(--serif) !important;
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 2rem 0 !important;
}

.shin-hero-amp {
  color: var(--text);
  font-style: normal;
}

.shin-hero-heading em.shin-hero-accent,
em.shin-hero-accent {
  color: oklch(70% 0.18 22) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  text-decoration: none !important;
}

.shin-hero-sub {
  font-family: var(--body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 !important;
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  letter-spacing: 0.01em !important;
}

h2.wp-block-heading { font-size: 2rem !important; }
h3.wp-block-heading { font-size: 1.5rem !important; }

/* === BODY TEXT === */
p, li, td, th {
  font-family: var(--body) !important;
  color: var(--text) !important;
}

/* === LINKS (global) === */
a {
  color: var(--green-lt) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
a:hover { color: var(--red-lt) !important; }

/* Nav links override (more specific) */
.ct-menu a,
nav a,
.site-title a { color: inherit !important; }

/* === BUTTONS (WP core) === */
.wp-block-button__link,
.wp-element-button {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: var(--body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.85em 2em !important;
  border-radius: 0 !important;
  transition: all 0.25s !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  border-color: var(--green) !important;
  color: var(--green-lt) !important;
  background: transparent !important;
}

/* === STACKABLE BUTTONS === */
.stk-button {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: var(--body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.85em 2em !important;
  transition: all 0.25s !important;
}
.stk-button:hover {
  border-color: var(--green) !important;
  color: var(--green-lt) !important;
  background: var(--bg2) !important;
}

/* === FOOTER === */
footer,
.site-footer,
#colophon,
.ct-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
}

/* === BLOCKSY PALETTE === */
:root {
  --theme-palette-color-1: oklch(48% 0.10 145);
  --theme-palette-color-2: oklch(60% 0.18 22);
  --theme-palette-color-3: oklch(87% 0.018 75);
  --theme-palette-color-4: oklch(60% 0.015 70);
  --theme-palette-color-5: oklch(15% 0.015 55);
  --theme-palette-color-6: oklch(12% 0.014 55);
  --theme-palette-color-7: oklch(9% 0.012 55);
  --theme-palette-color-8: oklch(9% 0.012 55);
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::selection { background: var(--green); color: var(--bg); }

/* === MISC === */
.stk-block-spacer { background: transparent !important; }
#wpadminbar { background: #1a1a1a !important; }
img { max-width: 100%; height: auto; }

/* === MOBILE === */
@media (max-width: 768px) {
  body { font-size: 16px; }
  .shin-hero.wp-block-group { min-height: 60vh !important; padding-top: 3rem !important; }
  .shin-hero-heading { font-size: clamp(2.8rem, 12vw, 4rem) !important; }
}