/*
Theme Name: Surur Child
Theme URI: https://surur.my.id
Description: Child theme for GeneratePress — custom design for surur.my.id
Author: Surur
Author URI: https://surur.my.id
Template: generatepress
Version: 1.0.0
*/

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

/* ============================================
   CSS VARIABLES
============================================ */
:root {
  --ink: #0F0F0F;
  --ink-soft: #2A2A2A;
  --ink-muted: #6B6B6B;
  --paper: #F8F5EE;
  --paper-dark: #EDE8DC;
  --sand: #D4C5A9;
  --tide: #2C5F6E;
  --tide-light: #4A8FA0;
  --tide-pale: #E8F4F7;
  --coral: #C96B4A;
  --gold: #B8862A;
  --white: #FDFBF7;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

/* ============================================
   GLOBAL RESET & BASE
============================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-weight: 300;
  line-height: 1.75;
  font-size: 16px;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
}

/* ============================================
   TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(36px, 5vw, 64px) !important; }
h2 { font-size: clamp(28px, 4vw, 48px) !important; }
h3 { font-size: clamp(22px, 3vw, 32px) !important; }
h4 { font-size: 22px !important; }

p {
  font-family: var(--font-body) !important;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 1.5em;
}

a {
  color: var(--tide) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--coral) !important;
}

/* ============================================
   NAVIGATION
============================================ */
.site-header,
.site-header.is-sticky {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--paper-dark) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.main-navigation,
.main-nav {
  background: transparent !important;
}

.site-branding {
  padding: 20px 0 !important;
}

.site-title,
.site-title a {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0.02em;
}

.site-title a span {
  color: var(--coral) !important;
  font-style: italic;
}

.site-description {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
}

/* Nav links */
.main-navigation a,
.nav-primary a {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  padding: 8px 16px !important;
  position: relative;
}

.main-navigation a::after,
.nav-primary a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.main-navigation a:hover,
.nav-primary a:hover {
  color: var(--ink) !important;
  background: transparent !important;
}

.main-navigation a:hover::after,
.nav-primary a:hover::after {
  transform: scaleX(1);
}

/* ============================================
   HERO / FEATURED
============================================ */
.hero-section {
  background: var(--tide);
  padding: 100px 60px 80px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(74,143,160,0.2) 0%, transparent 60%);
}

/* ============================================
   BLOG POSTS LOOP
============================================ */
.post,
article.post {
  background: var(--white) !important;
  border: 1px solid var(--paper-dark) !important;
  border-radius: 0 !important;
  margin-bottom: 2px !important;
  padding: 48px !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.post::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--coral);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  transform-origin: bottom;
}

.post:hover {
  box-shadow: 0 12px 48px rgba(15,15,15,0.08) !important;
  transform: translateY(-2px) !important;
}

.post:hover::before {
  transform: scaleY(1);
}

/* Post category */
.post-categories a,
.cat-links a {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--coral) !important;
  background: rgba(201,107,74,0.08) !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
}

/* Post title */
.entry-title,
.entry-title a {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  margin: 12px 0 16px !important;
  transition: color 0.2s !important;
}

.entry-title a:hover {
  color: var(--tide) !important;
}

/* Post meta */
.entry-meta,
.post-meta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
}

.entry-meta a,
.post-meta a {
  color: var(--ink-muted) !important;
}

/* Post excerpt */
.entry-summary p,
.entry-content p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--ink-muted) !important;
  font-weight: 300 !important;
}

/* Read more button */
.more-link,
a.more-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--tide) !important;
  margin-top: 20px !important;
  transition: gap 0.3s ease !important;
}

.more-link::after {
  content: '→';
  transition: transform 0.3s ease;
}

.more-link:hover {
  color: var(--coral) !important;
  gap: 14px !important;
}

/* Featured image */
.post-thumbnail,
.post-image {
  margin-bottom: 28px !important;
  overflow: hidden !important;
}

.post-thumbnail img,
.post-image img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
  display: block !important;
}

.post:hover .post-thumbnail img,
.post:hover .post-image img {
  transform: scale(1.03) !important;
}

/* ============================================
   SINGLE POST
============================================ */
.single .entry-content {
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: var(--ink-soft) !important;
  max-width: 720px !important;
}

.single .entry-content h2 {
  font-size: 32px !important;
  margin: 48px 0 20px !important;
  color: var(--ink) !important;
}

.single .entry-content h3 {
  font-size: 24px !important;
  margin: 36px 0 16px !important;
}

.single .entry-content blockquote {
  border-left: 3px solid var(--coral) !important;
  padding: 20px 32px !important;
  margin: 36px 0 !important;
  background: var(--tide-pale) !important;
}

