/* Import Chalk base first */
@import url("../css/custom.css");

/* =========================
   Baseline v2 — Nasser.in
   ========================= */

/* Global dark base */
html, body { background:#171717 !important; }
body, .content, .content p, .content li, .content blockquote { color:#e2e2e2 !important; }

/* Links (electric blue everywhere) */
a,
.content a,
.header-links a,
footer.footer a {
  color:#66ccff !important;
  text-decoration:none !important;
}
a:hover,
.content a:hover,
.header-links a:hover,
footer.footer a:hover {
  color:#66ccff !important;
  text-decoration:underline !important;
}

/* Title color (electric blue) */
.header-logo { color:#66ccff !important; }
.header-logo:hover { color:#66ccff !important; text-decoration:none; }

/* Footer blends with page */
footer.footer {
  background:#171717 !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  color:#ccc !important;
  text-align:center;
}

/* Hide horizontal rules */
hr { display:none !important; }

/* ===== Navigation icons ===== */
.header-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; }
.header-links li { list-style:none; }
.header-links a {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem;
  font-size:0 !important; text-indent:-9999px; overflow:hidden; white-space:nowrap;
}
.header-links a::before {
  content:""; display:inline-block;
  width:1.35rem; height:1.35rem;
  background-repeat:no-repeat; background-position:center; background-size:1.35rem 1.35rem;
}

/* Home icon */
.header-links a[href="/"]::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366ccff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5l9-7 9 7V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/></svg>");
}

/* Musings (book) */
.header-links a[href="/musings"]::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2366ccff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M20 22H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20z'/></svg>");
}

/* Family (users) */
.header-links a[href="/family"]::before {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2366ccff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M17 21v-2a4 4 0 0 0-3-3.87'/><path d='M7 21v-2a4 4 0 0 1-3-3.87'/><circle cx='12' cy='7' r='4'/></svg>");
}

/* ===== Hero Block (Home) ===== */
.hero-block {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin:2rem 0 3rem 0;
}

.hero-left {
  flex:1;
  text-align:left;
}

.hero-right {
  flex:1;
  text-align:right;
}

.site-title {
  font-size:3rem;
  font-family:"Georgia", serif;
  color:#66ccff;
  margin:0;
}

.site-subtitle {
  font-size:1.2rem;
  color:#e2e2e2;
  margin-top:0.5rem;
}

.hero-image {
  max-width:300px;
  height:auto;
  border-radius:6px;
}

/* Center hero section in the viewport */
.hero-block{
  min-height: 100vh;       /* fill the viewport height */
  margin: 0;               /* remove outer margin */
}
.hero-left, .hero-right{
  display:flex;
  flex-direction:column;
  justify-content:center;  /* vertical centering */
}
.content-block{ margin-top: 2rem; } /* breathing room below hero */
/* Hero: reduce vertical space ~half, keep centered */
.hero-block{
  min-height: 60vh;       /* was 100vh */
}

/* Hero text: match site title font, body color, bigger gap to subtitle */
.site-title{
  font-family: 'Lato', Helvetica, sans-serif !important;
  color: #e2e2e2 !important;       /* match body text color */
  margin: 0 0 1rem 0;              /* more space before subtitle */
}
.site-subtitle{
  margin-top: 0;
  font-size: 1.1rem;
}

/* Hero block: equal edge padding for left + right */
.hero-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 2rem auto;
  padding: 0 5rem;   /* equal padding on both edges */
}

.hero-left, .hero-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-right {
  align-items: flex-end; /* keep picture snug to right padding */
}

.hero-image {
  max-width: 320px;
  height: auto;
  border-radius: 6px;
}

/* Reduce space above hero title */
.hero-block {
  padding-top: 1rem;   /* was larger by default */
}

.site-title {
  margin-top: 0;       /* remove extra push from top */
}


/* ===== Header: match nasserprakash.com ===== */
.header-nav{
  display:flex;
  align-items:center;
  justify-content:space-between; /* logo left, menu right */
  padding:0.35rem 2.25rem;       /* wee bit of padding on top/bottom */
  background:#171717;            /* same dark header strip */
  border-bottom:1px solid rgba(255,255,255,.18); /* thin line under header */
}

/* logo/title on the left */
.header-logo{
  font-weight:800;
  letter-spacing:.02em;
  color:#66ccff !important;      /* electric blue title */
  text-decoration:none;
}

