/* =========================================================
   GLOBAL CSS
   Public Website — PSM Usahid Voice
   ========================================================= */


/* =========================================================
   GLOBAL VARIABLES
========================================================= */

:root{
    --bg-dark:#12100E;
    --bg-surface:#1D1916;
    --bg-footer:#0D0C0B;

    --maroon:#4b000a;
    --maroon-light:#650210;

    --gold:#C7A13C;
    --gold-light:#E7C96D;

    --white:#F5EFE6;
    --text:#C7C0B7;

    --border:#43362D;
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', sans-serif;
    background:var(--bg-dark);
    color:var(--text);
    overflow-x:hidden;
}

a{
    transition:.3s ease;
}

img{
    max-width:100%;
    display:block;
    transition:.5s ease;
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3{
    font-family:'Cormorant Garamond', serif;
}

.section-padding{
    padding:50px 0;
}

.section-header{
    max-width:750px;
    margin:0 auto;
}

.section-subtitle{
    display:inline-block;

    color:var(--gold);

    font-size:.85rem;
    letter-spacing:4px;
    text-transform:uppercase;

    margin-bottom:15px;
}

.section-title{
    color:var(--white);

    font-family:'Cormorant Garamond', serif;
    font-size:3rem;

    margin-top:15px;
    margin-bottom:25px;
}

.section-description{
    color:var(--text);

    line-height:1.8;
    margin-bottom:18px;
}


/* =========================================================
   GLOBAL BUTTON
========================================================= */

.btn{
    transition:.3s ease;
}



/* =========================================================
   PUBLIC BREADCRUMB
========================================================= */

.public-breadcrumb{
    position:relative;

    width:100%;

    padding:14px 0;

    background:
        linear-gradient(
            135deg,
            #1D1916 0%,
            #2A151B 100%
        );

    border-bottom:1px solid var(--border);

    z-index:10;

    margin-top:80px;
}


/* Container */

.public-breadcrumb .container{
    display:flex;
    align-items:center;
}


/* Breadcrumb */

.public-breadcrumb .breadcrumb{
    margin:0;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:4px;

    font-size:.9rem;
    line-height:1.5;
}


/* Item */

.public-breadcrumb .breadcrumb-item{
    display:flex;
    align-items:center;

    min-width:0;

    max-width:100%;
}


/* Link */

.public-breadcrumb .breadcrumb-item a{
    color:var(--text);

    text-decoration:none;

    transition:.3s ease;
}

.public-breadcrumb .breadcrumb-item a:hover{
    color:var(--gold);
}


/* Active */

.public-breadcrumb .breadcrumb-item.active{
    color:var(--gold);

    font-weight:500;

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

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


/* Separator */

.public-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:rgba(245,239,230,.35);

    padding-right:8px;
}


/* Icon */

.public-breadcrumb i{
    font-size:.7rem;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    padding:18px 0;

    background:transparent;

    transition:.35s ease;

    z-index:999;
}

.navbar.scrolled{
    background:#0D0C0B;

    box-shadow:0 5px 20px rgba(0,0,0,.3);
}


/* Logo */

.navbar-brand{
    font-family:'Cinzel', serif;

    font-size:1.8rem;
    font-weight:700;

    letter-spacing:2px;
}

.logo-usahid{
    color:var(--gold);
}

.logo-voice{
    color:var(--white);
}

.navbar-logo{
    width:50px;
    height:50px;
}


/* Menu */

.navbar-nav{
    gap:12px;
}

.nav-link{
    position:relative;

    color:var(--white);

    font-weight:500;

    transition:.3s ease;
}

.nav-link:hover{
    color:var(--gold);
}

.nav-link::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:#751C2A;

    transition:.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}

.nav-link.active{
    color:var(--gold) !important;
}


/* Navbar Buttons */

.btn-register{
    background:#751C2A;
    color:#fff;

    border-radius:50px;

    padding:10px 22px;

    transition:.3s ease;
}

.btn-register:hover{
    background:#92273A;
    color:#fff;
}

.btn-login{
    border:1px solid var(--gold);
    color:var(--gold);

    border-radius:50px;

    padding:10px 22px;

    transition:.3s ease;
}

.btn-login:hover{
    background:var(--gold);
    color:var(--bg-dark);
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
    background:var(--bg-footer);

    padding:80px 0 30px;

    border-top:1px solid rgba(199,161,60,.15);
}


/* Logo */

.footer-logo{
    font-family:'Cinzel', serif;

    font-size:2rem;
    font-weight:700;

    letter-spacing:3px;

    color:var(--white);

    text-decoration:none;
}

.footer-logo span{
    color:var(--gold);
}


