/* =========================================================
   GLOBAL SAFE RESET
   ========================================================= */

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

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f4f4f4;
    overflow-x: hidden;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.container {
    width: 90%;
    max-width: 1200px;

    margin: 20px auto;
    padding: 25px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    border: 2px solid #0000FF;
    background-color: #ffffff;

    min-width: 0;
}


/* =========================================================
   MAIN PAGE WRAPPER
   ========================================================= */

.hk-wrapper {
    width: 100%;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    min-width: 0;
    box-sizing: border-box;
}

.section {
    width: 100%;
    max-width: 100%;

    min-width: 0;
    box-sizing: border-box;
}


/* =========================================================
   LEFT / RIGHT CONTENT
   ========================================================= */

.left,
.right {
    box-sizing: border-box;

    min-width: 0;
    max-width: 100%;
}

.left {
    overflow-wrap: break-word;
    word-break: normal;
}

.right {
    max-width: 100%;
}

.right img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   POETRY CONTENT
   ========================================================= */

.poem-content {
    width: 100%;
    max-width: 100%;

    line-height: 1.6;
    margin-bottom: 2em;

    min-width: 0;
}

.poem-content br {
    display: block;
    content: "";
    margin-top: 0;
}

.poem-content p {
    width: 100%;
    max-width: 100%;

    margin: 0 0 1.2em 0;

    overflow-wrap: break-word;
    word-break: normal;
}


/* =========================================================
   PRE / POETRY TEXT
   ========================================================= */

pre {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;

    overflow-x: auto;
}


/* =========================================================
   MEDIA
   ========================================================= */

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


/* =========================================================
   TABLES
   ========================================================= */

table {
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   AUTHOR SECTION
   ========================================================= */

.author-wrapper {
    display: flex;
    flex-wrap: wrap;

    gap: 30px;
    align-items: flex-start;

    width: 100%;
    max-width: 100%;

    margin-bottom: 20px;

    min-width: 0;
}

.author-bio {
    flex: 2 1 0;

    min-width: 0;
    max-width: 100%;

    overflow-wrap: break-word;
}

.author-image-box {
    flex: 1 1 0;

    min-width: 0;
    max-width: 100%;

    text-align: center;
}

.author-image-box img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin-left: auto;
    margin-right: auto;

    border-radius: 8px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3 {
    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
}

h1 {
    color: #0000FF;

    margin-top: 0;
    margin-bottom: 20px;
}

h2 {
    color: black !important;

    font-size: 1.3em;

    margin-top: 30px;
}

h3 {
    color: #2e8b57;
}


/* =========================================================
   LINKS
   ========================================================= */

.full a,
.list li a {
    color: #006400;

    text-decoration: none;
    font-weight: 700;

    overflow-wrap: break-word;
    word-break: normal;
}

.full a:hover,
.list li a:hover {
    color: #006400;
    text-decoration: underline;
}


/* =========================================================
   LISTS
   ========================================================= */

ul,
ol {
    width: auto;
    max-width: 100%;

    box-sizing: border-box;

    min-width: 0;

    /* IMPORTANT:
       Do not use overflow:hidden here */
    overflow: visible;
}

li {
    max-width: 100%;
    min-width: 0;

    overflow-wrap: break-word;
    word-break: normal;
}

li a {
    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
}


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

@media only screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       BLUE OUTER BOX
       ----------------------------------------------------- */

    .container {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);

        margin: 10px auto;
        padding: 15px;

        min-width: 0;

        border: 2px solid #0000FF;

        /* Do NOT hide content */
        overflow: visible;
    }


    /* -----------------------------------------------------
       CONTENT INSIDE CONTAINER
       ----------------------------------------------------- */

    .container > *,
    .container .hk-wrapper,
    .container .section,
    .container .left,
    .container .right,
    .container .author-wrapper,
    .container .author-bio,
    .container .author-image-box {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       MAIN WRAPPER
       ----------------------------------------------------- */

    .hk-wrapper {
        width: 100%;
        max-width: 100%;

        padding: 0;

        min-width: 0;

        /* Keep content visible */
        overflow: visible;
    }


    /* -----------------------------------------------------
       SECTION
       ----------------------------------------------------- */

    .section {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        gap: 15px;

        min-width: 0;

        overflow: visible;
    }


    /* -----------------------------------------------------
       LEFT / RIGHT
       ----------------------------------------------------- */

    .left,
    .right {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .left {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .right {
        text-align: center;
        min-width: 0;
    }

    .right img {
        display: inline-block;

        width: auto;
        max-width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       AUTHOR
       ----------------------------------------------------- */

    .author-wrapper {
        width: 100%;
        max-width: 100%;

        flex-direction: column-reverse;

        gap: 20px;

        min-width: 0;

        overflow: visible;
    }

    .author-bio,
    .author-image-box {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    /* -----------------------------------------------------
       LISTS — IMPORTANT FIX
       ----------------------------------------------------- */

    ul,
    ol {
        width: 100%;
        max-width: 100%;

        margin-top: 0;
        margin-bottom: 1em;

        /* Keep normal list indentation */
        margin-left: 0;
        padding-left: 25px;

        box-sizing: border-box;

        min-width: 0;

        /* NEVER hide list text */
        overflow: visible;
    }

    li {
        width: auto;
        max-width: 100%;

        min-width: 0;

        /* Normal wrapping */
        overflow-wrap: break-word;
        word-break: normal;

        padding-right: 2px;
    }

    li a {
        display: inline;

        max-width: 100%;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       POETRY
       ----------------------------------------------------- */

    .poem-content {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        overflow: visible;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .poem-content p {
        width: 100%;
        max-width: 100%;

        overflow-wrap: break-word;
        word-break: normal;
    }


    /* -----------------------------------------------------
       PRE
       ----------------------------------------------------- */

    pre {
        width: 100%;
        max-width: 100%;

        white-space: pre-wrap;

        overflow-wrap: break-word;
        word-break: break-word;

        overflow-x: auto;
    }


    /* -----------------------------------------------------
       MEDIA
       ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       TABLE
       ----------------------------------------------------- */

    table {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    h1,
    h2,
    h3,
    p,
    li,
    a {
        max-width: 100%;

        overflow-wrap: break-word;
        word-break: normal;
    }
}
/* =========================================================
   FINAL MOBILE LIST FIX
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* Main blue bordered box */
    .container {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;

        padding: 15px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* Keep all direct content inside the blue box */
    .container > *,
    .container .hk-wrapper,
    .container .section,
    .container .left,
    .container .right {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LIST BOX
       ===================================================== */

    ul,
    ol {
        display: block !important;

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

        box-sizing: border-box !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 24px !important;
        padding-right: 0 !important;

        min-width: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       LIST ITEMS
       ===================================================== */

    li {
        display: list-item !important;

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

        min-width: 0 !important;

        box-sizing: border-box !important;

        /* This is important for long Hindi/English titles */
        overflow-wrap: anywhere !important;
        word-break: break-word !important;

        white-space: normal !important;

        padding-right: 2px !important;
    }


    /* =====================================================
       LINKS INSIDE LIST
       ===================================================== */

    li a,
    .list li a {
        display: inline !important;

        max-width: 100% !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       IF LIST IS INSIDE A BOX
       ===================================================== */

    .list,
    .poem-list,
    .category-list {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* Grid lists must never create an oversized column */
    .poem-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }


    /* Flex lists */
    .category-list {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .category-list li {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =====================================================
       TEXT INSIDE THE LIST
       ===================================================== */

    .list p,
    .list span,
    .list strong,
    .list b {
        max-width: 100% !important;

        min-width: 0 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}