/*
Theme Name: Adarable
Theme URI: https://example.com/adarable
Author: Adar
Author URI: https://example.com
Description: A calm, minimal personal blog theme with generous white space, warm tones, and a flexible card layout. Built on the modern WordPress block (theme.json) system.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adarable
*/

/* =========================================================
   Design tokens (also declared in theme.json for the editor)
   ========================================================= */
:root {
  /* Colours — pulled from the active theme palette so style variations recolour everything */
  --color-bg: var(--wp--preset--color--background);
  --color-surface: var(--wp--preset--color--surface);
  --color-surface-soft: var(--wp--preset--color--surface-soft);
  --color-border-subtle: var(--wp--preset--color--border);
  --color-text: var(--wp--preset--color--foreground);
  --color-text-muted: var(--wp--preset--color--muted);
  --color-accent: var(--wp--preset--color--accent);

  /* Typography */
  --font-family-sans: "Heebo", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-family-serif: "Heebo", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;

  --line-height-body: 1.6;
  --line-height-heading: 1.2;

  /* Spacing */
  --spacing-unit: 1rem;
  --spacing-xs: calc(0.25 * var(--spacing-unit));
  --spacing-sm: calc(0.5 * var(--spacing-unit));
  --spacing-md: var(--spacing-unit);
  --spacing-lg: calc(1.5 * var(--spacing-unit));
  --spacing-xl: calc(2 * var(--spacing-unit));
  --spacing-2xl: calc(3 * var(--spacing-unit));
  --spacing-3xl: calc(4 * var(--spacing-unit));
  --spacing-4xl: calc(6 * var(--spacing-unit));

  /* Borders & Shadows */
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --box-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Layout */
  --content-width: 1140px;
}

/* Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: min(var(--content-width), 88%);
  margin-inline: auto;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-serif);
  font-weight: 450;
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

/* Links */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration: none; }

/* Sections */
.section { padding-block: var(--spacing-3xl); }
.section-header { text-align: center; margin-bottom: var(--spacing-3xl); max-width: 600px; margin-inline: auto; }
/* Replace the kicker text with a thin accent line (matching the divider below the title) */
.section-kicker { width: var(--spacing-3xl); height: 2px; background-color: var(--color-accent); margin: 0 auto var(--spacing-md); font-size: 0; line-height: 0; }
.section-divider { width: var(--spacing-3xl); height: 2px; background-color: var(--color-accent); margin-inline: auto; margin-top: var(--spacing-lg); }
.section-intro { font-size: var(--font-size-md); color: var(--color-text-muted); }
.two-column { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3xl); }
@media (min-width: 1024px) { .two-column { grid-template-columns: repeat(2, 1fr); } }

/* Header */
.site-header { position: sticky; top: 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); padding-block: var(--spacing-md); z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); }
.brand-link { font-family: var(--font-family-serif); font-size: var(--font-size-2xl); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.brand-tagline { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; margin-top: var(--spacing-xs); }

/* WordPress navigation block, styled to match the original nav */
.site-header .wp-block-navigation { gap: var(--spacing-lg); }
.site-header .wp-block-navigation a {
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-header .wp-block-navigation a:hover { color: var(--color-accent); }
/* Active section (set by scroll-spy): accent colour + underline */
.site-header .wp-block-navigation a.is-active { color: var(--color-accent); position: relative; }
.site-header .wp-block-navigation a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background-color: var(--color-accent); }

/* Hero */
.hero { background-color: var(--color-surface-soft); padding-block: var(--spacing-4xl); }
/* Desktop (>=1024px): copy + buttons on the left, image on the right */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  grid-template-areas: "copy media" "actions media" ". media";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--spacing-3xl);
  row-gap: var(--spacing-lg);
  align-items: start;
}
.hero-copy { grid-area: copy; }
.hero-media { grid-area: media; align-self: start; }
.hero-media img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-subtle); }
.hero-title { font-size: var(--font-size-4xl); margin-top: 0; margin-bottom: var(--spacing-md); }
.hero-text { font-size: var(--font-size-lg); color: var(--color-text-muted); margin: 0; }
.hero-actions { grid-area: actions; display: flex; flex-direction: column; gap: var(--spacing-md); align-items: stretch; }
/* Give the filled button a transparent 2px border so it matches the outline button's height */
.hero-actions .wp-block-button__link { padding: var(--spacing-sm) var(--spacing-lg); border: 2px solid transparent; }
.hero-actions .wp-block-button, .hero-actions .wp-block-button__link { width: 100%; }
.hero-actions .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--color-border-subtle); background-color: transparent; color: var(--color-text); }

/* Mobile/tablet (<1024px): title + text on top, full-width image, then buttons */
@media (max-width: 1023.98px) {
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "copy" "media" "actions";
  }
}

/* About */
.about-layout { align-items: start; }
@media (min-width: 1024px) { .about-layout { grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr); } }
.about-media img { display: block; width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: var(--box-shadow-subtle); }
/* In the stacked (tablet/mobile) layout, shrink the portrait to 60% and centre it */
@media (max-width: 1023.98px) { .about-media img { width: 60%; margin-inline: auto; } }
.about-highlight { background-color: var(--color-surface-soft); border: 1px solid var(--color-border-subtle); border-radius: var(--border-radius-md); padding: var(--spacing-lg); margin-top: var(--spacing-2xl); }
.about-highlight p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 0; }
.about-highlight ul { list-style: disc; padding-inline-start: var(--spacing-lg); margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text); }
.about-highlight li { margin-bottom: var(--spacing-xs); }

