/*
 * modern-polish.css
 * ------------------------------------------------------------------
 * Additive, low-risk visual refinements for the homepage and the
 * products/price-list pages: fluid spacing, refined typography,
 * softer color/shadow treatment, and a couple of tablet-breakpoint
 * fixes that the original desktop-first CSS skipped.
 *
 * This file is loaded last on purpose so it can safely override
 * matching selectors without needing !important. It does not
 * remove or rewrite any existing rule.
 * ------------------------------------------------------------------
 */

/* -----------------------------------------------------------------
 * 1) Fluid section rhythm
 * The theme uses a fixed "section { padding: 90px 0; }" on every
 * breakpoint, which wastes screen space and forces extra scrolling
 * on phones. clamp() keeps the desktop spacing but scales it down
 * smoothly on smaller screens.
 * ----------------------------------------------------------------- */
section {
    padding-top: clamp(40px, 6vw, 90px);
    padding-bottom: clamp(40px, 6vw, 90px);
}

.spacer-single { height: clamp(20px, 4vw, 40px); }
.spacer-double { height: clamp(30px, 6vw, 80px); }

/* -----------------------------------------------------------------
 * 2) Typography polish
 * Slightly tighter, fluid heading sizes + more readable line-height
 * for body copy (About / quote sections are long Persian paragraphs).
 * ----------------------------------------------------------------- */
h1, .h1_big {
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
    margin-bottom: 0.5em;
}

h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); }

p, .lead {
    line-height: 1.9;
}

blockquote.q-big {
    line-height: 2;
}

/* -----------------------------------------------------------------
 * 3) Buttons — soften the flat/sharp default look
 * ----------------------------------------------------------------- */
a.btn-main,
.btn-main,
input[type="button"].btn-main {
    padding: 12px 32px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb, 207, 31, 31), 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

a.btn-main:hover,
.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--primary-color-rgb, 207, 31, 31), 0.35);
}

a.btn-line {
    border-radius: 10px;
}

/* -----------------------------------------------------------------
 * 4) Price table (home + products pages) — a bit more breathing
 * room, rounded container, clearer row separation on hover.
 * ----------------------------------------------------------------- */
.table-responsive {
    border-radius: 16px;
    overflow: hidden;
}

.price-table th {
    font-size: 0.8rem;
    padding-top: 16px;
    padding-bottom: 16px;
}

.price-table tbody tr {
    transition: background-color 0.15s ease;
}

.price-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.price-table td {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------
 * 5) Stats / "fun facts" counters — the original grid only breaks
 * to full-width columns below 768px, which leaves an awkward 4-up
 * row on small tablets (768–991px). Give it a 2x2 layout there.
 * ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    #section-fun-facts .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }
}

@media (max-width: 575.98px) {
    #section-fun-facts .de_count h3.timer {
        font-size: 2.2rem;
    }
}

/* -----------------------------------------------------------------
 * 6) Blog carousel cards — subtle depth + consistent spacing so the
 * cards feel less flat next to the modernized buttons/table above.
 * ----------------------------------------------------------------- */
.bloglist .post-content {
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bloglist .post-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.bloglist .post-text {
    padding-top: 18px;
}

/* -----------------------------------------------------------------
 * 7) Contact form inputs — rounder, more consistent focus state.
 * ----------------------------------------------------------------- */
#section-contact .field-set input,
#section-contact .field-set textarea {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#section-contact .field-set input:focus,
#section-contact .field-set textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 207, 31, 31), 0.18);
}

/* -----------------------------------------------------------------
 * 8) Products page — category tree & sidebar spacing on tablets.
 * The sidebar already stacks below the table under 768px; between
 * 768–991px it was still full desktop width, which cramped the
 * price table. Give the table a little more room on that range.
 * ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .products-category-tree li a {
        padding: 0.65rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* -----------------------------------------------------------------
 * 9) Small-screen container gutters — a touch tighter so text
 * doesn't feel cramped against the viewport edge on narrow phones.
 * ----------------------------------------------------------------- */
@media (max-width: 480px) {
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    h2 {
        margin-bottom: 0.35em;
    }
}