/* Description */

.footer-desc{
    max-width:350px;

    color:#BFAF9D;

    line-height:1.8;

    margin:25px 0;
}


/* Social */

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#751C2A;
    color:#fff;

    text-decoration:none;

    transition:.3s ease;
}

.footer-social a:hover{
    background:var(--gold);
    color:var(--bg-dark);
}


/* Footer Heading */

.footer h5{
    color:var(--white);

    font-family:'Cormorant Garamond', serif;
    font-size:1.5rem;

    margin-bottom:25px;
}


/* Footer List */

.footer ul{
    list-style:none;

    padding:0;
}

.footer ul li{
    margin-bottom:7px;

    color:#BFAF9D;
}

.footer ul li a{
    color:#BFAF9D;

    text-decoration:none;

    transition:.3s ease;
}

.footer ul li a:hover{
    color:var(--gold);
}


/* Footer Contact */

.footer-contact i{
    color:var(--gold);

    margin-right:10px;
}


/* Footer Button */

.footer-btn{
    display:inline-block;

    margin-top:15px;

    padding:12px 25px;

    border-radius:50px;

    background:#751C2A;
    color:#fff;

    text-decoration:none;

    transition:.3s ease;
}

.footer-btn:hover{
    background:#92283B;
    color:#fff;
}


/* Footer Bottom */

