/* =========================================================
   SOCIOEDUCATIONS - GLOBAL RESPONSIVE SYSTEM
   Version: 1.0.0
   Desktop | Laptop | Tablet | Mobile
========================================================= */

/* ---------- Global Safety ---------- */

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

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

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

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img {
    height: auto;
}

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

.site,
#page,
#content,
.site-content,
.site-main,
.content-area,
.widget-area {
    min-width: 0;
    max-width: 100%;
}

.site-main {
    overflow-wrap: break-word;
}

.wp-block-image img,
.wp-post-image {
    max-width: 100%;
    height: auto;
}

/* ---------- GeneratePress Layout Safety ---------- */

.grid-container {
    width: 100%;
    max-width: 100%;
}

.one-container .site-content,
.separate-containers .site-content {
    min-width: 0;
}

.inside-article,
.inside-page,
.widget {
    min-width: 0;
}

.entry-content > *,
.entry-summary > * {
    max-width: 100%;
}

/* ---------- Responsive Embeds ---------- */

.wp-block-embed,
.wp-block-video,
.wp-block-audio,
.wp-block-table {
    max-width: 100%;
}

.wp-block-embed iframe,
.wp-block-video video {
    width: 100%;
    max-width: 100%;
}

/* ---------- Responsive Tables ---------- */

.entry-content table,
.site-main table {
    max-width: 100%;
}

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

@media (max-width: 767px) {

    .entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .se-header-container,
    .se-home-container,
    .se-single-container,
    .se-archive-container {
        max-width: 1240px;
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .se-header-container,
    .se-home-container,
    .se-single-container,
    .se-archive-container {
        max-width: 100%;
    }

    .se-home-premium {
        padding-right: 16px;
        padding-left: 16px;
    }
}

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

@media (max-width: 1024px) {

    .se-single-layout,
    .se-archive-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 18px;
    }

    .se-home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .se-home-hero {
        gap: 18px;
    }

    .se-home-featured-content {
        padding: 20px;
    }

    .se-home-featured-content h1 {
        font-size: 27px;
    }

    .se-desktop-nav .se-nav-list {
        gap: 16px;
    }
}

/* =========================================================
   MOBILE - 767px
========================================================= */

@media (max-width: 767px) {

    /* Global width correction */

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

    #page,
    #content,
    .site,
    .site-content,
    .site-main,
    .content-area,
    .inside-article,
    .inside-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .site-content {
        display: block;
        margin: 0;
    }

    /* GeneratePress desktop layout reset */

    .separate-containers .site-main,
    .one-container .site-main {
        margin: 0;
    }

    .separate-containers .inside-article,
    .separate-containers .inside-page {
        margin: 0;
    }

    .content-area,
    .site-main,
    .widget-area {
        float: none;
    }

    /* Header */

    .se-site-header {
        width: 100%;
        max-width: 100%;
    }

    .se-header-container {
        width: 100%;
        max-width: 100%;
        padding-right: 14px;
        padding-left: 14px;
    }

    .se-desktop-nav {
        display: none;
    }

    .se-mobile-controls {
        display: flex;
        align-items: center;
    }

    /* Homepage */

    .se-home-premium {
        width: 100%;
        max-width: 100%;
        padding: 14px 0 35px;
    }

    .se-home-container {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .se-home-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .se-home-featured {
        width: 100%;
        min-width: 0;
    }

    .se-home-featured-image {
        aspect-ratio: 16 / 9;
    }

    .se-home-featured-content {
        padding: 15px;
    }

    .se-home-featured-content h1 {
        font-size: 23px;
        line-height: 1.4;
    }

    .se-home-latest {
        width: 100%;
        min-width: 0;
    }

    .se-home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .se-home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    /* Single article */

    .se-single-page {
        width: 100%;
        max-width: 100%;
        padding: 12px 0 30px;
    }

    .se-single-container {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .se-single-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 20px;
    }

    .se-single-article {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .se-single-sidebar {
        width: 100%;
        max-width: 100%;
    }

    /* Archives */

    .se-archive-page {
        width: 100%;
        max-width: 100%;
        padding: 14px 0 35px;
    }

    .se-archive-container {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .se-archive-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 20px;
    }

    .se-archive-main,
    .se-archive-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .se-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Footer */

    .se-site-footer,
    .site-footer {
        width: 100%;
        max-width: 100%;
    }

    /* Typography */

    h1,
    h2,
    h3,
    h4,
    p {
        overflow-wrap: break-word;
    }

    /* Buttons and links */

    button,
    .button,
    input[type="submit"] {
        min-height: 40px;
    }

    a {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =========================================================
   SMALL MOBILE - 480px
========================================================= */

@media (max-width: 480px) {

    .se-header-container {
        padding-right: 11px;
        padding-left: 11px;
    }

    .se-home-container,
    .se-archive-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .se-home-card-grid,
    .se-archive-grid {
        gap: 9px;
    }

    .se-home-category-grid {
        gap: 8px;
    }

    .se-home-card-content,
    .se-archive-card-content {
        padding: 10px;
    }

    .se-single-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .se-single-article {
        padding: 14px 12px;
    }
}

/* =========================================================
   EXTRA SMALL MOBILE - 360px
========================================================= */

@media (max-width: 360px) {

    .se-home-container,
    .se-archive-container,
    .se-single-container {
        padding-right: 8px;
        padding-left: 8px;
    }

    .se-home-card-grid,
    .se-archive-grid {
        gap: 7px;
    }

    .se-home-card-content,
    .se-archive-card-content {
        padding: 8px;
    }

    .se-home-card-title,
    .se-archive-card-title {
        font-size: 12px;
    }

    .se-single-article {
        padding: 12px 10px;
    }
}

/* =========================================================
   ACCESSIBILITY & MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}