/**
 * igomassage Child Theme — Main Stylesheet
 *
 * Design system tokens + base styles + component styles.
 * Brand: igomassage · Singapore's license-verified massage directory
 *
 * Section index:
 *   1.  Design Tokens (CSS variables)
 *   2.  Base Resets & Typography
 *   3.  Layout Utilities
 *   4.  Buttons & CTAs
 *   5.  Cards (listing, therapist, article)
 *   6.  Verification Badge
 *   7.  Pricing Display
 *   8.  Forms & Search
 *   9.  Hero & Sections
 *   10. Filter Bars
 *   11. Reviews
 *   12. Mobile Sticky CTA
 *   13. Empty States
 *   14. Print Styles
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    /* Brand colour scale (teal) */
    --igom-brand-50:  #E1F5EE;
    --igom-brand-100: #C8EDDF;
    --igom-brand-200: #9FE1CB;
    --igom-brand-300: #6FD0B0;
    --igom-brand-400: #3DBE94;
    --igom-brand-500: #1B9B72;
    --igom-brand-600: #0F6E56;  /* primary */
    --igom-brand-700: #0B5443;
    --igom-brand-800: #07382E;
    --igom-brand-900: #04342C;

    /* Neutral scale */
    --igom-grey-50:  #FAFAF8;
    --igom-grey-100: #F4F2EC;
    --igom-grey-200: #E8E5DC;
    --igom-grey-300: #D4D0C3;
    --igom-grey-400: #B4B0A1;
    --igom-grey-500: #888780;
    --igom-grey-600: #5C5B57;
    --igom-grey-700: #3A3937;
    --igom-grey-800: #232220;
    --igom-grey-900: #14130F;

    /* Accent palettes */
    --igom-gold-500:    #BA7517;
    --igom-platinum-500:#534AB7;
    --igom-warn-500:    #C84C0C;

    /* Surfaces */
    --igom-bg:           #FFFFFF;
    --igom-bg-soft:      var(--igom-grey-50);
    --igom-bg-muted:     var(--igom-grey-100);
    --igom-surface:      #FFFFFF;
    --igom-border:       var(--igom-grey-200);
    --igom-border-strong:var(--igom-grey-300);

    /* Text */
    --igom-text:        var(--igom-grey-800);
    --igom-text-soft:   var(--igom-grey-600);
    --igom-text-muted:  var(--igom-grey-500);
    --igom-text-inverse:#FFFFFF;
    --igom-link:        var(--igom-brand-600);
    --igom-link-hover:  var(--igom-brand-700);

    /* Radii */
    --igom-radius-sm: 4px;
    --igom-radius:    8px;
    --igom-radius-lg: 12px;
    --igom-radius-xl: 16px;
    --igom-radius-pill: 999px;

    /* Spacing scale (4-pt) */
    --igom-space-1: 4px;
    --igom-space-2: 8px;
    --igom-space-3: 12px;
    --igom-space-4: 16px;
    --igom-space-5: 20px;
    --igom-space-6: 24px;
    --igom-space-8: 32px;
    --igom-space-10:40px;
    --igom-space-12:48px;
    --igom-space-16:64px;

    /* Typography */
    --igom-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --igom-font-size-xs:  12px;
    --igom-font-size-sm:  13px;
    --igom-font-size-md:  15px;
    --igom-font-size-lg:  17px;
    --igom-font-size-xl:  21px;
    --igom-font-size-2xl: 26px;
    --igom-font-size-3xl: 32px;
    --igom-font-size-4xl: 42px;
    --igom-line:    1.55;
    --igom-line-tight: 1.25;

    /* Shadows (subtle, wellness-appropriate) */
    --igom-shadow-sm: 0 1px 2px rgba(7,56,46,0.06);
    --igom-shadow:    0 4px 12px rgba(7,56,46,0.08);
    --igom-shadow-lg: 0 12px 32px rgba(7,56,46,0.12);

    /* Containers */
    --igom-container:    1240px;
    --igom-container-md: 980px;
    --igom-container-sm: 720px;

    /* Transitions */
    --igom-trans: 160ms ease-out;
}

