/* ============================================================
 * layout.css — Responsive container sizing for all pages
 *
 * Drop-in width overrides that make the site feel:
 *   - App-like on mobile (edge-to-edge, generous tap targets)
 *   - Comfortable on tablet (moderate widths)
 *   - Wide on desktop (uses available screen)
 *
 * This file only controls layout/widths. Colors, typography,
 * and component styling remain in style.css.
 *
 * Load AFTER style.css so the rules win naturally.
 * ============================================================ */

/* -----------------------------------------------------------
 * Base container — outermost wrapper
 * ----------------------------------------------------------- */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Narrow container — used inside pages that center forms or content */
.container-narrow {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* -----------------------------------------------------------
 * Mobile (phone) — up to 599px
 * Edge-to-edge feel; forms span full width of container.
 * ----------------------------------------------------------- */
@media (max-width: 599px) {
    .container,
    .container-narrow {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Larger tap targets on the form input and button */
    .shorten-form .form-input,
    .shorten-form .btn {
        min-height: 48px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Let the input row stack nicely on narrow screens if it wraps */
    .shorten-form .input-row {
        gap: 10px;
    }

    /* Admin dashboard table — allow horizontal scroll if needed */
    .table-wrap {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hero title size knock-down for small screens */
    .hero .hero-title {
        font-size: 32px;
        line-height: 1.15;
    }
}

/* -----------------------------------------------------------
 * Tablet — 600px to 899px
 * ----------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 899px) {
    .container {
        max-width: 720px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .container-narrow {
        max-width: 560px !important;
    }
}

/* -----------------------------------------------------------
 * Desktop — 900px to 1199px
 * ----------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
    .container {
        max-width: 880px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .container-narrow {
        max-width: 600px !important;
    }

    /* Hero title gets more room on desktop */
    .hero .hero-title {
        font-size: 52px;
    }
}

/* -----------------------------------------------------------
 * Large desktop — 1200px and up
 * Gives the dashboard table room to breathe; forms stay centered.
 * ----------------------------------------------------------- */
@media (min-width: 1200px) {
    .container {
        max-width: 1040px !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .container-narrow {
        max-width: 640px !important;
    }

    .hero .hero-title {
        font-size: 56px;
    }
}

/* -----------------------------------------------------------
 * Content-type-specific width caps
 * These apply at all screen sizes and constrain prose content.
 * ----------------------------------------------------------- */

/* Legal/long-form prose reads best at ~70ch, roughly 760px */
@media (min-width: 900px) {
    .terms-content {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -----------------------------------------------------------
 * Brand lockup — grows with screen size
 * ----------------------------------------------------------- */
@media (min-width: 900px) {
    .brand-lockup .brand-mark { width: 84px !important; }
    .brand-lockup .brand-name { font-size: 32px !important; }
    .brand-lockup .brand-tag  { font-size: 12px !important; }
}

/* -----------------------------------------------------------
 * FAQ accordion — wider on desktop so questions breathe
 * ----------------------------------------------------------- */
@media (min-width: 900px) {
    .faq-section {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* -----------------------------------------------------------
 * Footer — match container widths for alignment
 * ----------------------------------------------------------- */
.site-footer {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (max-width: 599px) {
    .site-footer {
        padding: 24px 16px 16px !important;
    }
}