/*
Theme Name:  AAL Children
Theme URI:   https://aalchildren.com
Author:      AAL Children
Author URI:  https://aalchildren.com
Description: A bilingual Tamil/English WordPress theme for AAL Children (aalchildren.com).
             Custom-built, mobile-first, no frameworks. Four homepage sections: About Us,
             Our Story, Team, and Contact Us. Polylang + Contact Form 7 ready.
Version:     1.2.0
Requires at least: 6.0
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: aal-children
Tags:        custom-menu, featured-images, threaded-comments, translation-ready

All original code. No code, CSS, or images derived from any commercial theme.
*/

/* ============================================================
   BRAND COLOUR TOKENS
   All colour values must come from these variables.
   NEVER hardcode hex values elsewhere in the theme.
   ============================================================ */
:root {
  --aal-green:  #009745;   /* rgb(0,151,69)   CMYK 84,11,93,1  Pantone 347C — primary   */
  --aal-yellow: #FFD10A;   /* rgb(255,209,10) CMYK 0,17,92,0   Pantone 109C — accent only */
  --aal-red:    #C74A28;   /* rgb(199,74,40)  CMYK 16,80,89,5  Pantone 7598C — secondary */
  --aal-black:  #282828;   /* rgb(39,39,39)   CMYK 72,63,58,73 Pantone 426  — body text  */
  --aal-white:  #FFFFFF;

  /* Derived / utility tokens — still based on brand colours */
  --aal-green-dark:   #006e31;   /* darkened green for hover states  */
  --aal-green-light:  #e6f5ec;   /* very light green tint for section bg */
  --aal-grey-100:     #f5f5f5;
  --aal-grey-200:     #e0e0e0;
  --aal-grey-500:     #757575;

  /* Spacing scale */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;

  /* Typography */
  --font-sans: 'Poppins', 'Noto Sans Tamil', sans-serif;
  --font-tamil: 'Hind Madurai', 'Noto Sans Tamil', sans-serif;
  --base-font-size: 16px;
  --line-height-base: 1.65;

  /* Layout */
  --container-max: 1200px;
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.14);

  /* Transitions */
  --transition-base: 0.25s ease;
}

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

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--aal-black);
  background-color: var(--aal-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tamil language class applied by Polylang on <html lang="ta"> */
:lang(ta),
.lang-ta {
  font-family: var(--font-tamil);
}

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

a {
  color: var(--aal-green);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover,
a:focus {
  color: var(--aal-green-dark);
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid var(--aal-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

ul, ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--aal-black);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem);  color: var(--aal-green); }
h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p { margin-bottom: var(--sp-sm); }
p:last-child { margin-bottom: 0; }

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