/* Design five: canopy. Modern, sharp and professional, built around the shape of a stretch tent:
   a skyline of pointed tents with flag-topped poles and guy ropes along section edges, tent-shaped
   cards with a flag pole, and a string of bunting under the nav. A festival nod, with trade-show polish.
   Everything is scoped to body.theme-canopy. Delete this file and the chooser entry to retire it. */

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

body.theme-canopy {
    --ink: #211c1a;
    --canvas: #fdf6ec;
    --tint: #f6e8d6;
    --accent: #ff5e3a;
    --accent-dark: #c8431f;
    --marigold: #ffbe3b;
    --green: #2fb36f;
    --pink: #ff4f8b;
    --paper: var(--tint);
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --bs-body-font-family: "Space Grotesk", system-ui, sans-serif;
    /* Re-declared here because :root computed these from the classic colours. */
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-secondary-color: rgba(33, 28, 26, .68);
    --bs-link-color: var(--accent-dark);
    --bs-link-hover-color: var(--ink);
    --bs-link-color-rgb: 200, 67, 31;
    --bs-link-hover-color-rgb: 33, 28, 26;
    --skyline-h: 5.5rem;
    --bunting-h: 1.8rem;
    font-size: 1.05rem;

    /* The tent skyline, one tile (two pointed stretch tents, each with a pole, pennant and guy ropes),
       in the colour combinations needed. Fill colour = the colour of the section the tents belong to. */
    --tents-canvas-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60' viewBox='0 -20 360 60'%3E%3Cpath d='M0 40V38C30 38 58 20 70-2 80 22 120 38 150 38 190 38 232 30 250 14 262 30 300 38 360 38V40Z' fill='%23fdf6ec'/%3E%3C/svg%3E");
    --tents-ink-on-canvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60' viewBox='0 -20 360 60'%3E%3Cpath d='M0 40V38C30 38 58 20 70-2 80 22 120 38 150 38 190 38 232 30 250 14 262 30 300 38 360 38V40Z' fill='%23211c1a'/%3E%3Cpath d='M70-2V-16M250 14V0' stroke='%23211c1a' stroke-width='1.8'/%3E%3Cpath d='M70-16l14 4.5-14 4.5zM250 0l11 3.5-11 3.5z' fill='%23ff5e3a'/%3E%3Cpath d='M70-8L28 38M70-8L112 38M250 6L214 38M250 6L288 38' stroke='%23211c1a' stroke-opacity='.35' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    /* One tent with pole and pennant, used as a mask for the heading divider */
    --tent-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -16 120 56'%3E%3Cpath d='M0 40V37C22 37 46 24 60 4 74 24 98 37 120 37V40Z'/%3E%3Cpath d='M60 4V-12' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M60-12l14 4.5-14 4.5z'/%3E%3C/svg%3E");
}

/* Type: tall, sharp signage */
.theme-canopy h1,
.theme-canopy h2,
.theme-canopy h3,
.theme-canopy h4,
.theme-canopy .navbar-brand,
.theme-canopy .offcanvas-title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
}

.theme-canopy h2.section-title {
    letter-spacing: .03em;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
}

/* Heading divider: a little tent with a flag */
.theme-canopy h2.section-title::after {
    width: 4.4rem;
    height: 2.1rem;
    margin-top: .8rem;
    border-radius: 0;
    background: var(--accent);
    -webkit-mask: var(--tent-icon) center bottom / contain no-repeat;
    mask: var(--tent-icon) center bottom / contain no-repeat;
}

/* Buttons: sharp, signage-style */
.theme-canopy .btn-accent,
.theme-canopy .btn-outline-light,
.theme-canopy .btn.rounded-0 {
    border-radius: 0 !important;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.15rem;
    font-weight: 700;
    border-width: 2px;
    padding: .55rem 1.6rem;
    transition: background-color .15s, color .15s, border-color .15s;
}

.theme-canopy .btn-accent {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--marigold);
    --bs-btn-hover-border-color: var(--marigold);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--marigold);
    --bs-btn-active-border-color: var(--marigold);
}

