/* ============================================================
home.css For edits to the home page
============================================================ */

/* Make all form controls fluid */
.usa-input,
.usa-select,
.usa-textarea {
    width: 100%;
    max-width: 100%;
}

/* Correct textarea selector */
#commentText {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 14rem;
    line-height: 1.55;
    font-size: 1rem;
    resize: vertical;
    padding: 0.75rem 0.9rem;
    box-sizing: border-box;
}

/* Keep alert content from causing horizontal scroll */
#output .usa-alert__body {
    overflow-x: hidden;
    word-break: break-word;
}

/* Mobile polish */
@media (max-width: 640px) {
    /* Stack columns and add gap */
    .grid-row {
        gap: 1rem;
    }
    .tablet\:grid-col-5,
    .tablet\:grid-col-7 {
        width: 100%;
    }

    /* Make action buttons full-width */
    #output .usa-button,
    .tablet\:grid-col-5 .usa-alert .usa-button {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    /* Prevent any long strings from blowing out */
    .usa-alert {
        overflow-wrap: break-word;
    }
}

/* --- Home spacing helpers ------------------------------------ */
.stack-12 > * + * {
    margin-top: 0.75rem;
}
.stack-16 > * + * {
    margin-top: 1rem;
}
.stack-20 > * + * {
    margin-top: 1.25rem;
}

.home-intro {
    margin-bottom: 1.5rem;
}
.home-helper {
    margin: 1rem 0 2rem;
}

/* Make sure summary boxes never crowd what follows */
.usa-summary-box {
    margin-bottom: 1.25rem;
}

/* Optional: quieter helper link */
.usa-link--alt {
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}
.usa-link--alt:hover {
    color: var(--color-text);
}

/* Give the right column a little breathing room on wide screens */
@media (min-width: 880px) {
    .tablet\:grid-col-5 .usa-alert,
    .tablet\:grid-col-5 .usa-summary-box {
        margin-top: 0.75rem;
    }
}

/* Hero Section (lighter + centered) */
.hero {
    position: relative;
    background: url("/assets/img/hero.jpg") center 40% / cover no-repeat;
    color: #fff;
    min-height: clamp(320px, 45vh, 500px);
    padding: 3rem 1rem;
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* Lighter overlay */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        /* very light at top */ rgba(0, 0, 0, 0.25) 40%,
        /* medium middle */ rgba(0, 0, 0, 0.35) 100%
            /* slightly stronger bottom */
    );
}

/* Centered text block */
.hero__content {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* keeps button centered */
    gap: 0.75rem; /* consistent spacing */
}

/* Typography refinements */
.hero h1 {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin: 0;
}

.hero p {
    font-size: 1.1rem;
    max-width: 42rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    margin: 0;
}

.hero__subtext {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Give the CTA a little lift over the photo */
.hero .usa-button {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

/* Generator spacing */
#generator-form.stack > * + * {
    margin-top: 0.75rem;
} /* mobile */
@media (min-width: 640px) {
    #generator-form.stack > * + * {
        margin-top: 1rem;
    } /* tablet+ */
}

/* Output alert spacing */
#output .usa-alert__body > * + * {
    margin-top: 0.75rem;
}

/* Make all form controls fluid */
.usa-input,
.usa-select,
.usa-textarea {
    width: 100%;
    max-width: 100%;
}

/* Correct selector for the generator textarea */
#commentText {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 14rem;
    line-height: 1.55;
    font-size: 1rem;
    resize: vertical;
    padding: 0.75rem 0.9rem;
    box-sizing: border-box; /* belt & suspenders, though you set this globally */
}

/* Prevent horizontal scroll in the alert on small screens */
#output .usa-alert__body {
    overflow-x: hidden;
    word-break: break-word; /* long unbroken text won’t push layout */
}

/* Mobile spacing & stacking polish */
@media (max-width: 640px) {
    .grid-row {
        gap: 1rem;
    }
    .tablet\:grid-col-5 {
        margin-top: 1.25rem;
    }
    #output .usa-button {
        display: block;
        width: 100%;
    }
    #output .usa-button + .usa-button {
        margin-top: 0.5rem;
    }
}

/* Optional: widen the alert content a bit on large screens */
@media (min-width: 880px) {
    #output .usa-alert__body {
        padding: 1.25rem 1.25rem;
    }
}

/* Slightly wider modal body spacing */
#copy-modal .usa-modal__main > .usa-prose p {
    margin-bottom: 0.5rem;
}
#copy-modal .usa-modal__main > .usa-prose ol {
    margin-top: 0.25rem;
}

.why-matters {
    display: grid;
    gap: 0.5rem;
}
.why-matters li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    list-style: none;
}
.why-matters li > span {
    width: 1.25rem;
    line-height: 1.25rem;
}

/* 1) Fluid controls (once) */
.usa-input, .usa-select, .usa-textarea {
  width: 100%;
  max-width: 100%;
}

/* 2) Correct textarea */
#commentText {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 14rem;
  line-height: 1.55;
  font-size: 1rem;
  resize: vertical;
  padding: .75rem .9rem;
  box-sizing: border-box;
}

/* 3) Keep alert contents from pushing horizontally */
#output .usa-alert__body {
  overflow-x: hidden;
  word-break: break-word;
}

/* 4) Mobile layout + full-width CTA in the right column */
@media (max-width: 640px) {
  .grid-row { gap: 1rem; }
  .tablet\:grid-col-7, .tablet\:grid-col-5 { width: 100%; }

  /* kill USWDS min-width and force full width */
  .tablet\:grid-col-5 .usa-alert .usa-button,
  #output .usa-button {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;            /* override USWDS min-width */
    inline-size: 100%;       /* belt & suspenders */
  }

  .usa-alert { overflow-wrap: break-word; }
}


/* Narrower textarea */
#commentText {
  width: 100%;          /* still fluid on mobile */
  max-width: 40rem;     /* pick a width you like, e.g. ~640px */
  margin-inline: auto;  /* centers it in the container */
  min-height: 14rem;
  line-height: 1.55;
  font-size: 1rem;
  resize: vertical;
  padding: .75rem .9rem;
  box-sizing: border-box;
}

/* Narrow the "Get a share image" button */
.usa-alert--success .usa-button[data-analytics="cta_share_image"] {
  display: inline-block;   /* shrink-wrap to text */
  width: auto;             /* don’t force 100% */
  min-width: 10rem;        /* optional: consistent size */
  margin-top: .5rem;
}

.usa-alert--success .usa-alert__body {
  text-align: center;
}