.main-img {
    /* Editable from the page editor; the literal is the fallback and must stay
       equal to the default in constants/content.slots.js. */
    background-image: var(--ls-give-image, url("/img/webp/couple-2.webp"));
    background-position: center;
    background-size: cover;
    height: 450px;
    max-height: 600px;
    min-width: 300px;
}

.m-nav {
    background-color: white;
    top: 0;
    z-index: 10;
    padding-block: 1rem;
}

.nav-button {
    font-family: "EB Garamond", serif;
    font-weight: 200;
    font-size: large;
    
    font-style: normal;
}
a {
    color: black;
    text-decoration: none;
}

.pinyon-script {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
}


@font-face {
    font-family: "WilliamNarasi";
    src: url("/fonts/WilliamNarasi.ttf");
}

a:active:has(h1),
a:focus:has(h1),
a:hover:has(h1)
{
    text-decoration: none;
}

h1 {
    font-family: "WilliamNarasi", cursive;  
    font-size: 5rem;
}

h2 {
    
    font-family: "Pinyon Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 12vw;
    text-align: center;
    @media (width > 500px) {
        font-size: calc(1.5rem + 3vw);
    }
    @media (width > 700px) and (width <1199px) {
        font-size: calc(1.5rem + 5vw);
    }
}

p {
    font-family: "EB Garamond", serif;
}

h3 {
    font-family: "EB Garamond", serif;
}

.gap-payment {
    gap: 1.4rem;;
}

.payment-info {
    position: relative;
}
.payment-container::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 10px;
    width: 30%;
    height: 30%;
    border-top: 0.2rem solid red;
    border-right: 0.2rem solid red;
    filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.3));
}
.payment-container::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 30%;
    height: 30%;
    border-bottom: 0.2rem solid red;
    border-left: 0.2rem solid red;
    filter: drop-shadow(4px 2px 2px rgba(0, 0, 0, 0.3));
}

.payment-container {
    min-height: 300px; 

}

body {

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.border-v::before {

    @media (min-width: 100px) {
        top: -20px;
        right: -20px;
        content: "";
        position: absolute;
        width: 100%;
        height: 80%;
        z-index: -1;
        max-width: 400px;
        border: solid 2px #7B1B38;
    }

    @media (min-width: 500px) {
        content: "";
        position: absolute;
                top: -20px;
        right: -20px;
        width: 100%;
        height: 80%;
        z-index: -1;
        max-width: 400px;
        border: solid 2px #7B1B38;
    }
    
    @media (width > 799px) {
        content: "";
        position: absolute;
        width: 100%;
        top: -20px;
        right: -20px;
        height: 80%;
        z-index: -1;
        /* transform: translate(15%, -5%); */
        border: solid 2px #7B1B38;
    }

    @media (width > 1199px) {
        content: "";
        position: absolute;
        width: 100%;
        height: 80%;
        z-index: -1;

        border: solid 2px #7B1B38;
    }
    
}

.border-v {

    position: relative;

}

html,body,footer {
    max-width: 100%;
    overflow-x: clip;
}

footer {
    width: 100%;
    background-image: url("/img/couple-1.JPG");
    background-size: 250%;
    @media (width > 800px) {
        background-size: cover;
    }
    background-position: center;
}

footer p {
    color: white;
    filter: drop-shadow(0.2rem 0.2rem 0.15rem black);
}

footer .nav-link {
    color: rgb(233, 133, 133);
    font-family: "EB Garamond", serif;
}

footer .nav-link:hover {
    color: rgb(254, 2, 2);
}

footer .nav-link:focus {
    color: rgb(254, 2, 2);
}

footer .text {
    font-family: "WilliamNarasi", cursive;
    font-size: calc(1.5rem + 2vw);
}
/* Same guard as home.css: a long unbroken string would otherwise run out of
   its column instead of wrapping. */
p,
h2,
h3 {
    overflow-wrap: break-word;
}

/* The text side of the payment layout is a flex item with an automatic basis,
   so its width was decided by its own content: adding a sentence to the intro
   made the whole column wider and pushed the photo out of the row rather than
   wrapping the text. `min-width: 0` lets a flex item shrink below its
   max-content size — without it, `min-width: auto` pins the column to the
   width of its longest line. */
/* The payment layout is a two-column flex row inside `.container`. Bootstrap's
   container is wide (up to 1320px), which pushed the photo hard against its
   right edge — and on a ~1000px viewport past it, where `overflow-x: clip` on
   body cropped the photo in half. Narrowing the container and giving it real
   side padding pulls both columns back toward the middle of the page.
   The padding scales with the viewport so small screens do not lose room. */
.give-container {
    max-width: 1080px;
    padding-inline: clamp(1rem, 5vw, 3.5rem);
}

.give-text-col {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
}

/* Deliberately scoped to that one wrapper. A blanket `min-width: 0` on every
   Bootstrap column was tried and reverted on 2026-08-01: it also beat
   `.main-img { min-width: 300px }` on specificity, which collapsed the photo
   column to a sliver and pushed the whole row off-centre. The inner columns
   need no such rule — they are sized in percentages, so once this wrapper is
   bounded they wrap on their own. */