/* ---------------------------------------------------------------------------
   Napoleon Room request page.

   Scoped under .roomRequest so nothing leaks into other templates. The hero
   above this section uses the theme's existing classes and needs no CSS here.

   Brand values from tailwind.config.js: purple #7d22b1, gold #A38D63,
   gold border #BD9C72, grey #6D6E71. Fonts are the theme's Typekit families.
   Written as plain CSS because the theme's Tailwind build cannot be
   recompiled on the server.
   --------------------------------------------------------------------------- */

.roomRequest {
    --nr-purple: #7d22b1;
    --nr-gold: #A38D63;
    --nr-gold-border: #BD9C72;
    --nr-grey: #6D6E71;
    --nr-ink: #3A3A3C;
    --nr-parchment: #FBF7EE;
    --nr-panel: #F7F1E3;
    --nr-field-border: #D8D2C6;
    --nr-red: #E04242;

    padding: 56px 20px 88px;
    background-color: var(--nr-parchment);
    background-image: url('/wp-content/uploads/2023/06/landing-pages-bck.jpg');
    background-size: cover;
    background-position: center top;
}

/* ---- framed card ---- */
.roomRequest__card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--nr-gold);
    box-shadow: 0 0 0 1px rgba(163,141,99,.18), 0 22px 60px -34px rgba(58,58,60,.5);
    padding: 44px 24px 52px;
    position: relative;
}
.roomRequest__card::before {
    content: "";
    position: absolute; inset: 9px;
    border: 1px solid rgba(163,141,99,.55);
    pointer-events: none;
}
@media (min-width: 768px) { .roomRequest__card { padding: 52px 64px 64px; } }

/* ---- ornaments and intro ---- */
.roomRequest__orn { display: flex; justify-content: center; }
.roomRequest__orn svg { width: 128px; height: auto; }
.roomRequest__orn:last-of-type svg { width: 104px; }

.roomRequest__intro {
    font-family: "soleil", sans-serif;
    color: var(--nr-grey);
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    max-width: none;
    margin: 22px auto 0;
    /* Avoids a single word being left stranded on the last line. Ignored by
       older browsers, which simply wrap as before. */
    text-wrap: pretty;
}
.roomRequest__intro p + p { margin-top: 8px; }

.roomRequest__rule {
    display: flex; align-items: center; gap: 16px;
    margin: 30px auto 38px; max-width: 440px;
}
.roomRequest__rule::before, .roomRequest__rule::after {
    content: ""; flex: 1; height: 1px; background: rgba(163,141,99,.55);
}
.roomRequest__rule span {
    width: 9px; height: 9px; background: var(--nr-gold);
    transform: rotate(45deg); flex: none;
}

/* ---- section headers ---- */
.roomRequest .gsection { border: 0; margin: 34px 0 20px; padding: 0; }
.roomRequest .gsection:first-child { margin-top: 0; }
.roomRequest .gsection_title {
    font-family: "stranger-wide", sans-serif;
    text-transform: uppercase; letter-spacing: .12em;
    font-size: 16px; color: var(--nr-purple);
    margin: 0; display: flex; align-items: center; gap: 14px;
}
.roomRequest .gsection_title::before {
    content: ""; width: 7px; height: 7px;
    background: var(--nr-gold); transform: rotate(45deg); flex: none;
}
.roomRequest .gsection_title::after {
    content: ""; flex: 1; height: 1px; background: rgba(163,141,99,.45);
}

/* ---- labels ---- */
.roomRequest .gfield_label,
.roomRequest legend.gfield_label {
    font-family: "soleil", sans-serif;
    font-size: 14px; font-weight: 600; color: var(--nr-ink);
    margin-bottom: 7px; display: block;
}
.roomRequest .ginput_complex label {
    font-size: 12.5px; color: var(--nr-grey); font-weight: 400;
}
/* Gravity Forms prints the literal word "(Required)" beside every label, which
   reads as clutter. Show a red asterisk instead, keeping the text in the DOM
   so screen readers still announce it. */
.roomRequest .gfield_required_text,
.roomRequest .gfield_required_asterisk { font-size: 0 !important; margin-left: 2px; }
.roomRequest .gfield_required_text::after,
.roomRequest .gfield_required_asterisk::after {
    content: "*"; font-size: 16px; line-height: 1;
    color: var(--nr-red); font-family: "soleil", sans-serif;
}

