/*
 * public/css/kvuc-home.css
 * Home page sections: countdown, Principal, FAQ and safety strip. Loaded after kvuc-site.css on the home page.
 * Edit here; the version in the address updates by itself (App\Support\Assets).
 */


/* ==========================================================================
   home/partials/countdown.blade.php
   ========================================================================== */

.kvuc-countdown-band { padding: 1.5rem 0 0; }

.kvuc-countdown {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 95% 0%, rgba(198, 90, 46, .35), transparent 45%),
        linear-gradient(120deg, #2c3616, #3d4a1f);
    background-color: #2c3616; /* what contrast checkers measure against */
    color: #fff;
}

@media (min-width: 992px) {
    .kvuc-countdown { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2rem; }
}

.kvuc-countdown-eyebrow { color: #e2c9a4; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.kvuc-countdown-title { margin: .35rem 0 .25rem; color: #fff; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; }
.kvuc-countdown-when { margin: 0; color: rgba(255, 255, 255, .78); font-size: .92rem; }

.kvuc-countdown-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }

.kvuc-countdown-unit {
    min-width: 4.4rem;
    padding: .7rem .5rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .08);
    text-align: center;
}

.kvuc-countdown-value { display: block; color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kvuc-countdown-label { color: rgba(255, 255, 255, .7); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.kvuc-countdown-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    background: #a84320; /* darker Kerio Earth: white text 6:1 */
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.kvuc-countdown-link:hover, .kvuc-countdown-link:focus-visible { background: #8c3719; color: #fff; }
.kvuc-countdown-link:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }


/* ==========================================================================
   home/partials/principal.blade.php
   ========================================================================== */

.kvuc-principal { padding: 0 0 clamp(3rem, 6vw, 5rem); }

.kvuc-principal-card {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #ece4d6;
    border-radius: 1.75rem;
    background: linear-gradient(120deg, #faf7f0 0%, #ffffff 60%);
    box-shadow: 0 1.25rem 3rem rgba(44, 54, 22, .08);
}

@media (min-width: 768px) {
    .kvuc-principal-card { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.kvuc-principal-photo { position: relative; min-height: 260px; background: #3d4a1f; }

.kvuc-principal-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.kvuc-principal-copy { padding: clamp(1.75rem, 4vw, 3rem); }

.kvuc-principal-title {
    margin: .8rem 0 1rem;
    color: #2c3616;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
}

.kvuc-principal-text { color: #4b5142; font-size: 1.05rem; line-height: 1.75; }

.kvuc-principal-name {
    display: flex;
    flex-direction: column;
    margin: 1.25rem 0 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid #c65a2e;
}

.kvuc-principal-name strong { color: #2c3616; }
.kvuc-principal-name span { color: #5b6150; font-size: .92rem; }


/* ==========================================================================
   home/partials/faq.blade.php
   ========================================================================== */

.kvuc-faq { display: flex; flex-direction: column; gap: .75rem; }

.kvuc-faq-item {
    border: 1px solid #ece4d6;
    border-radius: 1rem;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.kvuc-faq-item[open] { border-color: #d2b48c; box-shadow: 0 .75rem 1.75rem rgba(44, 54, 22, .07); }

.kvuc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    color: #2c3616;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.kvuc-faq-item summary::-webkit-details-marker { display: none; }

.kvuc-faq-item summary i {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #faf3e8;
    color: #a84320;
    transition: transform .2s ease;
}

.kvuc-faq-item[open] summary i { transform: rotate(45deg); }
.kvuc-faq-item summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; border-radius: 1rem; }
.kvuc-faq-answer { padding: 0 1.35rem 1.25rem; color: #4b5142; line-height: 1.75; }


/* ==========================================================================
   home/partials/safety-strip.blade.php
   ========================================================================== */

.kvuc-safety { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }

.kvuc-safety-inner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 1.5rem;
    /* Ends no lighter than #b8502a so white text keeps 4.5:1; the solid
       colour is what contrast checkers measure against. */
    background: linear-gradient(120deg, #a84320, #b8502a);
    background-color: #a84320;
    color: #fff;
}

@media (min-width: 992px) {
    .kvuc-safety-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.75rem; }
}

.kvuc-safety-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .16);
    font-size: 1.6rem;
}

.kvuc-safety-title { margin: 0 0 .35rem; color: #fff; font-size: 1.25rem; font-weight: 800; }
.kvuc-safety-copy p { color: rgba(255, 255, 255, .92); }
.kvuc-safety-actions { display: flex; flex-wrap: wrap; gap: .6rem; }