/*
Theme Name:   RA Fischer
Theme URI:    https://www.rafischer.com
Description:  GeneratePress child theme for RA Fischer Co. Holds the design tokens, block
              styling for converted posts, and the blog template styles. Header and footer
              are placed with GP Hook Elements, not here, so the client can edit them.
Author:       Reese
Template:     generatepress
Version:      1.0.0
Text Domain:  rafischer
*/

/* =========================================================================
   1. Design tokens
   Matches the tokens already used by the hand-built HTML pages, so pages and
   posts share one palette. Change a value here and both follow.
   ========================================================================= */

:root {
  --raf-navy:        #1B3A5C;
  --raf-blue:        #185FA5;
  --raf-blue-d:      #0C447C;
  --raf-blue-light:  #EBF3FA;
  --raf-blue-mid:    #B5D4F4;
  --raf-green:       #2E7D4F;
  --raf-green-light: #EAF3EE;
  --raf-green-mid:   #C0DD97;
  --raf-teal:        #0F6E56;
  --raf-gold:        #C0974A;
  --raf-gold-light:  #FDF6E3;
  --raf-coral:       #E0574A;
  --raf-red:         #A32D2D;
  --raf-red-light:   #FCEBEB;
  --raf-text:        #1A1A1A;
  --raf-text-mid:    #4A4A4A;
  --raf-text-muted:  #6B6B6B;
  --raf-border:      rgba(0,0,0,0.10);
  --raf-border-mid:  rgba(0,0,0,0.16);
  --raf-bg-soft:     #F7F9FC;
  --raf-cream:       #FAF7F2;

  --raf-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --raf-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --raf-content: 820px;   /* comfortable reading measure for posts */
  --raf-wide:    1100px;  /* matches the page templates */
}

/* =========================================================================
   2. Fonts
   Upload the .woff2 files to /assets/fonts/ and these take effect. Until then
   the stacks above fall back to system fonts, so nothing breaks.
   Files needed:
     dm-sans-400.woff2, dm-sans-500.woff2, dm-sans-700.woff2
     playfair-display-400.woff2, playfair-display-400-italic.woff2
   ========================================================================= */

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* =========================================================================
   3. Base
   ========================================================================= */

body {
  font-family: var(--raf-sans);
  color: var(--raf-text);
  /* The HTML pages break out of the container with negative margins.
     clip stops that causing sideways scroll without creating a scroll container. */
  overflow-x: clip;
}

h1, h2, h3, h4, .entry-title {
  font-family: var(--raf-serif);
  font-weight: 400;
  color: var(--raf-navy);
  line-height: 1.2;
}

a { color: var(--raf-blue); }
a:hover { color: var(--raf-navy); }

/* Visible focus for keyboard users. GP's default is faint. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--raf-blue);
  outline-offset: 2px;
}

/* Marketing pages carry their own layout: let them run full width. */
.raf-page-html .entry-content > .wp-block-html { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}