.footer-bottom{
    display:flex;
    justify-content:space-between;

    margin-top:60px;
    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    color:#918679;

    font-size:.9rem;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{
    display:flex;

    gap:8px;
}

.pagination .page-item{
    margin:0 3px;
}

.pagination .page-link{
    width:46px;
    min-width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border-radius:999px !important;

    background:var(--bg-surface);

    border:1px solid var(--border);

    color:var(--white);

    font-weight:600;

    transition:.3s ease;
}

.pagination .page-link:hover{
    background:var(--gold);

    color:var(--bg-dark);

    border-color:var(--gold);
}

.pagination .page-item.active .page-link{
    background:var(--gold);

    color:var(--bg-dark);

    border-color:var(--gold);

    box-shadow:
        0 0 18px rgba(199,161,60,.35);
}

.pagination .page-item.disabled .page-link{
    background:var(--bg-dark);

    border-color:var(--border);

    color:rgba(245,239,230,.35);
}


/* Pagination Navigation */

.pagination nav,
nav[role="navigation"]{
    display:flex;

    flex-direction:column-reverse;
    align-items:center;

    gap:18px;
}

.pagination + div,
.text-muted{
    color:var(--text) !important;
}


/* Pagination Info */

.pagination-info{
    margin-bottom:0;

    font-size:.8rem !important;
    line-height:1.4;
}


/* =========================================================
   RESPONSIVE — TABLET
   max-width: 991.98px
========================================================= */

@media (max-width:991.98px){

    /* Global */

    .section-padding{
        padding:70px 0;
    }

    .section-title{
        font-size:3rem;
    }

    .section-description{
        font-size:.95rem;
    }


    /* Navbar */

    .navbar{
        padding:14px 0;
    }

    .navbar-brand{
        font-size:1.5rem;
    }

    .navbar-logo{
        width:45px;
        height:45px;
    }

    .navbar-collapse{
        margin-top:15px;

        padding:20px;

        background:rgba(18,16,14,.98);

        border-radius:15px;
    }

    .navbar-nav{
        gap:3px;
    }

    .nav-link{
        padding:10px 5px;
    }

    .navbar .d-flex{
        margin-top:15px;

        gap:10px;

        flex-wrap:wrap;
    }


    /* Breadcrumb */

    .public-breadcrumb{
        margin-top:70px;

        padding:12px 0;
    }

    .public-breadcrumb .breadcrumb{
        font-size:.7rem;
    }


    /* Footer */

    .footer-bottom{
        flex-direction:column;

        gap:10px;

        text-align:center;
    }


    /* Pagination */

    .pagination{
        flex-wrap:nowrap;

        justify-content:center;
        align-items:center;

        gap:5px;
    }

    .pagination .page-item{
        display:block;

        flex:0 0 auto;

        margin:0 1px;
    }

    .pagination .page-link{
        width:42px;
        min-width:42px;
        height:42px;

        font-size:.8rem;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   max-width: 767.98px
========================================================= */

@media (max-width:767.98px){

    /* Global */

    body{
        overflow-x:hidden;
    }

    .section-padding{
        padding:60px 0;
    }

    .section-header{
        padding:0 15px;
    }

    .section-subtitle{
        font-size:.7rem;

        letter-spacing:4px;

        margin-bottom:12px;
    }

    .section-title{
        font-size:2.5rem;

        line-height:1.1;
    }

    .section-description{
        font-size:.9rem;

        line-height:1.8;
    }


    /* Navbar */

    .navbar{
        padding:12px 0;
    }

    .navbar-brand{
        font-size:1.25rem;

        letter-spacing:1px;
    }

    .navbar-logo{
        width:40px;
        height:40px;
    }

    .navbar-toggler{
        border:1px solid rgba(199,161,60,.5);

        padding:7px 9px;
    }

    .navbar-toggler:focus{
        box-shadow:
            0 0 0 .15rem rgba(199,161,60,.2);
    }

    .navbar-collapse{
        margin-top:12px;

        padding:18px;

        border-radius:12px;
    }

    .nav-link{
        padding:9px 5px;

        font-size:.95rem;
    }

    .navbar .d-flex{
        margin-top:12px;

        display:flex;
        flex-direction:column;

        width:100%;

        gap:8px;
    }

    .navbar .d-flex .btn-register,
    .navbar .d-flex .btn-login,
    .navbar .d-flex .btn-user{
        width:100%;

        text-align:center;
    }


    /* Breadcrumb */

    .public-breadcrumb{
        margin-top:65px;

        padding:10px 0;
    }

    .public-breadcrumb .container{
        padding-left:18px;
        padding-right:18px;
    }

    .public-breadcrumb .breadcrumb{
        width:100%;

        font-size:.65rem;

        gap:2px;

        white-space:normal;

        overflow:visible;
    }

    .public-breadcrumb .breadcrumb-item{
        min-width:0;
        max-width:100%;

        white-space:normal;
    }

    .public-breadcrumb .breadcrumb-item.active{
        max-width:100%;

        white-space:normal;

        overflow:visible;

        text-overflow:unset;

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

        line-height:1.5;
    }

    .public-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
        padding-right:5px;
    }

    .public-breadcrumb i{
        font-size:.6rem;
    }


    /* Footer */

    .footer .container{
        width:350px;
        max-width:100%;
    }

    .footer h5{
        font-size:1.3rem;

        margin-bottom:18px;
    }

    .footer ul li{
        font-size:.85rem;
    }

    .footer-contact i{
        margin-right:5px;
    }

    .footer-btn{
        padding:10px 20px;

        font-size:.85rem;
    }

    .footer-bottom{
        margin-top:40px;

        padding-top:20px;

        font-size:.75rem;
    }


    /* Pagination */

    nav[role="navigation"]{
        width:100%;

        overflow:hidden;

        gap:10px;
    }

    /* Laravel desktop pagination */

    nav[role="navigation"] .d-none.d-sm-flex{
        display:flex !important;

        width:100%;
    }

    /* Hide Laravel mobile pagination */

    nav[role="navigation"] .d-sm-none{
        display:none !important;
    }

    .pagination{
        width:100%;

        display:flex;

        flex-wrap:nowrap;

        justify-content:center;
        align-items:center;

        gap:3px;

        white-space:nowrap;
    }

    .pagination .page-item{
        display:block !important;

        flex:0 0 auto;

        margin:0 !important;
    }

    .pagination .page-link{
        width:34px !important;
        min-width:34px !important;
        height:34px !important;

        font-size:.7rem;

        line-height:1;
    }

    .pagination-info{
        font-size:.68rem !important;

        line-height:1.3;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   max-width: 575.98px
========================================================= */

@media (max-width:575.98px){

    /* Global */

    .section-padding{
        padding:50px 0;
    }

    .section-title{
        font-size:2.1rem;
    }


    /* Navbar */

    .navbar-brand{
        font-size:1.5rem;
    }

    .navbar-logo{
        width:35px;
        height:35px;
    }

    .navbar-collapse{
        padding:15px;
    }


    /* Breadcrumb */

    .public-breadcrumb{
        margin-top:60px;

        padding:9px 0;
    }

    .public-breadcrumb .container{
        padding-left:15px;
        padding-right:15px;
    }

    .public-breadcrumb .breadcrumb{
        font-size:.6rem;

        line-height:1.5;

        gap:1px;
    }

    .public-breadcrumb .breadcrumb-item.active{
        line-height:1.5;
    }


    /* Footer */

    .footer-bottom{
        font-size:.7rem;
    }

    .footer-logo{
        font-size:1.5rem;
    }

    .footer-desc{
        font-size:.85rem;

        margin:0;
    }


    /* Pagination */

    .pagination{
        gap:2px;
    }

    .pagination .page-link{
        width:32px !important;
        min-width:32px !important;
        height:32px !important;

        font-size:.68rem;
    }

    .pagination-info{
        font-size:.7rem !important;
    }
}