/*
 * WebToTell experimental "test" theme — v2
 *
 * Goal:
 * - stay structurally very close to the default theme
 * - preserve the teal / midnight palette from the first experiment
 * - inherit all current default component and page rules
 */

@import url("/themes/default/css/app.css");


/* ==========================================================================
   1. Palette
   ========================================================================== */

:root {
    --color-page: #eef4f6;
    --color-surface: #ffffff;
    --color-surface-soft: #f3f8f9;

    --color-text: #263746;
    --color-text-muted: #667784;
    --color-heading: #173141;

    --color-border: #d7e3e7;
    --color-border-warm: #c5d8dc;

    --color-accent: #087f8c;
    --color-accent-hover: #066a75;
    --color-highlight: #73d2de;
    --color-focus: #1597a5;

    --shadow-small:
        0 2px 8px rgba(22, 49, 65, 0.05);

    --shadow-card:
        0 8px 22px rgba(22, 49, 65, 0.07);

    --shadow-raised:
        0 14px 34px rgba(22, 49, 65, 0.12);
}


/* ==========================================================================
   2. Page background
   ========================================================================== */

body.theme-test {
    background:
        linear-gradient(
            180deg,
            #f8fbfc 0,
            var(--color-page) 360px
        );
}


/* ==========================================================================
   3. Header
   ========================================================================== */

/*
 * Keep the original default-theme header layout.
 * Only change its visual treatment.
 */

.theme-test .site-header {
    background:
        linear-gradient(
            120deg,
            #101b2d 0%,
            #17344a 62%,
            #0c5961 100%
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 5px 18px rgba(14, 35, 49, 0.15);
}

.theme-test .brand__logo {
    filter:
        drop-shadow(
            0 3px 8px rgba(0, 0, 0, 0.13)
        );
}

.theme-test .main-nav a,
.theme-test .header-actions > a:not(.button) {
    color: #e3eef2;
}

.theme-test .main-nav a:hover,
.theme-test .header-actions > a:not(.button):hover {
    color: #ffffff;
}

.theme-test .main-nav a {
    border-radius: var(--radius-small);
}

.theme-test .main-nav a:hover {
    background:
        rgba(115, 210, 222, 0.11);
}

.theme-test .header-actions .button {
    border-color: #73d2de;
    background: #73d2de;
    color: #102c36;
}

.theme-test .header-actions .button:hover {
    border-color: #9be2e9;
    background: #9be2e9;
    color: #102c36;
}


/* ==========================================================================
   4. Typography
   ========================================================================== */

/*
 * Keep the default font stack and sizing.
 * Only tint headings slightly toward the new palette.
 */

.theme-test h1,
.theme-test h2,
.theme-test h3,
.theme-test h4 {
    color: var(--color-heading);
}

.theme-test .eyebrow {
    color: var(--color-accent);
}


/* ==========================================================================
   5. Cards and surfaces
   ========================================================================== */

.theme-test .card {
    border-color:
        rgba(117, 151, 164, 0.26);

    box-shadow: var(--shadow-card);
}

.theme-test .hero {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdfd 62%,
            #edf7f8 100%
        );

    border-color:
        rgba(8, 127, 140, 0.17);
}

.theme-test .hero__lead {
    color: #5e7180;
}


/* ==========================================================================
   6. Buttons and links
   ========================================================================== */

.theme-test .button {
    border-color: var(--color-accent);
    background: var(--color-accent);
}

.theme-test .button:hover {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
}

.theme-test .button--secondary {
    border-color: #b9cdd4;
    background: #ffffff;
    color: #31505e;
}

.theme-test .button--secondary:hover {
    border-color: #8cb4bd;
    background: #f3f8f9;
    color: #173b49;
}


/* ==========================================================================
   7. Sidebar widgets
   ========================================================================== */

/*
 * Keep default widget dimensions and layout.
 * Give them a cooler, slightly cleaner surface.
 */

.theme-test .sidebar-card {
    border-color:
        rgba(111, 151, 165, 0.28);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fafb 100%
        );

    box-shadow: var(--shadow-small);
}

.theme-test .sidebar-card h2 {
    color: #214554;
}

.theme-test .link-list a:hover {
    background:
        rgba(8, 127, 140, 0.055);
}


/* ==========================================================================
   8. Book/catalog treatment
   ========================================================================== */

.theme-test .book-cover {
    border-color: #c7d9df;

    background:
        linear-gradient(
            145deg,
            #edf4f6,
            #dce9ed
        );
}

.theme-test .catalog-card {
    border-color:
        rgba(117, 151, 164, 0.25);
}

.theme-test .catalog-card__body h2 {
    color: #173b49;
}


/* ==========================================================================
   9. Forms
   ========================================================================== */

.theme-test input,
.theme-test textarea,
.theme-test select {
    border-color: #c8d8de;
}

.theme-test input:focus,
.theme-test textarea:focus,
.theme-test select:focus {
    border-color: var(--color-accent);
    box-shadow:
        0 0 0 3px rgba(8, 127, 140, 0.11);
}


/* ==========================================================================
   10. Footer
   ========================================================================== */

.theme-test .site-footer {
    border-top-color:
        rgba(99, 135, 151, 0.23);

    background: #e4eef1;
    color: #5b6f7b;
}


/* ==========================================================================
   11. Small-screen refinement
   ========================================================================== */

@media (max-width: 900px) {
    .theme-test .site-header {
        background:
            linear-gradient(
                145deg,
                #101b2d,
                #173f50
            );
    }
}

/* ==========================================================================
   12. Page-heading breathing room
   ========================================================================== */

/*
 * Catalogue/index heading cards need inner spacing.
 * Without this, the eyebrow and H1 sit directly against the card edge.
 */
.theme-test .catalog-heading {
    padding:
        clamp(1.35rem, 2.4vw, 2rem)
        clamp(1.35rem, 2.6vw, 2.25rem);
}

.theme-test .catalog-heading > :first-child {
    margin-top: 0;
}

.theme-test .catalog-heading > :last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .theme-test .catalog-heading {
        padding: 1.2rem 1.25rem;
    }
}