.theme-canopy .btn-outline-light { --bs-btn-border-color: var(--canvas); }
.theme-canopy .btn-outline-light:hover { background: var(--canvas); color: var(--ink); }

.theme-canopy .btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-color: var(--canvas);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-color: var(--canvas);
}

/* Navigation, with a string of bunting hanging underneath */
.theme-canopy .site-nav .navbar-brand { font-size: 1.9rem; letter-spacing: .05em; }
.theme-canopy .site-nav .nav-link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .1em;
    padding-block: .3rem;
    border-bottom: 3px solid transparent;
    margin-inline: .35rem;
}

.theme-canopy .site-nav .nav-link:hover { color: var(--marigold); }
.theme-canopy .site-nav .nav-link.active { color: #fff; border-bottom-color: var(--accent); }
.theme-canopy .logo-mark { color: var(--accent); }
.theme-canopy.no-hero .site-nav,
.theme-canopy .site-nav.scrolled { background-color: var(--ink); box-shadow: none; }
.theme-canopy .site-nav .offcanvas { background-color: var(--ink); }

.theme-canopy .site-nav::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--bunting-h);
    pointer-events: none;
    border-top: 2px solid rgba(253, 246, 236, .75);
    background:
        conic-gradient(from -30deg at 12.5% 100%, var(--accent) 60deg, transparent 0) 0 0 / 10rem 100% repeat-x,
        conic-gradient(from -30deg at 37.5% 100%, var(--marigold) 60deg, transparent 0) 0 0 / 10rem 100% repeat-x,
        conic-gradient(from -30deg at 62.5% 100%, var(--pink) 60deg, transparent 0) 0 0 / 10rem 100% repeat-x,
        conic-gradient(from -30deg at 87.5% 100%, var(--green) 60deg, transparent 0) 0 0 / 10rem 100% repeat-x;
}

@media (max-width: 991.98px) {
    .theme-canopy.has-hero .site-nav:not(.scrolled) { background-color: rgba(33, 28, 26, .5); }
    .theme-canopy .site-nav .nav-link {
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: .04em;
        border-bottom: 1px solid rgba(253, 246, 236, .15);
        margin-inline: 0;
        padding: .35rem 0;
    }
}

/* Tent skyline along the bottom of the hero and banners (plain peaks), and rising into the footer (with flags and ropes).
   (There used to be one between the alternating sections too; it was too busy, so those edges are plain.) */
.theme-canopy .hero::after,
.theme-canopy .page-banner::after,
.theme-canopy .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--skyline-h);
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 100%;
}

.theme-canopy .hero::after,
.theme-canopy .page-banner::after { bottom: -1px; background-image: var(--tents-canvas-on-dark); }
.theme-canopy .page-banner { position: relative; }

.theme-canopy .site-footer { position: relative; }
.theme-canopy .site-footer::before { bottom: calc(100% - 1px); background-image: var(--tents-ink-on-canvas); background-position: 6rem bottom; }

.theme-canopy .hero-dots { margin-bottom: calc(var(--skyline-h) + .9rem); }
.theme-canopy .hero-dots [data-bs-target] { border-radius: 0; width: 1.8rem; height: .3rem; background-color: #fff; }

/* Hero, banners and call-to-action band: deep navy wash over the photo */
.theme-canopy .hero::before {
    background: linear-gradient(180deg, rgba(33, 28, 26, .65) 0%, rgba(33, 28, 26, .25) 50%, rgba(255, 110, 40, .42) 100%);
}

.theme-canopy .hero h1 {
    font-size: clamp(3.6rem, 13vw, 9rem);
    line-height: .88;
    letter-spacing: .02em;
    color: var(--canvas);
}

.theme-canopy .hero .lead { letter-spacing: 0; font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

/* Small "Bristol & the South West" tag: a pennant-shaped label, kept straight */
.theme-canopy .hero p.text-uppercase {
    display: inline-block;
    text-transform: uppercase !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .14em;
    padding: .3rem 2rem .3rem 1.1rem;
    background: var(--accent);
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - .9rem) 50%, 100% 100%, 0 100%);
}

