/* ===== TADIRAN PRODUCT CATALOG - CSS ===== */

/* ===== ROOT VARIABLES ===== */
:root {
    /* --- Colors --- */
    --clr-primary:    #0097d1;
    --clr-primary-dk: #007baa;
    --clr-dark:       #1a1a1a;
    --clr-gray:       #6c757d;
    --clr-light:      #f5f5f5;
    --clr-white:      #ffffff;
    --clr-cool:       #2196F3;
    --clr-heat:       #ff9800;

    /* --- Font Family --- */
    --ff-base: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Tahoma, sans-serif;

    /* --- Font Sizes (responsive calc, +4pt rispetto versione precedente) --- */
    --fs-h1:    calc(28px + 1.4vw);
    --fs-h2:    calc(24px + 1.0vw);
    --fs-h3:    calc(20px + 0.7vw);
    --fs-h4:    calc(18px + 0.5vw);
    --fs-h5:    calc(16px + 0.35vw);
    --fs-h6:    calc(14px + 0.25vw);
    --fs-base:  calc(17px + 0.15vw);
    --fs-small: calc(15px + 0.1vw);
    --fs-xs:    calc(14px + 0.08vw);

    /* Classi specifiche */
    --fs-header-title:  calc(20px + 0.6vw);
    --fs-header-sub:    calc(14px + 0.15vw);
    --fs-idx-title:     calc(22px + 0.9vw);
    --fs-ipc-name:      calc(18px + 0.55vw);
    --fs-ipc-model:     calc(14px + 0.12vw);
    --fs-ipc-row:       calc(15px + 0.12vw);
    --fs-pp-name:       calc(26px + 1.2vw);
    --fs-pp-section:    calc(17px + 0.4vw);
    --fs-feat-label:    calc(10px + 0.15vw);
    --fs-spec-code:     calc(16px + 0.2vw);
    --fs-spec-sum:      calc(14px + 0.1vw);
    --fs-table:         calc(14px + 0.12vw);
    --fs-table-head:    calc(12px + 0.1vw);
    --fs-btn:           calc(16px + 0.2vw);
    --fs-badge:         calc(14px + 0.15vw);
    --fs-elabel:        calc(13px + 0.08vw);
    --fs-footer:        calc(13px + 0.08vw);
    --fs-kw-icon:       calc(18px + 0.2vw);
    --fs-back-link:     calc(15px + 0.1vw);

    /* --- Font Weights --- */
    --fw-h1: 900;
    --fw-h2: 800;
    --fw-h3: 800;
    --fw-h4: 700;
    --fw-h5: 700;
    --fw-h6: 700;
    --fw-base: 400;
    --fw-bold: 700;
    --fw-header-title: 800;
    --fw-idx-title: 800;
    --fw-ipc-name: 800;
    --fw-ipc-model: 600;
    --fw-pp-name: 900;
    --fw-pp-section: 800;
    --fw-feat-label: 700;
    --fw-spec-code: 800;
    --fw-btn: 600;
    --fw-badge: 600;
    --fw-elabel: 800;
}


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

body {
    font-family: var(--ff-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-base);
    color: var(--clr-dark);
    background-color: var(--clr-light);
    background-image: url('../images/bg-tadiran.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main { flex: 1; }


/* ===== HEADING TAGS ===== */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: 1.15; margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: 1.2;  margin: 0; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: 1.25; margin: 0; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: 1.3;  margin: 0; }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: 1.35; margin: 0; }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: 1.4;  margin: 0; }


/* ================================================
   HEADER & FOOTER (sticky)
   ================================================ */
.site-header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-logo { height: 36px; }

.header-title {
    font-size: var(--fs-header-title);
    font-weight: var(--fw-header-title);
    color: var(--clr-dark);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle {
    font-size: var(--fs-header-sub);
    font-weight: var(--fw-base);
    color: var(--clr-gray);
    margin: 0;
}

.back-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--clr-primary);
    font-size: var(--fs-back-link);
    font-weight: var(--fw-bold);
}
.back-link:hover { color: var(--clr-primary-dk); }

.site-footer {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    padding: 12px 0;
    text-align: center;
    font-size: var(--fs-footer);
    color: var(--clr-gray);
    position: sticky;
    bottom: 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}


/* ================================================
   INDEX PAGE
   ================================================ */
.idx-title {
    font-size: var(--fs-idx-title);
    font-weight: var(--fw-idx-title);
    color: var(--clr-dark);
    margin-bottom: 20px;
}

/* --- Index Grid (2 colonne desktop, 1 mobile) --- */
.idx-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 768px) {
    .idx-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Index Product Card (vertical: immagine grande sopra) --- */
.ipc {
    display: block;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    box-shadow: 0 3px 16px rgba(0,0,0,0.35);
    border: 1px solid rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: all 0.25s;
}
.ipc:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,151,209,0.15);
    border-color: var(--clr-primary);
    color: inherit;
    text-decoration: none;
}

.ipc-img-large {
    background: linear-gradient(135deg, #f4f6f9, #e9ecf0);
    text-align: center;
    padding: 24px 20px;
}
.ipc-img-large img {
    max-width: 80%;
    max-height: 160px;
    object-fit: contain;
}

.ipc-body { padding: 16px 20px 20px; }

.ipc-name {
    font-size: var(--fs-ipc-name);
    font-weight: var(--fw-ipc-name);
    color: var(--clr-dark);
    line-height: 1.2;
    margin-bottom: 4px;
}

.ipc-model {
    color: var(--clr-primary);
    font-weight: var(--fw-ipc-model);
    font-family: monospace;
    font-size: var(--fs-ipc-model);
    margin-bottom: 8px;
}

.ipc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-ipc-row);
}
.ipc-kw { white-space: nowrap; }
.kw-cool, .kw-heat { font-size: var(--fs-kw-icon); }

