/*
Theme Name: Astra Child
Theme URI: https://andrespedes.com/
Description: Child theme for Astra — custom "Aurora" design system for the Andres Pedes personal brand (2026 rebuild). Signal-green accent, glassmorphism, scroll-reveal motion.
Author: Andres Cespedes Morales
Author URI: https://andrespedes.com/
Template: astra
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* =========================================================================
   AURORA design system — 2026 brand tokens
   Accent: signal green. Light base, gradient glows, glass surfaces.
   ========================================================================= */
:root {
  /* Surfaces */
  --ap-bg:         #f6f9f7;   /* very light cool base                     */
  --ap-bg-2:       #eef3f0;   /* alt section background                   */
  --ap-surface:    #ffffff;   /* cards / panels                          */
  --ap-ink:        #0a1410;   /* near-black w/ green undertone           */
  --ap-ink-soft:   #46554e;   /* secondary text                          */
  --ap-ink-faint:  #74837c;   /* tertiary / captions                     */
  --ap-line:       rgba(10,20,16,.10); /* hairlines                      */

  /* Brand — signal green + aurora support hues */
  --ap-green:        #12b974; /* primary green (readable on light)       */
  --ap-green-bright: #3ddc97; /* bright signal green for glows           */
  --ap-green-ink:    #0c8f59; /* hover / link text on light              */
  --ap-teal:         #0fb8b0; /* aurora support                          */
  --ap-violet:       #6d5ef6; /* aurora depth                            */
  --ap-cyan:         #36d6e7; /* aurora highlight                        */

  /* Gradients */
  --ap-grad: linear-gradient(120deg, var(--ap-green) 0%, var(--ap-teal) 55%, var(--ap-cyan) 100%);
  --ap-grad-text: linear-gradient(100deg, var(--ap-green-ink), var(--ap-teal) 70%);

  /* Type */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape & rhythm */
  --ap-radius:   18px;
  --ap-radius-lg:28px;
  --ap-maxw:     1200px;
  --ap-shadow:   0 18px 50px -24px rgba(10,30,22,.30);
  --ap-shadow-lg:0 40px 90px -40px rgba(10,40,28,.45);
}

/* =========================================================================
   Global base — applied site-wide so inner pages share the language
   ========================================================================= */
body {
  font-family: var(--font-body);
  color: var(--ap-ink);
  background: var(--ap-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .ap-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
}

a { color: var(--ap-green-ink); }
a:hover { color: var(--ap-green); }

::selection { background: var(--ap-green-bright); color: #04140d; }

/* =========================================================================
   Eyebrow / mono labels — a recurring "technologist" signature
   ========================================================================= */
.ap-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .72rem;
  color: var(--ap-green-ink);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--ap-grad);
  border-radius: 2px;
}

/* =========================================================================
   Inner-page utilities (carried over, restyled to the green system)
   ========================================================================= */
.ap-section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.ap-alt  { background: var(--ap-bg-2); }
.ap-dark { background: var(--ap-ink); color: #e7efe9; }
.ap-dark :where(h1,h2,h3,h4) { color: #fff; }
.ap-dark .ap-lead { color: #aebcb4; }

.ap-wrap { max-width: var(--ap-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.ap-lead { font-size: clamp(1.08rem, 2.1vw, 1.32rem); color: var(--ap-ink-soft); max-width: 62ch; line-height: 1.6; }

.ap-card {
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  height: 100%;
  box-shadow: var(--ap-shadow);
}
.ap-dark .ap-card { background: #11201a; border-color: rgba(255,255,255,.08); }

.ap-grid-2, .ap-grid-3 { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2rem; }
.ap-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) { .ap-grid-2, .ap-grid-3 { grid-template-columns: 1fr; } }

/* =========================================================================
   Buttons — global (Gutenberg) restyled to the green system
   ========================================================================= */
.wp-block-button__link {
  border-radius: 999px;
  padding: .8em 1.6em;
  font-weight: 600;
  background: var(--ap-ink);
  color: #fff;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent !important;
  border: 1.5px solid var(--ap-green);
  color: var(--ap-green-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--ap-green) !important;
  color: #03130c;
}
.ap-dark .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.ap-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: rgba(255,255,255,.12) !important;
  border-color: #fff;
}