/*
 * Planet Awesome (Nijmegen) — CloudShop theme.
 * As planet-awesome.com: a white header with the logo, a deep navy page with white cards, Montserrat (light body,
 * bold uppercase titles), green "Book now" buttons, blue as the second colour and the logo's magenta as a
 * line under the header. The old shop's magenta-to-blue gradient sits behind the page (.site-background);
 * cards stay flat: no glow or coloured shadows.
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap");

:root {
    /* Brand */
    --pa-navy: #1d2344;
    --pa-navy-deep: #161a35;
    --pa-blue: #008fce;
    --pa-blue-hover: #0079ae;
    --pa-magenta: #d11c58;
    --pa-green: #198754;
    --pa-green-hover: #146c43;

    --cs-color-primary: var(--pa-green);
    --cs-color-primary-hover: var(--pa-green-hover);
    --cs-color-on-primary: #ffffff;
    --cs-color-primary-soft: #e7f4ee;
    --cs-color-primary-soft-strong: #cde9db;
    --cs-color-on-primary-soft: #0f5132;
    --cs-color-primary-border: #7cc4a1;
    --cs-color-secondary: var(--pa-blue);
    --cs-color-on-secondary: #ffffff;

    --cs-color-background: var(--pa-navy);
    --cs-color-surface: #ffffff;
    --cs-color-subtle: #f3f4f8;
    --cs-color-text: var(--pa-navy);
    --cs-color-text-soft: #3b4163;
    --cs-color-muted: #626886;
    --cs-color-disabled: #c4c7d4;
    --cs-color-border: #dcdee6;
    --cs-color-input-border: #c3c7d4;

    --cs-color-error: #c8174f;
    --cs-color-error-hover: #9e1240;
    --cs-color-error-soft: #fdeef3;
    --cs-color-on-error-soft: #7c0d32;

    --cs-font-body: "Montserrat", Helvetica, Arial, sans-serif;
    --cs-font-heading: var(--cs-font-body);
    --cs-font-size-h1: 1.875rem;

    --cs-radius: 0.625rem;
    --cs-radius-control: 0.625rem;
    --cs-shadow-card: none;

    /* The old shop's background: magenta into navy into blue, behind the whole page. */
    --cs-background-image: linear-gradient(135deg, #d51f73, #29265b 50%, #2a2b5f 55%, #2e376c 65%, #305186 75%, #327ab1 90%, #3797d0);

    accent-color: var(--pa-blue);
}

/* Text directly on the navy page (page title and intro, stepper, back link) is white. */
.site-main {
    color: #ffffff;
}

.site-main > .page-title,
.site-main > * > .page-title,
.page-title {
    color: #ffffff;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}

.page-intro {
    color: #d5d8e8;
}

/* Header: white with the coloured logo; a magenta line underneath. */
.site-header {
    background-color: #ffffff;
    border-bottom: 3px solid var(--pa-magenta);
}

.site-logo {
    display: block;
    width: 120px;
    height: 40px;
    background: url("Images/logo.png") left center / contain no-repeat;
    color: transparent;
    font-size: 0;
    overflow: hidden;
}

.site-footer {
    background-color: var(--pa-navy-deep);
    border-top: 0;
    color: #b8bcd2;
}

/* Titles in cards: bold and uppercase. */
.card-title,
.offcanvas-title,
.product-card h2 {
    font-weight: 700;
    text-transform: uppercase;
}

/* Buttons: uppercase, as on the site. */
.btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn:focus-visible {
    outline: 2px solid var(--pa-blue);
    outline-offset: 2px;
}

/* Secondary actions in the site's blue. */
.btn-outline:not(:disabled) {
    border-color: var(--pa-blue);
    color: var(--pa-blue-hover);
}

.btn-outline:not(:disabled):hover {
    background-color: var(--pa-blue);
    color: #ffffff;
}

/* Product images: rounded. */
.product-image img,
.product-description img {
    border-radius: var(--cs-radius);
    object-fit: cover;
}

.product-description img {
    width: 100%;
    max-height: 350px;
    margin-bottom: 1em;
}