/*
Theme Name: PTEClasses
Theme URI: https://pteclasses.com
Author: Think Higher Pty Ltd
Author URI: https://pteclasses.com
Description: Conversion-optimised, SEO & AEO-ready WordPress theme for PTEClasses — an AI-powered PTE Academic practice platform. Includes a marketing homepage, four PTE module pages (Speaking, Reading, Writing, Listening), an app-download page, blog/archive/single templates and built-in structured data. Drives visitors to the practice web app and the iOS/Android apps.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pteclasses
Tags: education, blog, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments, footer-widgets
*/

/* =================================================================
   PTEClasses — Design Tokens
   ================================================================= */
:root {
  /* Brand */
  --c-primary: #2456e6;
  --c-primary-600: #1c46c4;
  --c-primary-700: #16389f;
  --c-primary-050: #eef3ff;
  --c-primary-100: #dbe6ff;
  --c-accent: #2f6bff;
  --c-blue-bleed: #2456e6;
  --c-yellow: #ffc400;
  --c-success: #1faf6b;

  /* Ink / text */
  --c-ink: #0f1b3d;
  --c-body: #46506a;
  --c-muted: #7a8499;
  --c-line: #e7ebf3;
  --c-line-soft: #f0f3fa;

  /* Surfaces */
  --c-bg: #ffffff;
  --c-bg-soft: #f5f8ff;
  --c-bg-soft2: #eef3ff;
  --c-white: #ffffff;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15, 27, 61, .06);
  --shadow: 0 10px 30px rgba(15, 27, 61, .08);
  --shadow-lg: 0 20px 50px rgba(15, 27, 61, .12);
  --shadow-blue: 0 16px 38px rgba(36, 86, 230, .28);

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;
  --gutter: 20px;
  --header-h: 76px;

  /* Type */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* =================================================================
   Reset / base
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-primary-600); }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-ink);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { color: var(--c-body); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--c-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Accessibility helpers */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

/* =================================================================
   Layout primitives
   ================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(48px, 7vw, 92px); }
.section--soft { background: var(--c-bg-soft); }
.section--soft2 { background: var(--c-bg-soft2); }
.section--blue { background: var(--c-blue-bleed); color: #fff; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 52px); }
.section-head .eyebrow { display: inline-block; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--c-muted); font-size: 1.02rem; }
.section--blue .section-head h2,
.section--blue .section-head p { color: #fff; }

.eyebrow {
  font-family: var(--font-head); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; font-size: .72rem; color: var(--c-primary);
  margin-bottom: 10px;
}
.section--blue .eyebrow { color: #cfe0ff; }

.grid { display: grid; gap: 24px; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  padding: 13px 26px; border-radius: var(--r-pill); border: 2px solid transparent;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  cursor: pointer; line-height: 1; text-align: center; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--c-primary-600); color: #fff; }
.btn--accent { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-blue); }
.btn--accent:hover { background: var(--c-primary-600); color:#fff; }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #1d2c57; color: #fff; }
.btn--ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--sm { padding: 9px 18px; font-size: .85rem; }
.btn--block { display: flex; width: 100%; }

/* App store badges */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge { display: inline-flex; transition: transform .18s var(--ease); }
.store-badge:hover { transform: translateY(-3px); }
.store-badge img, .store-badge svg { height: 50px; width: auto; }

/* =================================================================
   Utility cards
   ================================================================= */
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }