/*
Theme Name: Astra Child
Description: Child theme of Astra for Reuben J. Brown Portfolio
Author: Reuben J. Brown
Template: astra
Version: 1.0.1
*/

/* Adobe Fonts - Legitima */
@import url("https://use.typekit.net/ffl7rra.css");

/* Local font - Innovator Grotesk */
@font-face {
  font-family: 'Innovator Grotesk';
  src: url('./fonts/InnovatorGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Innovator Grotesk';
  src: url('./fonts/InnovatorGrotesk-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Innovator Grotesk';
  src: url('./fonts/InnovatorGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Innovator Grotesk';
  src: url('./fonts/InnovatorGrotesk-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Right Serif';
  src: url('fonts/PP-Right-Serif-Tall-Fine.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Custom styles for portfolio site - DEBUG: Child theme CSS is loading */
:root {
  --highlight-color: #39e58f;
  --primary-font: 'Innovator Grotesk';
  --serif-font: 'Legitima';
  --compressed-font: 'PP Right Serif';
}

/* Ensure only custom fonts are used - no browser defaults */
html, body {
  font-family: var(--primary-font) !important;
}

/* Force custom fonts on all text elements */
h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th, label, input, textarea, button {
  font-family: inherit !important;
}

a {
  color: #808080;
}

a:hover {
  color:  var(--highlight-color);
  text-decoration
}

p a {
  color: inherit;
  text-decoration: underline;
}

p a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* Overlaps with descenders */
  width: 0; /* Hidden by default */
  height: 8px;
  background-color: var(--highlight-color);
  z-index: -1;
}

p a:hover::after {
  width: 100%;
}

p a:hover {
  color: #000;
}