/* menu on the right */
.header-links{
  display:flex;
  gap:2rem;
  margin:0;
  padding:0;
  list-style:none;
}
.header-links a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#cfd3d8;                 /* subtle grey like the body text */
  text-decoration:none;
}
.header-links a:hover{
  color:#66ccff;                 /* electric blue hover */
}


/* ===== Footer: mirror header feel ===== */
.footer{
  display:flex;
  align-items:center;
  justify-content:center;         /* centered footer content */
  padding:0.35rem 2.25rem;        /* same tiny vertical padding */
  background:#171717;
  border-top:1px solid rgba(255,255,255,.18); /* thin line above footer */
  color:#cfd3d8;
  margin-top:2rem;
}
.footer a{ color:#cfd3d8; text-decoration:none; }
.footer a:hover{ color:#66ccff; }


/* Eliminate unexpected space above header */
body { margin: 0 !important; }
.grid, .grid-centered, .grid-cell { margin-top: 0 !important; }

/* Header: tiny vertical pad, edge-to-edge rule */
.header-nav{
  margin: 0 !important;
  padding: 6px 2.25rem !important;              /* ~0.35rem */
  background: #171717;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Make sure logo + menu inherit header spacing, no extra margins */
.header-logo { margin: 0 !important; }
.header-links { margin: 0 !important; padding: 0 !important; }

/* Footer: mirror header spacing + rule */
.footer{
  margin: 0 !important;
  padding: 6px 2.25rem !important;
  background: #171717;
  border-top: 1px solid rgba(255,255,255,.18);
  color: #cfd3d8;
  display: flex; align-items: center; justify-content: center;
}
.footer a { color: #cfd3d8; text-decoration: none; }
.footer a:hover { color: #66ccff; }


/* Force override header/footer styling */
nav.header-nav {
  margin: 0 !important;
  padding: 6px 2.25rem !important;
  background: #171717 !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

footer.footer {
  margin: 0 !important;
  padding: 6px 2.25rem !important;
  background: #171717 !important;
  border-top: 1px solid rgba(255,255,255,.18) !important;
  color: #cfd3d8 !important;
  display:flex; justify-content:center; align-items:center;
}

/* === Kill header/footer thin lines === */
nav.header-nav { border-bottom: none !important; }
footer.footer  { border-top: none !important; }

/* === Footer text: © Nasser 2025 (CSS-only, no Twig changes) === */
footer.footer {
  position: relative;
}
footer.footer::after {
  content: "© Nasser 2025";
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: #cfd3d8;
  padding: 0.35rem 0;  /* matches your “wee bit” spacing */
}

/* === Footer: small, grey, italic, lowercase === */
footer.footer {
  margin: 0 !important;
  padding: 4px 2rem !important;   /* reduced padding, hugs the edge */
  background: #171717 !important;
  border-top: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

footer.footer::after {
  content: "© nasser 2025";
  display: block;
  text-align: center;
  font-size: 0.75rem;     /* slightly smaller */
  color: #7a7f85;         /* soft grey */
  font-style: italic;     /* italics */
  text-transform: lowercase;
  line-height: 1.2;       /* tighter vertical spacing */
  padding: 0.2rem 0;
}

/* ==== Global centered page container (replaces theme centering) ==== */
html, body { margin:0; width:100%; }

/* Center common wrappers regardless of the theme's original classes */
.page-wrapper,
.site-wrapper,
.container,
.grid-centered,
.grid,
main,
.content {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  box-sizing: border-box;
}

/* If the theme uses CSS Grid for layout, ensure grid tracks center */
.grid {
  /* don’t force display, only adjust if it already is a grid */
  justify-content: center;    /* center grid content if grid is used */
}

/* Align hero and lower content with the same gutters */
.hero-block,
.content-block {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

/* Header/Footer match the same horizontal gutters */
nav.header-nav,
footer.footer {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

/* Safety: if any element enforces left alignment, neutralize it */
body > .grid, body > .grid-centered { margin-left:auto !important; margin-right:auto !important; }

/* === Global font override === */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue',
               sans-serif !important;
}

/* === Hero block line spacing tweak === */
.hero-block h1, 
.hero-block p {
  line-height: 1.8;   /* increase vertical spacing between lines */
  margin-bottom: 0.75rem; /* add consistent gap below text */
}

/* === Hero subtitle lighter shade === */
.hero-block p {
  color: #cccccc;   /* light gray, just a notch softer than white */
}