/*
Theme Name: Saykudan Brand
Theme URI: https://saykudan.com/
Description: Saykudan LTD brand theme — a lightweight classic theme applying the site's Inter + slate/blue design to blog posts, app pages and all non-Elementor pages. The Elementor homepage manages its own full-page template and is left untouched.
Author: Saykudan LTD
Version: 1.3.0
*/

/* ============================================================
   Saykudan brand tokens (extracted from the homepage)
   ============================================================ */
:root {
  --sk-bg: #ffffff;
  --sk-bg-alt: #f8fafc;
  --sk-ink: #0f172a;      /* slate-900 text */
  --sk-muted: #64748b;    /* slate-500 */
  --sk-border: #e2e8f0;
  --sk-primary: #2563eb;  /* brand blue */
  --sk-primary-dark: #1d4ed8;
  --sk-primary-light: #60a5fa;
  --sk-accent: #7c3aed;   /* purple (mods) */
  --sk-dark: #0f172a;     /* dark section bg */
  --sk-dark-2: #1e293b;
  --sk-radius: 16px;
}

/* ---------- Base typography ---------- */
body,
.wp-site-blocks,
.entry-content,
p, li, td, th, blockquote, figcaption, input, textarea, select, button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
body {
  background: var(--sk-bg);
  color: var(--sk-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif !important;
  color: var(--sk-ink);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.8em; }
h3 { font-size: 1.25rem; margin-top: 1.3em; }

a { color: var(--sk-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sk-primary-dark); }

/* ---------- Sticky-footer layout (kills the empty gap on short pages) ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.sk-main { flex: 1 0 auto; }        /* grows to push the footer to the bottom */
.sk-footer { flex-shrink: 0; }

/* ---------- Shared max width (header, footer + content all align) ---------- */
:root { --sk-wide: 1280px; }

/* ---------- Content container ---------- */
.sk-shell { max-width: var(--sk-wide); margin: 0 auto; padding: 40px 24px 64px; }
.entry-content { font-size: 1.06rem; max-width: 820px; }   /* readable text column */
.entry-content img { border-radius: 12px; }

/* ---------- Branded header ---------- */
.sk-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--sk-border);
}
.sk-header-in {
  max-width: var(--sk-wide); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sk-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.sk-brand img { width: 34px; height: 34px; border-radius: 9px; }
.sk-brand strong { color: var(--sk-ink); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.sk-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sk-nav a { color: var(--sk-ink); text-decoration: none !important; font-weight: 600; font-size: .95rem; }
.sk-nav a:hover { color: var(--sk-primary); }
.sk-nav .sk-quote {
  background: var(--sk-primary); color: #fff !important; padding: 9px 18px; border-radius: 100px;
}
.sk-nav .sk-quote:hover { background: var(--sk-primary-dark); }
@media (max-width: 640px){ .sk-nav a:not(.sk-quote){ display:none; } }

/* ---------- Post/page hero ---------- */
.sk-page-head { border-bottom: 1px solid var(--sk-border); padding-bottom: 22px; margin-bottom: 26px; }
.sk-eyebrow { display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--sk-primary); background:#eff6ff; border-radius:100px; padding:4px 12px; margin-bottom:12px; }
.sk-page-head h1 { margin: 0; }
.sk-meta { color: var(--sk-muted); font-size:.9rem; margin-top:10px; }

/* ---------- Cards / callouts inside content ---------- */
.entry-content .tip, .entry-content .sk-note {
  background: #f5f3ff; border-left: 4px solid var(--sk-accent);
  padding: 16px 18px; border-radius: 10px; margin: 1.6em 0;
}
.entry-content .cta, .entry-content .sk-cta {
  display:inline-block; background: var(--sk-primary); color:#fff !important; text-decoration:none !important;
  font-weight:600; padding:11px 22px; border-radius:100px; margin:.4em 0;
}
.entry-content .cta.alt, .entry-content .sk-cta.alt { background: var(--sk-accent); }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li { margin: .45em 0; }

/* app-page bits already carry their own classes (.sk-hero, .sk-gallery, etc.) */
.sk-hero .ico { border-radius: 22px; }
.sk-gallery img { border-radius: 16px; }

/* ---------- Branded footer ---------- */
.sk-footer { background: var(--sk-dark); color: #cbd5e1; margin-top: 0; }
.sk-footer-in { max-width: var(--sk-wide); margin: 0 auto; padding: 48px 24px; display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; }
.sk-footer a { color: #cbd5e1; text-decoration: none; }
.sk-footer a:hover { color: #fff; }
.sk-footer h4 { color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.sk-footer .col { min-width: 150px; }
.sk-footer .brand strong { color:#fff; font-size:1.05rem; }
.sk-footer .brand p { color:#94a3b8; max-width:280px; font-size:.9rem; }
/* Bottom bar in a DARKER shade for clear separation from the footer body. */
.sk-footer-bottom {
  background: #060b16;
  text-align:center; padding:16px; color:#94a3b8; font-size:.85rem;
}

/* ---------- Blog index (posts list) ---------- */
.sk-posts { max-width: var(--sk-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 24px; padding: 8px 0; }
.sk-post-card { border:1px solid var(--sk-border); border-radius: var(--sk-radius); padding: 22px; transition: box-shadow .2s, transform .2s; background:#fff; }
.sk-post-card:hover { box-shadow: 0 12px 30px rgba(2,6,23,.08); transform: translateY(-2px); }
.sk-post-card h2 { font-size: 1.2rem; margin: 0 0 8px; line-height:1.3; }
.sk-post-card h2 a { color: var(--sk-ink); text-decoration: none; }
.sk-post-card p { color: var(--sk-muted); margin: 0 0 14px; font-size:.96rem; }
.sk-post-card .sk-readmore { color: var(--sk-primary); font-weight:600; text-decoration:none; }