.single .entry-content blockquote p {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: var(--tide) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ============================================
   SIDEBAR
============================================ */
.widget-area {
  background: transparent !important;
}

.widget {
  background: var(--white) !important;
  border: 1px solid var(--paper-dark) !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

.widget-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--paper-dark) !important;
  font-weight: 500 !important;
}

/* ============================================
   PAGINATION
============================================ */
.pagination .page-numbers,
.nav-links a {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
  border: 1px solid var(--paper-dark) !important;
  color: var(--ink-muted) !important;
  transition: all 0.2s !important;
}

.pagination .page-numbers:hover,
.pagination .current {
  background: var(--tide) !important;
  border-color: var(--tide) !important;
  color: var(--white) !important;
}

/* ============================================
   FOOTER
============================================ */
.site-footer {
  background: var(--ink-soft) !important;
  color: rgba(253,251,247,0.5) !important;
  padding: 60px !important;
  margin-top: 0 !important;
}

.site-footer a {
  color: rgba(253,251,247,0.5) !important;
  transition: color 0.2s !important;
}

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

.site-info {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

/* ============================================
   UTILITY & MISC
============================================ */

/* Divider line */
hr {
  border: none !important;
  border-top: 1px solid var(--paper-dark) !important;
  margin: 48px 0 !important;
}

/* Selection color */
::selection {
  background: var(--tide) !important;
  color: var(--white) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--tide); }

/* ============================================
   DARK MODE TOGGLE BUTTON
============================================ */
.dark-mode-toggle {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  background: var(--ink);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 24px rgba(15,15,15,0.2);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.dark-mode-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 8px 32px rgba(15,15,15,0.3);
}

.dark-mode-toggle .icon-moon { display: block; }
.dark-mode-toggle .icon-sun { display: none; }

/* ============================================
   DARK MODE VARIABLES & OVERRIDES
============================================ */
body.dark-mode {
  --ink: #F0EBE0;
  --ink-soft: #D4CEC4;
  --ink-muted: #8A8478;
  --paper: #0F0F0F;
  --paper-dark: #1A1A1A;
  --sand: #3A3530;
  --white: #161614;
  --tide: #4A9BB5;
  --tide-light: #6BB8CE;
  --tide-pale: #0A1F26;
  background: #0F0F0F !important;
  color: #F0EBE0 !important;
}

body.dark-mode .site-header {
  background: #0F0F0F !important;
  border-bottom-color: #1A1A1A !important;
}

body.dark-mode .site-title a {
  color: #F0EBE0 !important;
}

body.dark-mode .main-navigation a,
body.dark-mode .nav-primary a {
  color: #8A8478 !important;
}

body.dark-mode .main-navigation a:hover,
body.dark-mode .nav-primary a:hover {
  color: #F0EBE0 !important;
}

body.dark-mode .post,
body.dark-mode article.post {
  background: #161614 !important;
  border-color: #1A1A1A !important;
}

body.dark-mode .entry-title,
body.dark-mode .entry-title a {
  color: #F0EBE0 !important;
}

body.dark-mode .entry-title a:hover {
  color: var(--tide-light) !important;
}

body.dark-mode .entry-summary p,
body.dark-mode .entry-content p,
body.dark-mode p {
  color: #8A8478 !important;
}

body.dark-mode .entry-meta,
body.dark-mode .post-meta {
  color: #5A5550 !important;
}

body.dark-mode .widget {
  background: #161614 !important;
  border-color: #1A1A1A !important;
}

body.dark-mode .widget-title {
  color: #5A5550 !important;
  border-bottom-color: #1A1A1A !important;
}

body.dark-mode .site-footer {
  background: #080808 !important;
}

body.dark-mode .single .entry-content blockquote {
  background: #0A1F26 !important;
}

body.dark-mode .single .entry-content blockquote p {
  color: var(--tide-light) !important;
}

body.dark-mode hr {
  border-top-color: #1A1A1A !important;
}

body.dark-mode .dark-mode-toggle {
  background: #F0EBE0;
}

body.dark-mode .dark-mode-toggle .icon-moon { display: none; }
body.dark-mode .dark-mode-toggle .icon-sun { display: block; }

body.dark-mode ::selection {
  background: var(--tide) !important;
  color: #0F0F0F !important;
}

body.dark-mode ::-webkit-scrollbar-track { background: #0F0F0F; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #2A2A2A; }

/* Smooth transition for dark mode */
body, body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 768px) {
  .post, article.post { padding: 28px !important; }
  .site-footer { padding: 40px 28px !important; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
}