/*
Theme Name:        ICONIC FITNESS v3
Theme URI:         https://iconicfitness.hu
Description:       ICONIC FITNESS Child Theme v3 – Hello Elementor alapon. Industrial High-Contrast Editorial design rendszer: Outfit + Work Sans + Permanent Marker betűtípusok, Material Design 3 sötét színpaletta, 0px border-radius elvek.
Author:            BBMedia
Author URI:        https://bbmedia.hu
Template:          hello-elementor
Version:           3.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GPL-2.0-or-later
Text Domain:       iconic-fitness-v3
*/

/* =============================================================
   1. DESIGN TOKENS – CSS Custom Properties
   ============================================================= */
:root {
    /* --- Colours (MD3 Dark – unchanged) --- */
    --iconic-primary:              #ffb5a0;
    --iconic-primary-container:    #FF5722;
    --iconic-on-primary:           #5f1500;
    --iconic-on-primary-fixed:     #3b0900;
    --iconic-secondary:            #78dc77;
    --iconic-secondary-container:  #00761f;
    --iconic-on-secondary:         #00390a;
    --iconic-tertiary:             #c8c6c5;
    --iconic-tertiary-fixed:       #e5e2e1;
    --iconic-surface:              #131313;
    --iconic-surface-dim:          #131313;
    --iconic-surface-low:          #1c1b1b;
    --iconic-surface-container:    #201f1f;
    --iconic-surface-high:         #2a2a2a;
    --iconic-surface-highest:      #353534;
    --iconic-surface-bright:       #393939;
    --iconic-on-surface:           #e5e2e1;
    --iconic-on-surface-variant:   #e4beb4;
    --iconic-on-background:        #e5e2e1;
    --iconic-background:           #131313;
    --iconic-outline:              #ab8980;
    --iconic-outline-variant:      #5b4039;
    --iconic-error:                #ffb4ab;
    --iconic-error-container:      #93000a;

    /* --- Typography (v3: Outfit + Work Sans) --- */
    --font-display:  'Outfit', 'Space Grotesk', sans-serif;
    --font-body:     'Work Sans', sans-serif;
    --font-accent:   'Permanent Marker', cursive;

    /* --- Spacing --- */
    --section-padding-y: 128px;
    --container-max:     1280px;

    /* --- Transitions --- */
    --transition-fast:   0.2s ease;
    --transition-std:    0.3s ease;
    --transition-slow:   0.5s ease;
    --transition-xslow:  0.7s ease;

    /* --- Border radius (Industrial = 0) --- */
    --radius: 0px;
    --radius-sm: 2px;
    --radius-full: 9999px;

    /* --- Section marker --- */
    --marker-w: 3px;
    --marker-h: 40px;
}

/* =============================================================
   2. RESET / BASE
   ============================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--iconic-background);
    color: var(--iconic-on-background);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--iconic-primary-container);
    color: #000;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--iconic-primary-container);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--iconic-primary);
}

/* Minden border-radius nullázása – Industrial */
*,
input,
textarea,
select,
button {
    border-radius: var(--radius) !important;
}

.ic-radius-full {
    border-radius: var(--radius-full) !important;
}

/* =============================================================
   3. TYPOGRAPHY
   ============================================================= */

/* --- Section Headline (az új design kulcseleme) --- */
.section-headline,
.ic-section-headline {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
    line-height: 0.9 !important;
    color: var(--iconic-on-surface);
}

/* --- Section Marker (narancssárga bar cím előtt) --- */
.ic-marker-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ic-marker {
    display: inline-block;
    width: var(--marker-w);
    height: var(--marker-h);
    background: var(--iconic-primary-container);
    flex-shrink: 0;
}

/* --- Headings (default – display fontra váltva) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    color: var(--iconic-on-surface);
    line-height: 0.9;
    margin-top: 0;
}

h1 { font-size: clamp(56px, 10vw, 120px); }
h2 { font-size: clamp(40px, 7vw, 80px); }
h3 { font-size: clamp(24px, 3vw, 36px); }
h4 { font-size: 20px; }
h5, h6 { font-size: 16px; }

p {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(228, 190, 180, 0.85);
    margin-top: 0;
}

/* --- Utility classes --- */
.outfit-display {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
}

.permanent-marker {
    font-family: var(--font-accent) !important;
}

.work-sans {
    font-family: var(--font-body) !important;
}

.text-stroke {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
    color: transparent;
}

/* Skew accent elem */
.ic-skew {
    display: inline-block;
    transform: skewX(-12deg);
}

/* Wall mural texture */
.ic-mural {
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 40px 40px;
}

/* =============================================================
   4. COLOUR UTILITIES
   ============================================================= */
.text-primary            { color: var(--iconic-primary) !important; }
.text-primary-container  { color: var(--iconic-primary-container) !important; }
.text-secondary          { color: var(--iconic-secondary) !important; }
.text-on-surface         { color: var(--iconic-on-surface) !important; }
.text-on-surface-variant { color: var(--iconic-on-surface-variant) !important; }
.text-muted              { color: rgba(229, 226, 225, 0.5) !important; }

.bg-surface              { background-color: var(--iconic-surface) !important; }
.bg-surface-low          { background-color: var(--iconic-surface-low) !important; }
.bg-surface-container    { background-color: var(--iconic-surface-container) !important; }
.bg-surface-high         { background-color: var(--iconic-surface-high) !important; }
.bg-surface-highest      { background-color: var(--iconic-surface-highest) !important; }
.bg-primary-container    { background-color: var(--iconic-primary-container) !important; }

/* =============================================================
   5. BUTTONS
   ============================================================= */
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"] {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    transition: transform var(--transition-fast), background var(--transition-fast) !important;
}

