/*
Theme Name: Hope For Mankind
Theme URI: https://hopeformankind.org.uk/
Author: Hope For Mankind
Author URI: https://hopeformankind.org.uk/
Description: A warm, trustworthy, mission-driven custom theme for a Muslim charity — built entirely on native WordPress Pages, Page Templates and simple meta boxes. No ACF, no custom post types, no page builder. Donations via GiveWP.
Version: 1.0.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hope-for-mankind
Tags: charity, nonprofit, donations, projects, givewp, page-templates, responsive-layout, accessibility-ready, translation-ready
*/

/* ============================================================
   DESIGN TOKENS
   Single source of truth — every colour, spacing, radius and
   shadow used anywhere in the theme is defined once, here.
   ============================================================ */
:root {
  /* Colour palette: brand navy + the olive-gold from the logo + off-white */
  --clr-navy:        #1B2A4A;
  --clr-navy-dark:   #111C33;
  --clr-navy-light:  #2A3F6B;
  --clr-olive:        #A6A034;
  --clr-olive-dark:   #83801F;
  --clr-olive-light:  #C2BC5C;
  --clr-cream:       #FBF8F2;
  --clr-cream-dark:  #F2ECDD;
  --clr-white:       #FFFFFF;
  --clr-ink:         #1C2321;
  --clr-ink-light:   #55605C;
  --clr-ink-muted:   #7C8783;
  --clr-border:      #E7E2D8;
  --clr-error:       #B3261E;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max:    1280px;
  --container-narrow: 760px;
  --container-pad:    clamp(1.25rem, 4vw, 2.5rem);
  --header-height:    96px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(28, 35, 33, 0.08);
  --shadow-md: 0 8px 24px rgba(28, 35, 33, 0.10);
  --shadow-lg: 0 20px 48px rgba(28, 35, 33, 0.14);

  /* Motion */
  --ease-base: 200ms ease;
  --ease-slow: 350ms ease;

  --z-header:  200;
  --z-overlay: 300;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--clr-ink);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--clr-navy); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--clr-olive-dark); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--clr-olive);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--clr-navy-dark);
  font-weight: var(--weight-bold);
}

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: var(--text-base); }

table { border-collapse: collapse; width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-4); z-index: 999;
  background: var(--clr-olive); color: var(--clr-navy-dark);
  font-weight: var(--weight-bold); padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md); text-decoration: none;
}
.skip-link:focus { top: 0; }