/*
Theme Name:     TopMind Divi Child
Theme URI:      https://topmind.vn
Description:    Custom Divi 5 child theme for TopMind English Preschool — establishes brand colors, typography, rounded card style, and reusable button styles. Use Divi Visual Builder for page-level edits.
Author:         TopMind
Author URI:     https://topmind.vn
Template:       Divi
Version:        1.0.0
Text Domain:    topmind-divi-child
*/

/* ─────────────────────────────────────────────────────────────
   1. Brand tokens
   ───────────────────────────────────────────────────────────── */
:root {
    /* Primary brand */
    --tm-blue-50:  #eff6ff;
    --tm-blue-100: #dbeafe;
    --tm-blue-400: #60a5fa;
    --tm-blue-500: #3b82f6;
    --tm-blue-600: #2563eb;
    --tm-blue-700: #1d4ed8;

    /* Accents */
    --tm-pink-500:  #ec4899;
    --tm-amber-500: #f59e0b;
    --tm-green-500: #22c55e;
    --tm-orange-500:#f97316;
    --tm-violet-500:#8b5cf6;

    /* Neutrals */
    --tm-slate-50:  #f8fafc;
    --tm-slate-100: #f1f5f9;
    --tm-slate-200: #e2e8f0;
    --tm-slate-500: #64748b;
    --tm-slate-600: #475569;
    --tm-slate-700: #334155;
    --tm-slate-800: #1e293b;
    --tm-slate-900: #0f172a;

    /* Surfaces */
    --tm-bg:        #ffffff;
    --tm-bg-soft:   var(--tm-slate-50);
    --tm-text:      var(--tm-slate-800);
    --tm-text-soft: var(--tm-slate-600);

    /* Radii (matches the original site's rounded-3xl / rounded-[3rem] feel) */
    --tm-radius-sm: 1rem;     /* rounded-2xl   */
    --tm-radius-md: 1.5rem;   /* rounded-3xl   */
    --tm-radius-lg: 2.5rem;   /* rounded-[2.5rem] */
    --tm-radius-xl: 3rem;     /* rounded-[3rem]   */

    /* Shadows */
    --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --tm-shadow:    0 4px 12px rgba(15, 23, 42, .06);
    --tm-shadow-lg: 0 16px 40px rgba(15, 23, 42, .10);

    /* Type */
    --tm-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ─────────────────────────────────────────────────────────────
   2. Global typography baseline
   ───────────────────────────────────────────────────────────── */
body,
#page-container {
    font-family: var(--tm-font-sans);
    color: var(--tm-text);
    background-color: var(--tm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
    color: var(--tm-slate-800);
    font-weight: 800;
    letter-spacing: -0.01em;
}

p {
    color: var(--tm-text-soft);
    line-height: 1.7;
}

a {
    color: var(--tm-blue-600);
    transition: color .2s ease;
}
a:hover {
    color: var(--tm-blue-700);
}

/* ─────────────────────────────────────────────────────────────
   3. TopMind branded button (apply via Divi "CSS Class" field)
       Usage: add the class .tm-btn to any Divi Button module.
   ───────────────────────────────────────────────────────────── */
.tm-btn.et_pb_button,
a.tm-btn {
    background-color: var(--tm-blue-500) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 1rem 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
    box-shadow: var(--tm-shadow);
}
.tm-btn.et_pb_button:hover,
a.tm-btn:hover {
    background-color: var(--tm-blue-600) !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--tm-shadow-lg);
}

/* Variant: Zalo / WhatsApp green CTA */
.tm-btn--zalo.et_pb_button,
a.tm-btn--zalo {
    background-color: var(--tm-green-500) !important;
}
.tm-btn--zalo.et_pb_button:hover,
a.tm-btn--zalo:hover {
    background-color: #16a34a !important;
}

/* Variant: subtle ghost button */
.tm-btn--ghost.et_pb_button,
a.tm-btn--ghost {
    background-color: var(--tm-slate-100) !important;
    color: var(--tm-slate-800) !important;
    box-shadow: none !important;
}
.tm-btn--ghost.et_pb_button:hover,
a.tm-btn--ghost:hover {
    background-color: var(--tm-slate-200) !important;
}

/* Remove Divi's default arrow on .tm-btn since it conflicts with custom icons */
.tm-btn.et_pb_button:after {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   4. TopMind card style (apply class .tm-card)
   ───────────────────────────────────────────────────────────── */
.tm-card {
    background-color: #fff;
    border: 1px solid var(--tm-slate-100);
    border-radius: var(--tm-radius-md);
    padding: 2rem;
    box-shadow: var(--tm-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tm-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow-lg);
}

.tm-card--lg {
    border-radius: var(--tm-radius-lg);
    padding: 2.5rem;
}

.tm-card--xl {
    border-radius: var(--tm-radius-xl);
    padding: 3rem;
}

/* Soft tinted card variants */
.tm-card--blue   { background-color: var(--tm-blue-50);  border-color: var(--tm-blue-100); }
.tm-card--soft   { background-color: var(--tm-slate-50); border-color: var(--tm-slate-100); }

/* ─────────────────────────────────────────────────────────────
   5. Section helpers
   ───────────────────────────────────────────────────────────── */
.tm-section--soft .et_pb_section_inner,
.tm-section--soft {
    background-color: var(--tm-bg-soft);
}

/* Round the corners on Divi images/sliders by default — matches old site feel */
.et_pb_image .et_pb_image_wrap img,
.et_pb_slide_image img {
    border-radius: var(--tm-radius-md);
}

.tm-image--xl .et_pb_image_wrap img {
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-lg);
}

/* ─────────────────────────────────────────────────────────────
   6. Subtle entrance animation reused from the old site
   ───────────────────────────────────────────────────────────── */
@keyframes tm-fade-in-up {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.tm-animate-up {
    opacity: 0;
    animation: tm-fade-in-up .8s ease-out forwards;
}

/* ─────────────────────────────────────────────────────────────
   7. Misc cleanups against Divi defaults
   ───────────────────────────────────────────────────────────── */
/* Tighter container width on large screens to match the old 7xl feel */
.et_pb_row {
    max-width: 1280px;
}

/* Default card backgrounds inside Divi rows pick up the slate background */
.et_pb_section.et_pb_section_first.tm-section--hero {
    background-color: var(--tm-slate-900);
    color: #fff;
}