/* ---- inputs ---- */
.roomRequest input[type="text"],
.roomRequest input[type="email"],
.roomRequest input[type="tel"],
.roomRequest input[type="number"],
.roomRequest select,
.roomRequest textarea {
    width: 100%;
    font-family: "soleil", sans-serif;
    font-size: 16px; color: var(--nr-ink);
    background: #fff;
    border: 1px solid var(--nr-field-border);
    border-radius: 3px;
    padding: 13px 14px; line-height: 1.35;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none; -webkit-appearance: none;
}
.roomRequest textarea { min-height: 132px; resize: vertical; }
.roomRequest select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A38D63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    padding-right: 38px;
}
.roomRequest input::placeholder,
.roomRequest textarea::placeholder { color: #A9A6A0; }
.roomRequest input:focus,
.roomRequest select:focus,
.roomRequest textarea:focus {
    outline: none; border-color: var(--nr-gold);
    box-shadow: 0 0 0 3px rgba(163,141,99,.16);
}

/* ---- radios ---- */
.roomRequest .gfield_radio { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.roomRequest .gchoice { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.roomRequest .gfield_radio input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; margin: 0;
    border: 1px solid var(--nr-field-border); border-radius: 50%;
    background: #fff; position: relative; cursor: pointer;
    transition: border-color .15s ease;
}
.roomRequest .gfield_radio input[type="radio"]:checked { border-color: var(--nr-purple); }
.roomRequest .gfield_radio input[type="radio"]:checked::after {
    content: ""; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--nr-purple);
}
.roomRequest .gfield_radio label {
    font-family: "soleil", sans-serif; font-size: 15px;
    color: var(--nr-ink); cursor: pointer;
}

/* ---- important information ---- */
.roomRequest .nap-important {
    background: var(--nr-panel);
    border: 1px solid var(--nr-gold-border);
    padding: 22px 24px; margin-top: 12px; text-align: center;
}
.roomRequest .nap-important__title {
    font-family: "stranger-wide", sans-serif;
    text-transform: uppercase; letter-spacing: .12em;
    font-size: 14px; color: var(--nr-purple); margin: 0 0 10px;
}
.roomRequest .nap-important p {
    font-family: "soleil", sans-serif;
    font-size: 14.5px; line-height: 1.6; color: var(--nr-grey); margin: 0;
}
.roomRequest .nap-important p + p { margin-top: 6px; }

/* ---- submit ---- */
.roomRequest .gform_footer { justify-content: center; margin-top: 34px; padding: 0; }
.roomRequest .gform_button {
    font-family: "stranger-wide", sans-serif;
    text-transform: uppercase; letter-spacing: .1em;
    font-size: 18px; color: #fff;
    background: var(--nr-purple);
    border: 0; border-radius: 3px;
    padding: 18px 46px 15px; cursor: pointer;
    transition: background-color .18s ease; width: 100%;
}
@media (min-width: 640px) { .roomRequest .gform_button { width: auto; min-width: 340px; } }
@media (max-width: 639px) {
    .roomRequest .gform_button { padding: 16px 16px 13px; font-size: 16px; letter-spacing: .06em; }
}

.roomRequest .gform_button:hover { background: #1a1a1a; }
.roomRequest .gform_button:focus-visible { outline: 3px solid var(--nr-gold); outline-offset: 3px; }

/* ---- validation ---- */
.roomRequest .gfield_error input,
.roomRequest .gfield_error select,
.roomRequest .gfield_error textarea { border-color: var(--nr-red); }
.roomRequest .validation_message,
.roomRequest .gform_validation_errors {
    font-family: "soleil", sans-serif; font-size: 13.5px; color: var(--nr-red);
    background: none; border: 0; padding: 6px 0 0;
}
.roomRequest .gform_validation_errors > h2 { font-size: 15px; color: var(--nr-red); }

/* ---- confirmation ---- */
.roomRequest .gform_confirmation_message {
    font-family: "soleil", sans-serif; font-size: 17px; line-height: 1.6;
    color: var(--nr-ink); text-align: center;
    background: var(--nr-panel); border: 1px solid var(--nr-gold-border);
    padding: 34px 28px;
}

/* ---- sign off ---- */
.roomRequest__signoff {
    font-family: "espiritu-script", sans-serif;
    font-size: 34px; color: var(--nr-purple);
    text-align: center; margin: 40px 0 0;
}
.roomRequest__back { text-align: center; margin-top: 22px; }
.roomRequest__back a {
    font-family: "stranger-wide", sans-serif;
    text-transform: uppercase; letter-spacing: .1em;
    font-size: 13px; color: var(--nr-gold); text-decoration: none;
}
.roomRequest__back a:hover { color: var(--nr-purple); }

/* ---- rhythm ---- */
.roomRequest .gform_wrapper .gform_fields { row-gap: 22px; }
.roomRequest .gform_wrapper .gfield { margin: 0; }

/* ---- narrow screens ---- */
@media (max-width: 520px) {
    .roomRequest { padding: 40px 16px 64px; }
    .roomRequest .gsection_title { flex-wrap: wrap; }
    .roomRequest .gsection_title::after { display: none; }
}


/* ---- field descriptions: supporting copy, not a headline ----
   Gravity Forms inherits the theme's display face (espiritu) at 15px black here, which
   made the Guest Count explanation compete with the label. BW asked for the regular body
   typeface in a lighter, smaller treatment. 7 Sep 2026. */
.roomRequest .gform_wrapper.gravity-theme .gfield_description,
.roomRequest .gform_wrapper.gravity-theme .description {
    font-family: "soleil", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    line-height: 20px;
    font-weight: 400;
    color: #5f5a68;
    padding-top: 6px;
    max-width: 62ch;
    text-wrap: pretty;
}