/* =========================================================
   2. BASE RESETS & TYPOGRAPHY
   ========================================================= */

body {
    font-family: var(--igom-font);
    font-size: var(--igom-font-size-md);
    line-height: var(--igom-line);
    color: var(--igom-text);
    background: var(--igom-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--igom-font);
    color: var(--igom-grey-900);
    line-height: var(--igom-line-tight);
    margin: 0 0 var(--igom-space-3);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--igom-font-size-3xl); }
h2 { font-size: var(--igom-font-size-2xl); }
h3 { font-size: var(--igom-font-size-xl); }
h4 { font-size: var(--igom-font-size-lg); }
h5 { font-size: var(--igom-font-size-md); }
h6 { font-size: var(--igom-font-size-sm); text-transform: uppercase; letter-spacing: 0.04em; }

p {
    margin: 0 0 var(--igom-space-4);
}

a {
    color: var(--igom-link);
    text-decoration: none;
    transition: color var(--igom-trans);
}
a:hover { color: var(--igom-link-hover); }

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

::selection {
    background: var(--igom-brand-200);
    color: var(--igom-grey-900);
}

/* =========================================================
   3. LAYOUT UTILITIES
   ========================================================= */

.igom-container,
.igom-container-md,
.igom-container-sm {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--igom-space-4);
    padding-right: var(--igom-space-4);
}
.igom-container     { max-width: var(--igom-container); }
.igom-container-md  { max-width: var(--igom-container-md); }
.igom-container-sm  { max-width: var(--igom-container-sm); }

.igom-section { padding: var(--igom-space-12) 0; }
.igom-section--tight { padding: var(--igom-space-6) 0; }

.igom-grid {
    display: grid;
    gap: var(--igom-space-4);
}
.igom-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.igom-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.igom-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.igom-grid--6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.igom-flex {
    display: flex;
    gap: var(--igom-space-3);
    align-items: center;
}
.igom-flex--between { justify-content: space-between; }
.igom-flex--col     { flex-direction: column; align-items: stretch; }

.igom-stack > * + * { margin-top: var(--igom-space-4); }

.igom-text-soft  { color: var(--igom-text-soft); }
.igom-text-muted { color: var(--igom-text-muted); }
.igom-text-small { font-size: var(--igom-font-size-sm); }
.igom-text-xs    { font-size: var(--igom-font-size-xs); }

.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;
}

/* =========================================================
   4. BUTTONS & CTAs
   ========================================================= */

.igom-btn,
.igom-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--igom-space-2);
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--igom-font-size-sm);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--igom-radius);
    border: 1px solid var(--igom-border);
    background: var(--igom-surface);
    color: var(--igom-text);
    cursor: pointer;
    transition: all var(--igom-trans);
    text-decoration: none;
    white-space: nowrap;
}
.igom-btn:hover,
.igom-cta:hover {
    border-color: var(--igom-border-strong);
    background: var(--igom-bg-soft);
}

.igom-btn--primary,
.igom-cta--primary {
    background: var(--igom-brand-600);
    border-color: var(--igom-brand-600);
    color: var(--igom-text-inverse);
}
.igom-btn--primary:hover,
.igom-cta--primary:hover {
    background: var(--igom-brand-700);
    border-color: var(--igom-brand-700);
    color: var(--igom-text-inverse);
}

.igom-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--igom-text-soft);
}
.igom-btn--ghost:hover {
    color: var(--igom-text);
    background: var(--igom-bg-soft);
}

.igom-btn--sm { padding: 6px 12px; font-size: var(--igom-font-size-xs); }
.igom-btn--lg { padding: 14px 22px; font-size: var(--igom-font-size-md); }