/* Post grid + cards */
/* The Query block outputs a <ul class="wp-block-post-template"> — the grid lives there. */
.post-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--spacing-lg); align-items: stretch; list-style: none; margin: 0; padding: 0; }
.post-grid .wp-block-post-template > li { display: flex; flex-direction: column; margin: 0; }
.post-card { background: var(--color-surface); border-radius: var(--border-radius-lg); overflow: hidden; padding: var(--spacing-xl); border: 1px solid var(--color-border-subtle); box-shadow: var(--box-shadow-subtle); display: flex; flex-direction: column; flex: 1; width: 100%; text-align: start; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease; }
.post-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); transform: translateY(-2px); }
.post-card-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--spacing-xs); }
.post-card-title { font-family: var(--font-family-serif); font-size: var(--font-size-xl); margin: 0 0 var(--spacing-md); }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-excerpt { font-size: var(--font-size-base); color: var(--color-text-muted); margin-bottom: var(--spacing-lg); flex: 1; }
.post-card-more { font-weight: 500; color: var(--color-accent); }
/* Featured image inside a card: full-bleed to the card edges, no radius */
.post-card .wp-block-post-featured-image { margin: calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl)) var(--spacing-md); }
.post-card .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* "All Posts" button below the recent posts */
.all-posts-action { margin-top: var(--spacing-2xl); }

/* All Posts page: posts grouped under category headings */
.category-group { margin-bottom: var(--spacing-4xl); }
.category-group-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.category-group-title { font-size: var(--font-size-3xl); margin: 0; }
.category-group-title a { color: inherit; text-decoration: none; }
.category-group-title a:hover { color: var(--color-accent); }
.category-group .section-divider { margin-top: var(--spacing-lg); }

/* Contact — centred single column (overrides .two-column for this section) */
.section-contact .two-column { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-lg); max-width: 600px; margin-inline: auto; }
.contact-actions { display: flex; flex-direction: column; gap: var(--spacing-md); align-items: center; }
.contact-socials { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; justify-content: center; }

/* Single post */
/* Full-width featured image at the top of a post */
.single-featured-image { margin-bottom: var(--spacing-3xl); }
.single-featured-image img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
/* Reading width for the article body and comments */
.single-post-content { max-width: 800px; margin-inline: auto; }
.single-comments { max-width: min(800px, 88%); margin-inline: auto; padding-block: var(--spacing-3xl); border-top: 1px solid var(--color-border-subtle); margin-top: var(--spacing-4xl); }
/* Style the Tags (post terms) links as soft pills */
.single-taxonomy .wp-block-post-terms a { display: inline-flex; background-color: var(--color-surface-soft); color: var(--color-text); text-decoration: none; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--border-radius-md); border: 1px solid var(--color-border-subtle); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.single-taxonomy .wp-block-post-terms a:hover { background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); border-color: var(--color-accent); color: var(--color-accent); }
.single-post { max-width: min(800px, 88%); margin-inline: auto; padding-block: var(--spacing-xl); }
.single-post-header { text-align: center; margin-bottom: var(--spacing-3xl); }
.single-post-meta { font-size: var(--font-size-md); color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.single-post-title { font-size: var(--font-size-4xl); margin-top: 0; margin-bottom: var(--spacing-md); max-width: 25ch; margin-inline: auto; }
.single-post-content { font-family: var(--font-family-sans); font-size: var(--font-size-lg); line-height: var(--line-height-body); color: var(--color-text); }
.single-post-content p { margin-bottom: var(--spacing-lg); }
.single-post-content img { max-width: 100%; height: auto; display: block; margin-inline: auto; margin-block: var(--spacing-2xl); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-subtle); }
.single-post-footer { margin-top: var(--spacing-4xl); padding-top: var(--spacing-2xl); border-top: 1px solid var(--color-border-subtle); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xl); }
/* Make the two footer buttons share a matching width */
.single-post-footer .wp-block-button__link { min-width: 12rem; }
.single-taxonomy { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); align-items: center; }

/* Archive */
.archive-header { background-color: var(--color-surface-soft); border: 1px solid var(--color-border-subtle); border-radius: var(--border-radius-lg); padding: var(--spacing-2xl); margin-bottom: var(--spacing-3xl); display: flex; flex-direction: column; gap: var(--spacing-lg); }
@media (min-width: 1024px) { .archive-header { flex-direction: row; justify-content: space-between; align-items: center; } }
.archive-label { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--spacing-xs); }
.archive-title { font-size: var(--font-size-3xl); margin: 0; }
.pill { display: inline-flex; align-items: center; background-color: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--border-radius-lg); border: 1px solid var(--color-border-subtle); }

/* Footer */
.site-footer { text-align: center; padding-block: var(--spacing-3xl); background-color: var(--color-surface-soft); border-top: 1px solid var(--color-border-subtle); margin-top: var(--spacing-4xl); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xl); }
.footer-logo { width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 50%; }
.footer-site-name { font-family: var(--font-family-serif); font-size: var(--font-size-lg); margin: 0; }
.footer-copy { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }

/* ============ Global layout: full-width header/footer + small-screen gutters ============ */
/* The whole page chain must be full width; otherwise body/wrapper can shrink to their widest child */
html, body { width: 100%; min-width: 100%; margin: 0 !important; padding: 0 !important; }
/* Animate in-page jumps, and offset anchor targets so they clear the sticky header */
html { scroll-behavior: smooth; }
.section { scroll-margin-top: 0; }
.wp-site-blocks { width: 100%; }
/* Remove the default vertical gaps between header, main and footer */
.wp-site-blocks > * { margin-block: 0; }
/* On single posts, drop the main's vertical padding so content sits flush with header/footer */
.single main.section { padding-block: 0; }
/* Header and footer bars always span the full page width */
.site-header, .site-footer { width: 100%; }

/* Minimum 6% side gutter for blog index & archive pages (front page uses .container; single uses its own max-widths) */
body:not(.single) main.section { padding-inline: 6%; }