/* =========================================================
   Skåne Tamil Sangam
   Shared responsive styles
   Mobile / Tablet / Desktop
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

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

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.table-responsive,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}


/* ---------------------------------------------------------
   COMMON CONTAINERS
   --------------------------------------------------------- */

.container,
.wrap,
.content,
.card {
    max-width: 100%;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       PAGE
       ----------------------------------------------------- */

    body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .wrap,
    .container,
    .content {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* -----------------------------------------------------
       FLEX / FORM SPACING
       ----------------------------------------------------- */

    .top,
    .form,
    .actions,
    .filters,
    .button-group {
        gap: 10px !important;
    }


    /* -----------------------------------------------------
       NORMAL FORM INPUTS

       IMPORTANT:
       Checkboxes and radio buttons are intentionally excluded.
       ----------------------------------------------------- */

    .filters input:not([type="checkbox"]):not([type="radio"]),
    .filters select,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-width: 0 !important;
        width: 100% !important;
    }


    /* -----------------------------------------------------
       CHECKBOXES / RADIO BUTTONS

       Do NOT allow the generic mobile input rule to make
       these controls 100% wide.
       ----------------------------------------------------- */

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;

        flex: 0 0 22px !important;

        margin: 2px 0 0 0 !important;
        padding: 0 !important;

        cursor: pointer;
    }


    /* -----------------------------------------------------
       FORM FIELDS
       ----------------------------------------------------- */

    .form>.field {
        flex: 1 1 100% !important;
    }

    .field {
        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       CONSENT / CHECKBOX LABELS

       Handles common checkbox layouts such as:

       [ ] I consent to Skåne Tamil Sangam...
           continued text...
       ----------------------------------------------------- */

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 12px !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;

        line-height: 1.45 !important;
    }


    /* Allow text inside checkbox labels to wrap */

    label:has(input[type="checkbox"]) span,
    label:has(input[type="radio"]) span {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    button,
    .btn,
    a.btn {
        min-height: 44px;
        white-space: normal;
    }


    /* -----------------------------------------------------
       HEADINGS
       ----------------------------------------------------- */

    h1 {
        font-size: clamp(1.55rem,
                7vw,
                2.15rem) !important;

        line-height: 1.15;
    }

    h2 {
        font-size: clamp(1.25rem,
                5.5vw,
                1.7rem) !important;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .card {
        padding: 14px !important;
        border-radius: 12px !important;
    }


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    table {
        display: block;
        width: 100%;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       MODALS / LOGIN
       ----------------------------------------------------- */

    .modal,
    .modal-content,
    .login-card {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    .nav-links,
    .navbar-nav {
        flex-wrap: wrap !important;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero {
        min-height: auto !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   320px - 480px
   ========================================================= */

@media (max-width: 480px) {

    body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card {
        padding: 12px !important;
    }

    /*
     * Keep checkbox comfortably sized while leaving
     * maximum space for consent text.
     */

    input[type="checkbox"],
    input[type="radio"] {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;

        flex-basis: 21px !important;
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        gap: 10px !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    .wrap,
    .container {
        max-width: calc(100% - 32px) !important;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}