/* Primary button */
.elementor-button.elementor-button-primary,
.ic-btn-primary {
    background-color: var(--iconic-primary-container) !important;
    color: #000000 !important;
    border: none !important;
}

.elementor-button.elementor-button-primary:hover,
.ic-btn-primary:hover {
    transform: skewX(-10deg);
}

/* Ghost button */
.ic-btn-ghost {
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.ic-btn-ghost:hover {
    transform: skewX(-10deg);
    border-color: var(--iconic-primary-container) !important;
    color: var(--iconic-primary-container) !important;
}

/* Badge / pill label */
.ic-badge {
    display: inline-block;
    background: var(--iconic-primary-container);
    color: #000;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 16px;
    transform: skewX(-12deg);
}

/* =============================================================
   6. NAVIGATION
   ============================================================= */
.elementor-nav-menu .elementor-item {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    font-size: 13px !important;
    color: var(--iconic-on-surface) !important;
    transition: color var(--transition-fast), transform var(--transition-fast) !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--iconic-primary-container) !important;
    transform: skewX(-10deg);
    display: inline-block;
}

.elementor-nav-menu .elementor-item.elementor-item-active {
    border-bottom: 2px solid var(--iconic-primary-container) !important;
    padding-bottom: 4px !important;
}

/* Header sáv – narancssárga alsó határ */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
    border-bottom: 4px solid var(--iconic-primary-container) !important;
    background: rgba(19, 19, 19, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* =============================================================
   7. ELEMENTOR OVERRIDES
   ============================================================= */

/* Alapértelmezett konténer háttér */
.elementor-section,
.e-con {
    background-color: var(--iconic-background);
}

/* Heading widget */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-style: italic !important;
    letter-spacing: -0.05em !important;
    text-transform: uppercase !important;
    color: var(--iconic-on-surface);
    line-height: 0.9;
}

/* Szöveg widget */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: var(--font-body);
    font-weight: 400;
    color: rgba(228, 190, 180, 0.85);
    line-height: 1.6;
}

/* Image widget */
.elementor-widget-image img {
    border-radius: 0 !important;
}

/* Widget margin reset */
.elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

/* =============================================================
   8. CARDS
   ============================================================= */

/* Program kártya – teljes kép + gradient overlay */
.ic-program-card {
    position: relative;
    overflow: hidden;
    height: 500px;
    cursor: pointer;
}

.ic-program-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-xslow);
}

.ic-program-card:hover img {
    transform: scale(1.1);
}

.ic-program-card .ic-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000 0%, transparent 60%);
    opacity: 0.85;
}

.ic-program-card .ic-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 32px;
}

/* Edzők kártya – grayscale → hover colour */
.ic-trainer-card-v3 {
    position: relative;
    cursor: pointer;
}

.ic-trainer-card-v3 .ic-photo-wrap {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    filter: grayscale(1);
    border-left: 8px solid transparent;
    transition: filter var(--transition-slow), border-color var(--transition-std);
}

.ic-trainer-card-v3:hover .ic-photo-wrap {
    filter: grayscale(0);
    border-left-color: var(--iconic-primary-container);
}

.ic-trainer-card-v3 .ic-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.ic-trainer-card-v3:hover .ic-photo-wrap img {
    transform: scale(1.05);
}

/* Filozofia kártya (bal border) */
.ic-pillar-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--iconic-surface-low);
    border-left: 4px solid var(--iconic-primary-container);
}

/* =============================================================
   9. STATS SECTION (teljes narancssárga háttér)
   ============================================================= */
.ic-stats-section {
    background: var(--iconic-primary-container) !important;
    position: relative;
    overflow: hidden;
}

.ic-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
}

.ic-stats-section .ic-stat {
    text-align: center;
    color: #000;
}

.ic-stats-section .ic-stat-number {
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(36px, 6vw, 56px);
    letter-spacing: -0.05em;
    line-height: 0.9;
    display: block;
}

.ic-stats-section .ic-stat-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-top: 8px;
}

/* =============================================================
   10. GLASS / SPECIAL EFFECTS
   ============================================================= */
.ic-glass {
    background: rgba(19, 19, 19, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ic-statue-mask {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Prism / tükör hatás az EST. badge-en */
.ic-est-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--iconic-primary-container);
    color: #000;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 20px;
    transform: skewX(-12deg);
}

/* Ambient glow (lebegő elemekhez) */
.ic-glow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* =============================================================
   11. MATERIAL SYMBOLS
   ============================================================= */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* =============================================================
   12. PRICING
   ============================================================= */
.ic-pricing-card {
    padding: 40px;
    background: var(--iconic-surface-low);
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-top: 8px solid transparent;
    transition: border-color var(--transition-std);
}

.ic-pricing-card:hover,
.ic-pricing-card.featured {
    border-top-color: var(--iconic-primary-container);
}

.ic-pricing-card.featured {
    background: var(--iconic-surface-high);
    box-shadow: 0 0 0 1px rgba(255,87,34,0.15);
}

/* =============================================================
   13. SCROLLBAR (webkit)
   ============================================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--iconic-surface); }
::-webkit-scrollbar-thumb { background: var(--iconic-primary-container); }
::-webkit-scrollbar-thumb:hover { background: var(--iconic-primary); }

/* =============================================================
   14. RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
    :root { --section-padding-y: 80px; }
}

@media (max-width: 768px) {
    :root { --section-padding-y: 56px; }

    h1 { font-size: clamp(44px, 14vw, 72px); }
    h2 { font-size: clamp(32px, 10vw, 56px); }

    .ic-program-card { height: 380px; }
}