html {
    box-sizing: border-box;
    font-size: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
}

.misc {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the container takes full viewport height */
}

/* Make main content grow to push footer down */
main.container {
    flex: 1 0 auto; /* This makes main content take available space */
}

/* Footer styles - already has bg-light class */
footer.footer {
    flex-shrink: 0; /* Prevent footer from shrinking */
    width: 100%;
}


/* Size for brand */
nav .navbar-brand
{
    font-size: xx-large;
}
/* links */
a {
    color: #3c8454;
    text-decoration: none;
}

a:hover {
    color: #bcaa96;
    text-decoration: none;
}

/* nav .navbar-brand .green
{
    color: #2e944b;
} */
.green
{
    color: #2e944b;
}
/* nav a 
{
    color: #f57c00;
} */

/* background for alert bar */
.flash-bar {
    background-color: #e8f9e9;
    padding: 0.25rem 0.5rem;  /* overrides .alert padding */
    margin-bottom: 0.25rem;
    line-height: 1.2;
    min-height: unset;
    max-height: 6rem;
    scrollbar-width: thin; /* for Firefox */
    overflow-y: auto;      /* prevent overflow */
    overflow-x: hidden;    /* recommended  */
    scroll-behavior: smooth;
}
.flash-bar::-webkit-scrollbar {
    width: 6px;
}

.flash-bar .flashes-sm {
    font-size: 0.85rem;       /* smaller text */
    padding: 0.25rem 0.75rem; /* thinner height */
    margin-bottom: 0.2rem;    /* less spacing */
    margin-top: 0.2rem;
}
.flashes-sm {
    display: flex;
    flex-direction: column-reverse;
}
/* links */
a {
    color: #3c8454;
    text-decoration: none;
}

a:hover {
    color: #bcaa96;
    text-decoration: none;
}
.upload-form {
            background: #f5f5f5;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

input[type="file"] {
            width: 300px;
            padding: 10px;
            border: 2px dashed #ccc;
            border-radius: 5px;
            background: white;
    }

/* selectors for table styling */
.row-header {
    background-color: #038542;
    color: white;
    font-weight: bold;
}
.cover-cell {
    min-width: 150px;
    }
.button-cell{
    min-width: 150px;
}

/* #region FOOTER
------------------------------------*/
.footer {
    /* background: #d2d3d5; */
    /* background: #e8f9e9;  */
    color: green; 
}
.socials {
    list-style-type: none;
    padding: 0;
}

.socials li {
    display: inline-block;
    margin-left: 15px;
    margin-top: 15px;
}

.socials img {
    width: 32px;
}

.socials img:hover {
    opacity: 0.5;
}

@media screen and (min-width: 860px) {
    .footer {
        display: flex;
        /* justify-content: space-between; */
        justify-content: space-around;
        align-items: center;
        padding: 0px 20px;
    }
}

@media screen and (max-width: 859px) {
    .footer {
        text-align: center;
        padding: 10px;
    }
}

/* #region PAGE HEADER (icon + title)
   Keep the title on ONE row beside its icon on every screen: flex + nowrap,
   with the font scaling down via clamp() so long titles fit next to the icon
   instead of wrapping under it. */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
    font-size: clamp(1.05rem, 5.2vw, 1.9rem);
    line-height: 1.15;
    margin-bottom: 0.9rem;
}
.page-header img {
    flex: 0 0 auto;              /* never shrink/grow the icon */
    width: clamp(40px, 12vw, 64px);
    height: auto;
}

/* #region BUTTONS
   One shared button style. inline-flex → lone buttons size to their content;
   inside a .btn-row grid cell they stretch to equal width & height. */
.iframe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    min-height: 44px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(13px, 3.3vw, 15px);
    line-height: 1.2;
    text-align: center;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.iframe-btn:hover {
    background: #1a5a8f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Button row: as many equal columns as fit (min 150px), wrapping to a tidy
   2nd row when needed. Inspired by the WordPress host page's .button-grid. */
.btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 1rem;
    max-width: 700px;
}

@media (max-width: 480px) {
    .btn-row {
        grid-template-columns: repeat(2, 1fr);  /* dependable 2-up on phones */
        gap: 8px;
    }
}
@media (max-width: 320px) {
    .btn-row { grid-template-columns: 1fr; }    /* last resort: single column */
}

/* Very light blue tint for result output written directly onto the page,
   with a little left padding so the text isn't flush against the edge. */
.output-tint {
    background-color: #f5faff;
    padding-left: 0.75rem;
}

/* Translate result: original vs. translation side by side on wide screens,
   stacked (original on top) on narrow ones. */
.translate-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .translate-columns {
        grid-template-columns: 1fr;
    }
}

/* A bordered, tinted box for each of the two panels. */
.translate-box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    min-height: 4rem;
}

/* Inline md/PDF icons in the download bar — scale with text, inherit link color
   (width:auto keeps each SVG's own aspect ratio). */
.dl-icon {
    height: 0.95em;
    width: auto;
    vertical-align: -0.13em;
    margin-right: 0.25em;
}

/* Cost / usage note under the results (moved out of the button row). */
.cost-note {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
}

/* #region FORMS */
.summary-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 700px;
}

.summary-form .form-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 12px;
}

.summary-form label {
    font-weight: 600;
}

.summary-form select,
.summary-form input[type="url"],
.summary-form textarea {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Standalone selects (translate / iconify) — full width, capped so they don't
   stretch absurdly wide on desktop. */
.lgr-select {
    width: 100%;
    max-width: 480px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Phones/tablets: stack the label ABOVE the field so the input gets the full
   width instead of being crushed into a narrow second column. */
@media (max-width: 640px) {
    .summary-form .form-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 4px;
    }
    .summary-form label {
        margin-bottom: 2px;
    }
}

/* #region FORM SUBMIT BUTTONS
   The submit row should NOT stretch across the whole form — show an even pair
   no wider than the input fields. */
.btn-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 1rem;
    max-width: 480px;         /* ≈ one field's width */
    margin-inline: auto;      /* centered (bare forms: translate / iconify) */
}

/* In the labeled forms (summarize / brochure) drop the pair under the FIELD
   column so it lines up beneath the inputs and matches their width exactly. */
.summary-form .form-btns {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
}
.summary-form .form-btns .btn-pair {
    grid-column: 2;           /* sit under the fields, not the labels */
    margin-top: 0;
    max-width: none;          /* fill the field column */
    margin-inline: 0;
}

@media (max-width: 640px) {
    .summary-form .form-btns { grid-template-columns: 1fr; }
    .summary-form .form-btns .btn-pair { grid-column: 1; }
}
.summary-form .participant-btns {
    display: grid;
    grid-auto-flow: column;      /* one implicit track per visible button */
    grid-auto-columns: 1fr;      /* equal tracks, sized to the widest label */
    gap: 10px;
    width: max-content;          /* wrapper hugs the buttons, no stretch */
    align-self: flex-start;          /* centred in the column flexbox */
}