/**
 * ============================================================
 * IELTS Masterclass — Icon System + Page Transitions
 * Icon style: outline stroke, dark gray body + red accents
 * ============================================================
 */

/* ── SVG Icon base ────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  flex-shrink: 0;
  /* Inherits color for stroke via currentColor when not overridden */
}

/* Size variants */
.icon-xs  { width: 14px; height: 14px; }
.icon-sm  { width: 18px; height: 18px; }
.icon-md  { width: 22px; height: 22px; }
.icon-lg  { width: 28px; height: 28px; }
.icon-xl  { width: 36px; height: 36px; }
.icon-2xl { width: 48px; height: 48px; }
.icon-3xl { width: 64px; height: 64px; }

/* ── Icon in nav items ────────────────────────────────────── */
.nav-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nav-icon-svg svg {
  width: 100%;
  height: 100%;
}

/* ── Icon box (service cards, stat cards etc) ─────────────── */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--off-white);
  border: 1.5px solid var(--light-gray);
  transition: var(--transition);
}
.icon-box svg { display: block; }
.icon-box-sm  { width: 36px; height: 36px; }
.icon-box-md  { width: 52px; height: 52px; }
.icon-box-lg  { width: 68px; height: 68px; }

/* Icon box on card hover — lift + accent border */
.service-card:hover .icon-box,
.dash-stat-card:hover .icon-box {
  border-color: var(--secondary);
  background: rgba(232,184,75,.08);
}

/* ── Service card icon override ───────────────────────────── */
.service-card-icon.svg-icon-box {
  background: transparent;
  border: 2px solid var(--light-gray);
}

/* ── Inline icon + text pairing ──────────────────────────── */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ── Button icons ─────────────────────────────────────────── */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg svg { width: 18px; height: 18px; }

/* ── Admin icon preview grid (settings page) ─────────────── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}
.icon-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
}
.icon-grid-item:hover {
  border-color: var(--secondary);
  background: rgba(232,184,75,.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.icon-grid-item.selected {
  border-color: var(--primary);
  background: rgba(26,60,110,.06);
}
.icon-grid-item span {
  font-size: 0.68rem;
  color: var(--mid-gray);
  text-align: center;
  line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITION SYSTEM
   A full-screen overlay slides in from bottom-right, pauses,
   then slides away — giving a clean page-change feel.
   The overlay colour uses the site's primary colour.
═══════════════════════════════════════════════════════════ */

/* Overlay element injected by JS */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  /* The "curtain" — a diagonal gradient for visual interest */
  background: linear-gradient(
    135deg,
    var(--primary-dark)    0%,
    var(--primary)         40%,
    var(--primary-light)   70%,
    rgba(26,60,110,.85)   100%
  );

  /* Start hidden off-screen (clip-path circle from bottom-right) */
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: clip-path;
}

/* Expanding state */
#page-transition-overlay.expanding {
  clip-path: circle(150% at 50% 50%);
  pointer-events: all;
}

/* Contracting state (slides off to top-left) */
#page-transition-overlay.contracting {
  clip-path: circle(0% at 0% 0%);
  transition: clip-path 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Logo / brand mark shown during transition */
#page-transition-overlay .transition-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: opacity 0.25s ease 0.2s, transform 0.3s ease 0.2s;
  text-align: center;
  color: var(--white);
  pointer-events: none;
}
#page-transition-overlay.expanding .transition-brand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Loading bar at bottom of overlay */
#page-transition-overlay .transition-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--secondary);
  transition: width 0.35s ease 0.15s;
  border-radius: 0 2px 2px 0;
}
#page-transition-overlay.expanding .transition-bar {
  width: 100%;
}

/* Body class during transition — prevents flicker */
body.transitioning {
  overflow: hidden;
}

/* ── Content fade-in on page load ─────────────────────────── */
.page-content-wrap {
  animation: pageFadeIn 0.45s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════
   ICON COLOUR THEME OVERRIDES
   When admin sets custom icon stroke/accent colours,
   these CSS variables control the entire icon palette.
═══════════════════════════════════════════════════════════ */
:root {
  --icon-stroke: #3d3d3d;   /* main outline colour */
  --icon-accent: #e63946;   /* accent / highlight colour */
  --icon-size:   20px;      /* default nav icon size */
}

/* Apply theme to all inline SVGs in nav items */
.nav-icon-svg svg path,
.nav-icon-svg svg line,
.nav-icon-svg svg rect,
.nav-icon-svg svg circle,
.nav-icon-svg svg polyline,
.nav-icon-svg svg polygon {
  vector-effect: non-scaling-stroke;
}

/* ── Responsive icon sizing ───────────────────────────────── */
@media (max-width: 768px) {
  .icon-box-lg { width: 56px; height: 56px; }
  .icon-2xl { width: 40px; height: 40px; }
  .icon-3xl { width: 52px; height: 52px; }
}

/* ── SVG icons inside specific containers ─────────────────── */

/* Stat icons in dashboard cards */
.stat-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* Service card icons */
.service-card-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

/* Highlight bar icons */
.highlight-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Nav icon SVG wrapper */
.nav-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.nav-icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Footer contact icon span */
.icon svg {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

/* Heading prefix icons — align vertically with text */
h1 svg, h2 svg, h3 svg, h4 svg,
.admin-card-title svg,
.dash-card-title svg,
.dash-page-title svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

/* Button icons */
.btn svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

/* Empty state large icons */
.empty-state-icon svg {
  opacity: 0.55;
}

/* Inline text icons (blog meta, etc.) */
span > svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Admin page header title icon */
.admin-page-header h1 svg {
  width: 22px;
  height: 22px;
}

/* Tab button icons */
.tab-btn svg {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Badge icons */
.badge svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}