.igom-cta--whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #FFFFFF;
}
.igom-cta--whatsapp:hover { background: #1FB559; border-color: #1FB559; color: #FFFFFF; }

.igom-cta--phone {
    background: var(--igom-brand-600);
    border-color: var(--igom-brand-600);
    color: var(--igom-text-inverse);
}

/* =========================================================
   5. CARDS
   ========================================================= */

.igom-card {
    background: var(--igom-surface);
    border: 1px solid var(--igom-border);
    border-radius: var(--igom-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--igom-trans), transform var(--igom-trans);
    display: flex;
    flex-direction: column;
}
.igom-card:hover {
    box-shadow: var(--igom-shadow);
    transform: translateY(-2px);
}

.igom-card__media {
    aspect-ratio: 16 / 10;
    background: var(--igom-bg-muted);
    overflow: hidden;
    position: relative;
}
.igom-card__media img {
    width: 100%; height: 100%; object-fit: cover;
}

.igom-card__body {
    padding: var(--igom-space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--igom-space-2);
}

.igom-card__title {
    font-size: var(--igom-font-size-md);
    margin: 0;
    font-weight: 600;
}
.igom-card__title a {
    color: var(--igom-grey-900);
}
.igom-card__title a:hover { color: var(--igom-brand-600); }

.igom-card__meta {
    font-size: var(--igom-font-size-xs);
    color: var(--igom-text-muted);
}

.igom-card__rating {
    font-size: var(--igom-font-size-xs);
    color: var(--igom-gold-500);
}

/* Therapist card */
.igom-therapist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--igom-space-3);
}
.igom-therapist-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: var(--igom-space-3);
    border: 1px solid var(--igom-border);
    border-radius: var(--igom-radius);
    transition: border-color var(--igom-trans), background var(--igom-trans);
}
.igom-therapist-card:hover {
    border-color: var(--igom-brand-600);
    background: var(--igom-brand-50);
}
.igom-therapist-card__media {
    width: 64px; height: 64px;
    margin: 0 auto var(--igom-space-2);
    border-radius: 50%;
    overflow: hidden;
    background: var(--igom-bg-muted);
}
.igom-therapist-card__media img {
    width: 100%; height: 100%; object-fit: cover;
}
.igom-therapist-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--igom-brand-100);
    color: var(--igom-brand-700);
    font-weight: 600;
    font-size: 22px;
}
.igom-therapist-card__name {
    font-size: var(--igom-font-size-sm);
    font-weight: 500;
}
.igom-therapist-card__meta {
    font-size: var(--igom-font-size-xs);
    color: var(--igom-text-muted);
}

/* =========================================================
   6. VERIFICATION BADGE
   ========================================================= */

.igom-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--igom-radius-pill);
    background: var(--igom-brand-50);
    color: var(--igom-brand-700);
    font-size: var(--igom-font-size-xs);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--igom-brand-200);
    white-space: nowrap;
}
.igom-verified__icon { color: var(--igom-brand-600); flex-shrink: 0; }

.igom-verified--sm { font-size: 11px; padding: 1px 6px; }
.igom-verified--lg { font-size: var(--igom-font-size-sm); padding: 4px 12px; }
.igom-verified--lg .igom-verified__icon { width: 16px; height: 16px; }

/* =========================================================
   7. PRICING DISPLAY
   ========================================================= */

.igom-price-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--igom-space-2);
}
.igom-price-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--igom-font-size-xs);
}
.igom-price-row__label { color: var(--igom-text-soft); }
.igom-price-row__value { color: var(--igom-brand-700); font-weight: 600; }

.igom-pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--igom-space-4) 0;
    font-size: var(--igom-font-size-sm);
}
.igom-pricing-table th,
.igom-pricing-table td {
    padding: var(--igom-space-3) var(--igom-space-4);
    text-align: left;
    border-bottom: 1px solid var(--igom-border);
}
.igom-pricing-table th {
    background: var(--igom-bg-soft);
    font-weight: 500;
    color: var(--igom-text-soft);
}
.igom-pricing-table__value {
    color: var(--igom-brand-700);
    font-weight: 600;
    text-align: right !important;
}

/* =========================================================
   8. FORMS & SEARCH
   ========================================================= */

.igom-input,
.igom-select,
.igom-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--igom-font-size-sm);
    color: var(--igom-text);
    background: var(--igom-surface);
    border: 1px solid var(--igom-border);
    border-radius: var(--igom-radius);
    transition: border-color var(--igom-trans), box-shadow var(--igom-trans);
}
.igom-input:focus,
.igom-select:focus,
.igom-textarea:focus {
    outline: none;
    border-color: var(--igom-brand-500);
    box-shadow: 0 0 0 3px var(--igom-brand-100);
}

