/* Eagle Island Resort — Calendar App — Public Embed Stylesheet */

:root {
    --green:      #1a6e70;
    --darkgreen:  #134f51;
    --lightgreen: #6fa9ab;
    --tan:        #71624b;
    --dark:       #3d3d4c;
    --mid:        #9a9ea5;
    --mid-text:   #6b7078; /* WCAG AA contrast on #f9f9f9 (~5.1:1) */
    --light:      #dcdee2;
    --white:      #f9f9f9;
    --danger:     #c0392b;
    --success:    #27ae60;
    --radius:     4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * FONT FAMILIES — set to match the Divi theme currently in use on eagleisland.com.
 * If the site's fonts are ever changed via Divi Theme Customizer, update the two
 * custom properties below to match. Alternatives worth considering:
 *
 *   Option B — inline embed (no iframe): define --font-heading / --font-body on
 *              :root in the Divi child theme CSS; this file will inherit them automatically.
 *
 *   Option C — dynamic CSS endpoint: a PHP route reads Divi's saved font options via
 *              get_option('et_divi') and serves this block as computed CSS.
 *
 *   Option D — JS inheritance (same-origin only): on embed load, read
 *              parent's getComputedStyle(document.body).fontFamily and apply it here.
 */
:root {
    --font-heading: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
    --font-body:    'Open Sans', Helvetica, Arial, Lucida, sans-serif;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--dark);
    background: transparent;
    padding: 0;
}

/* Selection Color */
::selection {
    color: var(--white);
    background: var(--green);
}

::-moz-selection {
    color: var(--white);
    background: var(--green);
}

/* ── Empty States ────────────────────────────────────────────────────────── */
.empty-state { text-align: center; color: var(--mid); padding: 2.5rem 1rem; font-size: .9rem; }

/* ── Availability Grid ───────────────────────────────────────────────────── */
.embed-availability { max-width: 100%; }

.month-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem; padding: .5rem 0;
}
.month-nav h2 { font-size: 1.2rem; color: var(--darkgreen); font-family: var(--font-heading); font-weight: 400;}
.month-nav a  {
    font-size: 1.6rem; color: var(--green); text-decoration: none;
    padding: .5rem .75rem; line-height: 1;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}
.month-nav a:hover { color: var(--darkgreen); }

.group-heading {
    font-size: .9rem; color: var(--mid-text); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700;
    margin: 1.25rem 0 .6rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--light);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: .75rem;
}

.resource-mini-cal {
    background: #fff;
    padding: .75rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.06);
}
.resource-mini-cal h4 {
    font-size: .85rem; margin-bottom: .4rem;
    color: var(--dark); font-weight: 600;
}

/* Info link icon on resource card headers */
.res-info-link {
    display: inline-flex;
    align-items: center;
    float: right;
    text-decoration: none;
    opacity: .65;
    margin-left: .3rem;
    vertical-align: middle;
}
.res-info-link .icon { width: .9rem; height: .9rem; }
.res-info-link:hover { opacity: 1; }

/* Single-property calendar embed wrapper */
.embed-property-cal { max-width: 280px; margin: 0 auto; }
.embed-property-cal .month-nav h2 { font-size: 1rem; }

/* Per-calendar month navigation */
.mc-month-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .35rem; font-size: .75rem;
}
.mc-month-label {
    color: var(--dark); font-weight: 600; font-size: .75rem;
}
.mc-month-btn {
    background: none; border: none; cursor: pointer; padding: .1rem .25rem;
    line-height: 1; display: inline-flex; align-items: center;
    text-decoration: none;
}
.mc-month-btn .icon { width: .7rem; height: .7rem; }
.mc-month-btn:hover .icon { filter: brightness(0) saturate(100%) invert(25%) sepia(52%) saturate(447%) hue-rotate(140deg) brightness(78%) contrast(95%); }

/* Semantic table mini-calendar */
.mini-cal {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}
.mini-cal th {
    text-align: center; font-size: .65rem; font-weight: 700;
    color: var(--lightgreen); padding: .15rem 0;
}
.mini-cal td.mc-cell {
    text-align: center; font-size: .75rem; height: 26px;
    vertical-align: middle; border-radius: 2px; padding: 0;
}
.mini-cal td.mc-cell a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 26px;
    color: var(--darkgreen); text-decoration: none;
    border-radius: 2px; transition: background .1s;
}
.mini-cal td.mc-cell a:hover { background: var(--lightgreen); color: #fff; }

.mc-cell--empty { }
.mc-cell--today { outline: 1px solid var(--green); border-radius: 2px; font-weight: 700; }
.mc-cell--unavailable { }

.mc-day { display: flex; align-items: center; justify-content: center;
          width: 100%; height: 100%; min-height: 26px; border-radius: 2px; }
.mc-day--blocked { opacity: .65; cursor: not-allowed; }
.mc-day--past { color: var(--mid-text); }

/* Pending-interest indicator (diagonal strikethrough) */
.mc-cell--has-interest { position: relative; }
.mc-cell--has-interest::after {
    content: ''; position: absolute; inset: 3px;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.7px),
        #d48c00 calc(50% - 0.7px),
        #d48c00 calc(50% + 0.7px),
        transparent calc(50% + 0.7px)
    );
    pointer-events: none; opacity: .55;
}