/* --- EU Energy Labels (freccia colorata) --- */
.elabel {
    display: inline-block;
    font-size: var(--fs-elabel);
    font-weight: var(--fw-elabel);
    color: var(--clr-white);
    padding: 2px 9px;
    line-height: 1.4;
    border-radius: 3px;
    position: relative;
}
.elabel::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 0;
    border-left: 9px solid currentColor;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.el-appp { background: #009640; }
.el-appp::after { border-left-color: #009640; }
.el-app { background: #50b848; }
.el-app::after { border-left-color: #50b848; }
.el-a1p { background: #c8d400; color: #333; }
.el-a1p::after { border-left-color: #c8d400; }
.el-a { background: #ffd700; color: #333; }
.el-a::after { border-left-color: #ffd700; }


/* ================================================
   PRODUCT PAGE
   ================================================ */
.pp-hero {
    background: linear-gradient(180deg, #f0f4f8, #e4e9ee);
    text-align: center;
    padding: 30px 20px;
}
.pp-hero-img {
    max-width: 85%;
    max-height: 220px;
    object-fit: contain;
}

/* --- Product Page Content Box --- */
.pp-content-box {
    background: #eaedf0;
    border-radius: 16px;
    padding: 20px 16px;
    margin: 16px 0;
}

.pp-name-section { padding: 20px 0 10px; }
.pp-name {
    font-size: var(--fs-pp-name);
    font-weight: var(--fw-pp-name);
    color: var(--clr-dark);
}

.pp-badge {
    display: inline-block;
    font-size: var(--fs-badge);
    font-weight: var(--fw-badge);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1.5px solid #ddd;
    color: var(--clr-dark);
    background: var(--clr-white);
}

/* --- Features box (sfondo bianco, angoli arrotondati) --- */
.pp-features-box {
    background: var(--clr-white);
    border-radius: 16px;
    padding: 20px 12px;
    margin: 16px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.feat-item { text-align: center; padding: 8px 2px; }
.feat-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feat-svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.feat-bs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0,151,209,0.08);
    color: var(--clr-primary);
    font-size: 1.3rem;
}
.feat-label {
    font-size: var(--fs-feat-label);
    font-weight: var(--fw-feat-label);
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1.15;
    margin: 0;
}

.pp-sep {
    border: none;
    height: 1px;
    background: #e0e0e0;
    margin: 10px 0;
}

/* --- Specifiche Modelli --- */
.pp-specs-section { padding: 8px 0; }
.pp-section-title {
    font-size: var(--fs-pp-section);
    font-weight: var(--fw-pp-section);
    color: var(--clr-dark);
    margin-bottom: 14px;
}

.spec-card { border-bottom: 1px solid #eee; }
.spec-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    user-select: none;
}
.spec-code {
    font-weight: var(--fw-spec-code);
    font-size: var(--fs-spec-code);
    color: var(--clr-dark);
    margin: 0;
}
.spec-sum {
    font-size: var(--fs-spec-sum);
    color: var(--clr-gray);
    margin: 3px 0 0;
}
.spec-kw-icon { height: 16px; vertical-align: middle; }
.spec-toggle-text {
    font-size: var(--fs-spec-sum);
    color: var(--clr-gray);
    white-space: nowrap;
}
.spec-chev {
    transition: transform 0.3s;
    font-size: 0.9rem;
    margin-left: 4px;
}
.spec-hdr[aria-expanded="true"] .spec-chev {
    transform: rotate(180deg);
}

/* Spec table */
.stbl {
    width: 100%;
    font-size: var(--fs-table);
    margin: 0;
    border-collapse: collapse;
}
.stbl thead th {
    background: var(--clr-primary);
    color: var(--clr-white);
    font-weight: var(--fw-bold);
    font-size: var(--fs-table-head);
    text-transform: uppercase;
    padding: 8px 10px;
    border: none;
}
.stbl tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle;
}
.stbl tbody tr:nth-child(even) { background: #fafbfc; }
.stbl .sl { font-weight: var(--fw-bold); color: #333; width: 38%; }
.stbl .su { color: var(--clr-gray); width: 14%; }


/* --- Actions / Download --- */
.pp-actions {
    padding: 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: var(--fw-btn);
    font-size: var(--fs-btn);
    text-decoration: none;
    transition: all 0.2s;
    width: 100%;
    cursor: pointer;
}

/* Primary: sfondo blu, testo bianco */
.pp-btn-primary {
    background: var(--clr-primary);
    color: var(--clr-white);
    border: 2px solid var(--clr-primary);
}
.pp-btn-primary:hover {
    background: var(--clr-primary-dk);
    border-color: var(--clr-primary-dk);
    color: var(--clr-white);
}

/* Outline */
.pp-btn-outline {
    border: 2px solid var(--clr-primary);
    background: var(--clr-white);
    color: var(--clr-primary);
}
.pp-btn-outline:hover {
    background: var(--clr-primary);
    color: var(--clr-white);
}


/* --- PDF Modal (PDF.js) --- */
.pdf-container {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 56px);
    background: #525659;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.pdf-page-canvas {
    display: block;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.pdf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 56px);
    background: #525659;
}
#pdfModal .modal-header {
    background: var(--clr-white);
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 16px;
}
#pdfModal .modal-title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-bold);
}
#pdfModal .modal-body {
    background: #525659;
    padding: 0;
}


/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 580px) {
    .ipc-img-large img { max-height: 120px; }
    .feat-icon-wrap { width: 42px; height: 42px; }
    .feat-svg { width: 36px; height: 36px; }
    .header-logo { height: 30px; }
}