.igom-search-bar {
    display: flex;
    gap: var(--igom-space-2);
    background: var(--igom-surface);
    border: 1px solid var(--igom-border);
    border-radius: var(--igom-radius-lg);
    padding: var(--igom-space-2);
    box-shadow: var(--igom-shadow);
}
.igom-search-bar .igom-input {
    border: none;
    box-shadow: none;
    flex: 1;
}
.igom-search-bar__divider {
    width: 1px;
    background: var(--igom-border);
    margin: var(--igom-space-2) 0;
}

/* =========================================================
   9. HERO & SECTIONS
   ========================================================= */

.igom-hero {
    background: linear-gradient(135deg, var(--igom-brand-50) 0%, var(--igom-brand-100) 100%);
    padding: var(--igom-space-12) var(--igom-space-4);
    border-radius: var(--igom-radius-xl);
    text-align: center;
}
.igom-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--igom-space-1);
    background: var(--igom-surface);
    padding: 4px 12px;
    border-radius: var(--igom-radius-pill);
    font-size: var(--igom-font-size-xs);
    color: var(--igom-brand-700);
    font-weight: 500;
    margin-bottom: var(--igom-space-3);
}
.igom-hero h1 {
    color: var(--igom-brand-900);
    margin-bottom: var(--igom-space-2);
}
.igom-hero__sub {
    color: var(--igom-brand-800);
    font-size: var(--igom-font-size-md);
}

/* =========================================================
   10. FILTER BARS
   ========================================================= */

.igom-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--igom-space-2);
    padding: var(--igom-space-3) 0;
    border-bottom: 1px solid var(--igom-border);
    margin-bottom: var(--igom-space-6);
}
.igom-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--igom-radius-pill);
    background: var(--igom-bg-soft);
    border: 1px solid transparent;
    font-size: var(--igom-font-size-xs);
    color: var(--igom-text-soft);
    cursor: pointer;
    transition: all var(--igom-trans);
}
.igom-filter-chip:hover,
.igom-filter-chip[aria-pressed="true"] {
    background: var(--igom-brand-50);
    border-color: var(--igom-brand-200);
    color: var(--igom-brand-700);
}

/* =========================================================
   11. REVIEWS
   ========================================================= */

.igom-review {
    padding: var(--igom-space-4);
    border-bottom: 1px solid var(--igom-border);
}
.igom-review__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--igom-space-2);
}
.igom-review__author {
    font-weight: 500;
    color: var(--igom-text);
}
.igom-review__rating {
    color: var(--igom-gold-500);
    font-size: var(--igom-font-size-xs);
}
.igom-review__verified {
    font-size: 11px;
    color: var(--igom-brand-700);
}
.igom-review__body {
    color: var(--igom-text-soft);
    font-size: var(--igom-font-size-sm);
}

/* =========================================================
   12. MOBILE STICKY CTA (for listing pages)
   ========================================================= */

.igom-sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    .igom-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        padding: var(--igom-space-3) var(--igom-space-4);
        gap: var(--igom-space-2);
        background: var(--igom-surface);
        border-top: 1px solid var(--igom-border);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
        z-index: 100;
    }
    .igom-sticky-cta > * { flex: 1; }
    body.single-hp_listing { padding-bottom: 70px; }
}

/* =========================================================
   13. EMPTY STATES
   ========================================================= */

.igom-empty {
    padding: var(--igom-space-8);
    text-align: center;
    color: var(--igom-text-muted);
    font-size: var(--igom-font-size-sm);
    background: var(--igom-bg-soft);
    border-radius: var(--igom-radius);
}

/* =========================================================
   14. PRINT STYLES
   ========================================================= */

@media print {
    .igom-sticky-cta,
    .igom-filter-bar,
    nav, footer, .elementor-button { display: none !important; }
    body { color: #000; background: #fff; }
}

/* =========================================================
   ADMIN-AREA HELPERS (for importer table)
   ========================================================= */

.igom-good { color: var(--igom-brand-700); font-weight: 500; }
.igom-warn { color: var(--igom-warn-500); font-weight: 500; }