/*
Theme Name:   Knowlson Football Tournament
Theme URI:    https://knowlsonfootball.co.uk
Description:  Child theme for the Knowlson Memorial Football Tournament site.
Author:       Knowlson Family & Friends
Template:     generatepress
Version:      1.0.0
Text Domain:  knowlson-child
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Core palette — Manchester United inspired */
  --kft-red: #DA291C;
  --kft-red-dark: #A11E14;
  --kft-black: #1A1A1A;
  --kft-white: #FFFFFF;
  --kft-off-white: #F7F5F2;
  --kft-gold: #FFD700;
  --kft-gold-dark: #C9A400;

  /* Semantic tokens */
  --kft-color-bg: var(--kft-white);
  --kft-color-bg-alt: var(--kft-off-white);
  --kft-color-text: var(--kft-black);
  --kft-color-primary: var(--kft-red);
  --kft-color-primary-hover: var(--kft-red-dark);
  --kft-color-accent: var(--kft-gold);
  --kft-color-accent-hover: var(--kft-gold-dark);

  /* Typography */
  --kft-font-heading: 'Anton', 'Arial Narrow', sans-serif;
  --kft-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing / shape */
  --kft-radius: 10px;
  --kft-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
  background-color: var(--kft-color-bg);
  color: var(--kft-color-text);
  font-family: var(--kft-font-body);
}

h1, h2, h3, h4,
.site-title,
.entry-title {
  font-family: var(--kft-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--kft-black);
}

a {
  color: var(--kft-color-primary);
}

a:hover {
  color: var(--kft-color-primary-hover);
}

/* ==========================================================================
   3. Header / site branding
   ========================================================================== */
.site-header,
.site-header .inside-header {
  background-color: var(--kft-black);
  border-bottom: 4px solid var(--kft-color-primary);
}

.site-header .site-title a,
.site-header .site-description {
  color: var(--kft-white) !important;
}

.main-navigation,
.main-navigation .inside-navigation {
  background-color: var(--kft-color-primary);
}

.main-navigation a {
  color: var(--kft-white) !important;
  font-family: var(--kft-font-heading);
  letter-spacing: 0.5px;
}

.main-navigation ul ul {
  background-color: var(--kft-red-dark);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.button,
button,
input[type="submit"],
.wp-block-button__link {
  background-color: var(--kft-color-primary);
  color: var(--kft-white);
  font-family: var(--kft-font-heading);
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--kft-radius);
  padding: 0.75em 1.5em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--kft-color-primary-hover);
  transform: translateY(-1px);
}

/* Secondary / gold accent button, for celebratory calls to action
   e.g. "Sign up for the tournament", "Predict the score" */
.button.is-accent,
.wp-block-button.is-style-accent .wp-block-button__link {
  background-color: var(--kft-color-accent);
  color: var(--kft-black);
}

.button.is-accent:hover,
.wp-block-button.is-style-accent .wp-block-button__link:hover {
  background-color: var(--kft-color-accent-hover);
}

/* ==========================================================================
   5. Cards / content blocks (gallery items, tribute wall entries, etc.)
   ========================================================================== */
.kft-card {
  background-color: var(--kft-white);
  border-radius: var(--kft-radius);
  box-shadow: var(--kft-shadow);
  padding: 1.5rem;
  border-top: 4px solid var(--kft-color-primary);
}

.kft-card--accent {
  border-top-color: var(--kft-color-accent);
}

/* Alternate section background for visual rhythm down the homepage */
.kft-section-alt {
  background-color: var(--kft-color-bg-alt);
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.site-footer,
.site-footer .inside-site-info {
  background-color: var(--kft-black);
  color: var(--kft-white);
}

.site-footer a {
  color: var(--kft-color-accent);
}