.theme-canopy .page-banner {
    padding-bottom: 8rem;
    background:
        linear-gradient(180deg, rgba(33, 28, 26, .72), rgba(33, 28, 26, .55)),
        var(--hero-img, none) center / cover var(--ink);
}

.theme-canopy .page-banner h1 {
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: .9;
    letter-spacing: .03em;
}

.theme-canopy .page-banner .lead { letter-spacing: .01em; }

.theme-canopy .cta-band {
    background:
        linear-gradient(135deg, rgba(33, 28, 26, .88), rgba(255, 110, 40, .5)),
        var(--hero-img) center / cover fixed;
    padding-bottom: calc(5rem + var(--skyline-h) * .5);
}

.theme-canopy .cta-band h2 { font-size: clamp(2.6rem, 8vw, 5rem); line-height: .95; }

/* Sections */
.theme-canopy .section { padding: 5.5rem 0; }
.theme-canopy .section-alt { background: var(--tint); }

/* Home-page cards: cut to a stretch tent roofline, with a flag pole above */
.theme-canopy .col-md-4:has(> .img-card) { position: relative; padding-top: 3.2rem; }
.theme-canopy .col-md-4:has(> .img-card)::before {
    content: "";
    position: absolute;
    top: .2rem;
    left: 50%;
    width: 2px;
    height: 3.1rem;
    margin-left: -1px;
    background: var(--ink);
}

.theme-canopy .col-md-4:has(> .img-card)::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: 50%;
    border-left: 1.4rem solid var(--accent);
    border-top: .55rem solid transparent;
    border-bottom: .55rem solid transparent;
}

.theme-canopy .col-md-4:nth-child(2):has(> .img-card)::after { border-left-color: var(--marigold); }
.theme-canopy .col-md-4:nth-child(3):has(> .img-card)::after { border-left-color: var(--green); }

.theme-canopy .img-card {
    border-radius: 0;
    clip-path: polygon(50% 0, 56% 5%, 65% 10%, 80% 14%, 100% 16%, 100% 100%, 0 100%, 0 16%, 20% 14%, 35% 10%, 44% 5%);
    transition: transform .3s;
}

.theme-canopy .img-card:hover { transform: translateY(-.4rem); }
.theme-canopy .img-card .caption {
    inset: auto 0 0;
    padding: .85rem 1rem;
    background: var(--ink);
    border-top: 4px solid var(--accent);
}

.theme-canopy .col-md-4:nth-child(2) .img-card .caption { border-top-color: var(--marigold); }
.theme-canopy .col-md-4:nth-child(3) .img-card .caption { border-top-color: var(--green); }
.theme-canopy .img-card h3 { font-size: 1.6rem; letter-spacing: .06em; }

/* Photos: one chamfered corner */
.theme-canopy .feature-img,
.theme-canopy .gallery-grid a { border-radius: 0; clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%); }
.theme-canopy .ratio iframe { border-radius: 0; }
.theme-canopy .gallery-grid { gap: .6rem; }

/* Prices and boxes */
.theme-canopy .price-card {
    border: 1px solid rgba(33, 28, 26, .15);
    border-top: 6px solid var(--accent);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 .8rem 2rem rgba(33, 28, 26, .08);
}

.theme-canopy .col-md-6:nth-child(2) .price-card { border-top-color: var(--green); }
.theme-canopy .price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1; color: var(--ink); }
.theme-canopy .price-card h2 { font-size: 1.9rem; }
.theme-canopy .border { border: 1px solid rgba(33, 28, 26, .2) !important; border-left: 4px solid var(--accent) !important; border-radius: 0; background: #fff; }

/* Forms */
.theme-canopy .form-control { border: 2px solid var(--ink); border-radius: 0; background: #fff; padding: .7rem 1rem; }
.theme-canopy .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(255, 94, 58, .25); }
.theme-canopy .form-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }
.theme-canopy .alert { border-radius: 0; border-left-width: 5px; }

/* Footer */
.theme-canopy .site-footer { background: var(--ink); }
.theme-canopy .site-footer h2 { font-size: 1.7rem; letter-spacing: .06em; }
.theme-canopy .site-footer a:hover { color: var(--marigold); }