/* Legend */
.availability-legend {
    display: flex; gap: 1.25rem; font-size: .75rem;
    margin-bottom: .6rem; flex-wrap: wrap; color: var(--mid-text);
    align-items: center;
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.legend-swatch {
    display: inline-block; width: 20px; height: 20px;
    border-radius: 3px; vertical-align: middle;
}
.legend-swatch--unavailable { background: #c17a3a33; }
.legend-swatch--available   { background: #e8f4f5; border: 1px solid #6fa9ab; }
.legend-dot--interest {
    display: inline-block; width: 20px; height: 20px; position: relative;
    background: #e8f4f5; border: 1px solid #6fa9ab; border-radius: 3px;
    vertical-align: middle;
}
.legend-dot--interest::after {
    content: ''; position: absolute; inset: 2px;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 0.7px),
        #d48c00 calc(50% - 0.7px),
        #d48c00 calc(50% + 0.7px),
        transparent calc(50% + 0.7px)
    );
    opacity: .55;
}

/* ── Request Form ────────────────────────────────────────────────────────── */
.embed-request { max-width: 580px; margin: 0 auto; }
.embed-request h2 { color: var(--darkgreen); margin-bottom: .5rem; font-size: 1.2rem; font-family: var(--font-heading); }
.embed-request h3 { color: var(--dark); font-size: .95rem; margin: 1.1rem 0 .5rem; font-family: var(--font-heading); }

.form-note { font-size: .8rem; color: var(--mid); margin-bottom: .9rem; }
.form-group { margin-bottom: .85rem; }
.form-group label { display: block; font-size: .8rem; font-weight: 600;
                    color: var(--dark); margin-bottom: .28rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; padding: .42rem .65rem;
    border: 1px solid var(--light); border-radius: var(--radius);
    font-size: .875rem; font-family: inherit; color: var(--dark);
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(26,110,112,.18);
}
.form-group input:invalid:not(:placeholder-shown):not(:focus),
.form-group select:invalid:not(:focus),
.form-group textarea:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(192,57,43,.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
    .confirmation-card { padding: 1.5rem 1rem; }
}

.divider { border: none; border-top: 1px solid var(--light); margin: 1rem 0; }
.form-subsection-heading { font-size: .875rem; color: var(--dark); font-weight: 700;
                           margin: .75rem 0 .5rem; }

.form-actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

/* Alerts */
.alert { padding: .65rem 1rem; border-radius: var(--radius); margin-bottom: .9rem; font-size: .875rem; }
.alert ul { padding-left: 1.2rem; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .45rem 1.1rem; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer;
    font-size: .875rem; font-family: inherit; text-decoration: none;
    transition: background .15s;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--darkgreen); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible,
button:focus-visible,
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }

/* ── SVG Icons ───────────────────────────────────────────────────────────── */
.icon {
    display: inline-block; vertical-align: middle;
    width: 1em; height: 1em; flex-shrink: 0;
}
.icon--green {
    filter: brightness(0) saturate(100%) invert(35%) sepia(52%) saturate(447%) hue-rotate(140deg) brightness(88%) contrast(95%);
}
.icon--muted {
    filter: brightness(0) saturate(100%) invert(67%) sepia(7%) saturate(281%) hue-rotate(188deg) brightness(93%) contrast(88%);
}
.icon--success {
    filter: brightness(0) saturate(100%) invert(53%) sepia(37%) saturate(601%) hue-rotate(95deg) brightness(89%) contrast(87%);
}
.icon--dark {
    filter: brightness(0) saturate(100%) invert(22%) sepia(14%) saturate(424%) hue-rotate(188deg) brightness(94%) contrast(91%);
}

/* Flip green/muted/dark icons to white inside outline buttons on hover */
.btn-outline:hover .icon--green,
.btn-outline:hover .icon--muted,
.btn-outline:hover .icon--dark { filter: brightness(0) invert(1); }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.embed-confirmation {
    display: flex; align-items: center; justify-content: center; min-height: 60vh;
}
.confirmation-card {
    text-align: center; max-width: 440px; padding: 2.5rem 2rem;
    background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.confirmation-icon { margin-bottom: .75rem; line-height: 1; }
.confirmation-icon .icon { width: 3rem; height: 3rem; }
.confirmation-card h2 { color: var(--darkgreen); margin-bottom: .25rem; font-size: 1.25rem; font-family: var(--font-heading); }
.confirmation-ref { font-size: .85rem; color: var(--mid-text); margin-bottom: 1rem; }
.confirmation-details {
    text-align: left; width: 100%; border-collapse: collapse;
    margin-bottom: 1rem; font-size: .875rem;
}
.confirmation-details th {
    padding: .35rem .75rem .35rem 0; color: var(--mid-text); font-weight: 500;
    white-space: nowrap; vertical-align: top; width: 1%;
}
.confirmation-details td { padding: .35rem 0; }
.confirmation-details small { color: var(--mid-text); }
.confirmation-card p  { margin-bottom: .9rem; font-size: .925rem; line-height: 1.6; }

/* ── Availability Check Message ──────────────────────────────────────── */
.availability-msg {
    padding: .55rem .85rem; border-radius: var(--radius);
    font-size: .85rem; line-height: 1.45; margin-bottom: .85rem;
}
.availability-msg--error {
    background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}
.availability-msg--warning {
    background: #fff3cd; color: #856404; border: 1px solid #ffc107;
}

/* ── reCAPTCHA ────────────────────────────────────────────────────────── */
.grecaptcha-badge { display: none; }

.grecaptcha-terms-note {
    font-size: .75rem;
    color: var(--mid-text);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light);
    display: inline-block;
    width: 100%;
}

.grecaptcha-terms-note a {
    color: var(--mid-text);
}

.grecaptcha-terms-note a:hover {
    color: var(--green);
}

/* ── Screen-reader-only utility ─────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}