/**************************************************************************

SaraDharma Community

Version : 1.0

File : common.css

Purpose

Reusable UI components used throughout the website.

**************************************************************************/
/**************************************************************************
COMMON HEADER
**************************************************************************/

.site-header{

    background:#fffdf8;

    border-bottom:1px solid #eadfc8;

}

.header-container{

    max-width:1300px;

    margin:auto;

    padding:18px 20px;

    display:flex;

    align-items:center;

    gap:20px;

}

.logo-link{

    text-decoration:none;

}

.site-logo{

    width:90px;

    height:auto;

}

.site-title{

    flex:1;

}

.site-title h1{

    margin:0;

    color:#0d4b2f;

    font-size:46px;

    font-family:Georgia,serif;

}

.site-tagline{

    margin-top:8px;

    letter-spacing:4px;

    color:#7a5a22;

    font-size:18px;

}

.site-subtitle{

    margin-top:8px;

    color:#666;

    font-size:16px;

}

@media(max-width:768px){

.header-container{

    flex-direction:column;

    text-align:center;

}

.site-logo{

    width:70px;

}

.site-title h1{

    font-size:34px;

}

.site-tagline{

    letter-spacing:2px;

    font-size:15px;

}

.site-subtitle{

    font-size:14px;

}

}

/*************************************************************
CONTAINER
*************************************************************/

.container{

    width:min(1100px,92%);

    margin:auto;

}



/*************************************************************
PAGE CARD
*************************************************************/

.page-card{

    background:#ffffff;

    padding:35px;

    margin:30px 0;

    border-radius:12px;

    box-shadow:0 4px 18px rgba(0,0,0,.08);

}



/*************************************************************
HEADINGS
*************************************************************/

.page-card h2{

    color:var(--primary);

    margin-top:0;

    margin-bottom:20px;

}

.page-card h3{

    margin-top:0;

}



/*************************************************************
FORM GRID
*************************************************************/

.form-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:22px;

}



/*************************************************************
FULL WIDTH
*************************************************************/

.full-width{

    grid-column:1/-1;

}



/*************************************************************
LABELS
*************************************************************/

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}



/*************************************************************
TEXT INPUTS
*************************************************************/

input,

select,

textarea{

    width:100%;

    padding:12px;

    border:1px solid #cccccc;

    border-radius:6px;

    font-size:15px;

    box-sizing:border-box;

}



input:focus,

select:focus,

textarea:focus{

    border-color:var(--primary);

    outline:none;

}



/*************************************************************
READ ONLY
*************************************************************/

input[readonly]{

    background:#f8f8f8;

    font-weight:bold;

}



/*************************************************************
TEXTAREA
*************************************************************/

textarea{

    resize:vertical;

}



/*************************************************************
BUTTONS
*************************************************************/

.button-row{

    display:flex;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}



.primary-button{

    background:var(--primary);

    color:white;

    border:none;

    padding:14px 28px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}



.primary-button:hover{

    background:#995617;

}



.secondary-button{

    background:white;

    color:var(--primary);

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

    padding:14px 28px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}



.secondary-button:hover{

    background:#f4f4f4;

}



/*************************************************************
CHECKBOX ROW
*************************************************************/

.checkbox-row{

    margin-top:25px;

}



/*************************************************************
SUMMARY GRID
*************************************************************/

.summary-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}



/*************************************************************
SUCCESS DIALOG
*************************************************************/

.success-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



.success-dialog{

    width:420px;

    max-width:92%;

    background:white;

    padding:35px;

    border-radius:14px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.25);

    animation:popup .35s ease;

}



.success-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#4CAF50;

    color:white;

    font-size:52px;

    line-height:90px;

}



.success-reference{

    margin:25px 0;

    background:#f8f8f8;

    padding:18px;

    border-radius:8px;

}



.success-close{

    margin-top:15px;

    padding:12px 30px;

    border:none;

    border-radius:6px;

    background:var(--primary);

    color:white;

    cursor:pointer;

}



.success-close:hover{

    background:#995617;

}



/*************************************************************
COMING SOON
*************************************************************/

.coming-soon{

    text-align:center;

    padding:50px;

    border:2px dashed #cccccc;

    border-radius:10px;

}



.coming-icon{

    font-size:48px;

    margin-bottom:15px;

}


/**************************************************************************
Navigation Brand
**************************************************************************/

.main-nav{

    display:flex;

    align-items:center;

    min-height:72px;

    justify-content:space-between;

    padding:0 18px;
    gap:8px;

}

.main-nav .nav-menu{

    display:flex;

    align-items:center;

    flex:1;

    justify-content:flex-end;

    width:100%;

    list-style:none;

    margin:0;

    padding:0;
    gap:8px;
}

.nav-brand{

    margin-right:24px;

    flex-shrink:0;
    list-style:none;

}

.nav-brand a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    white-space:nowrap;

}


/* ==========================================================
   NAVIGATION BRAND
   SaraDharma Home must blend with the navigation bar
   ========================================================== */

.main-nav .nav-brand a,
.main-nav .nav-brand a.active,
.main-nav .nav-brand a:hover,
.main-nav .nav-brand a:focus{
    background:transparent !important;
    color:#ffffff !important;
    transform:none !important;
}

.nav-logo{

    width:38px;

    height:38px;

    object-fit:contain;

}

.nav-title{

    color:#ffffff;

    font-size:2rem;

    font-weight:700;
    
    line-height:1;

    white-space:nowrap;

    letter-spacing:.5px;


}


/**************************************************************************
Dropdown Menu
**************************************************************************/

.main-nav .dropdown{

    position:relative;

}

.main-nav .dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    margin:0;

    padding:10px 0;

    list-style:none;

    background:#ffffff;

    border-radius:0 0 10px 10px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    z-index:999;

}

.main-nav .dropdown-menu li{

    width:100%;

}

.main-nav .dropdown-menu a{

    display:block;

    padding:12px 20px;

    color:#333;

    text-decoration:none;

    white-space:nowrap;

}

.main-nav .dropdown-menu a:hover{

    background:#f7efe4;

    color:var(--primary);

}

.main-nav .dropdown:hover .dropdown-menu{

    display:block;

}

/**************************************************************************
Donation Cards
**************************************************************************/

.selection-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

    margin-top:30px;

}

.selection-card{

    background:#ffffff;

    border:2px solid #eadfc8;

    border-radius:12px;

    padding:25px;

    cursor:pointer;

    transition:.25s;

    text-align:center;

}

.selection-card:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.selection-icon{

    font-size:42px;

    margin-bottom:15px;

}

.selection-amount{

    margin-top:20px;

    font-size:22px;

    font-weight:700;

    color:var(--primary);

}

/**************************************************************************
Payment
**************************************************************************/

.payment-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

    margin-top:25px;

}

.payment-card{

    background:#fafafa;

    border:1px solid #dddddd;

    border-radius:10px;

    padding:25px;

}

.upi-qr{

    width:220px;

    max-width:100%;

    display:block;

    margin:20px auto;

}

.payment-note{

    color:#666;

    font-size:.9rem;

}




/*************************************************************
HELP GRID
*************************************************************/

.help-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}



.help-item{

    padding:20px;

    background:#fafafa;

    border-radius:8px;

}



/*************************************************************
ANIMATION
*************************************************************/

@keyframes popup{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}



/*************************************************************
RESPONSIVE
*************************************************************/

@media(max-width:768px){

.button-row{

    flex-direction:column;

}

.primary-button,

.secondary-button{

    width:100%;

}

.page-card{

    padding:25px;

}

}


.main-nav .dropdown.current > a{

    background:#8A5415;

    color:#ffffff;

}

/**************************************************************************
DONATION SELECTION
**************************************************************************/

.selection-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

    margin-top:30px;

}

.selection-card{

    background:#ffffff;

    border:2px solid #eadfc8;

    border-radius:12px;

    padding:25px;

    cursor:pointer;

    transition:all .25s ease;

    text-align:center;

    box-shadow:0 4px 14px rgba(0,0,0,.08);

}

.selection-card:hover{

    border-color:var(--primary);

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,.15);

}

.selection-icon{

    font-size:42px;

    margin-bottom:15px;

}

.selection-card h3{

    margin:10px 0;

    color:var(--primary);

}

.selection-card p{

    min-height:70px;

    line-height:1.6;

    color:#555;

}

.selection-amount{

    margin-top:18px;

    font-size:24px;

    font-weight:700;

    color:var(--primary);

}



/**************************************************************************
DONATION PAYMENT
**************************************************************************/

.payment-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

    margin-top:25px;

}

.payment-card{

    background:#fafafa;

    border:1px solid #dddddd;

    border-radius:12px;

    padding:25px;

    text-align:center;

}

.payment-card h3{

    margin-top:0;

    color:var(--primary);

}

.upi-qr{

    width:220px;

    max-width:100%;

    display:block;

    margin:20px auto;

    border-radius:10px;

}

.payment-note{

    margin-top:15px;

    color:#777;

    font-size:.90rem;

    font-style:italic;

}



/**************************************************************************
DONATION FORM
**************************************************************************/

.form-row{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:22px;

    margin-bottom:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group small{

    margin-top:6px;

    color:#777;

    font-size:.85rem;

}



/**************************************************************************
RESPONSIVE
**************************************************************************/

@media(max-width:768px){

    .selection-grid{

        grid-template-columns:1fr;

    }

    .payment-grid{

        grid-template-columns:1fr;

    }

}



/**************************************************************************
COMMON FOOTER
**************************************************************************/

/* ==========================================================
Footer
========================================================== */

.site-footer{

    background:#3f2b1d;

    color:#ffffff;

    padding:24px 20px 12px;

}

.footer-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

}

.footer-logo img{

    height:64px;

}

.footer-item{

    flex:1;

    min-width:180px;

    text-align:center;

    line-height:1.6;

    font-size:15px;

}

.footer-item strong{

    color:#f4d27a;

    font-size:16px;

}

.footer-copyright{

    margin-top:20px;

    padding-top:15px;

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

    text-align:center;

    font-size:13px;

    color:#dddddd;

}

@media(max-width:768px){

.footer-container{

    text-align:center;

}

}


/* ==========================================================
   SaraDharma - FINAL RESPONSIVE NAVIGATION FIX
   ========================================================== */

.main-nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: 0 8px;
}

.main-nav > ul {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* SaraDharma Home */
.main-nav .nav-brand {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

.main-nav .nav-brand a {
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 8px;
}

/* Remove logo from navigation */
.main-nav .nav-logo {
    display: none;
}

/* Smaller SaraDharma Home */
.main-nav .nav-title {
    display: block;
    font-size: clamp(0.85rem, 1.15vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
}

/* All navigation items */
.main-nav > ul > li:not(.nav-brand) {
    flex: 0 1 auto;
    min-width: 0;
}

.main-nav > ul > li > a {
    display: block;
    padding: clamp(9px, 1vw, 16px) clamp(5px, 1vw, 15px);
    font-size: clamp(0.72rem, 0.9vw, 0.95rem);
    white-space: nowrap;
    box-sizing: border-box;
}


/* ==========================================================
   1200px and below
   ========================================================== */

@media (max-width: 1200px) {

    .main-nav {
        padding: 0 5px;
    }

    .main-nav .nav-title {
        font-size: 1rem;
    }

    .main-nav > ul > li > a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.82rem;
    }
}


/* ==========================================================
   1000px and below
   ========================================================== */

@media (max-width: 1000px) {

    .main-nav .nav-title {
        font-size: 0.9rem;
    }

    .main-nav > ul > li > a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 0.76rem;
    }
}


/* ==========================================================
   850px and below
   ========================================================== */

@media (max-width: 850px) {

    .main-nav > ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .main-nav .nav-brand {
        width: 100%;
        flex-basis: 100%;
        text-align: center;
    }

    .main-nav .nav-brand a {
        justify-content: center;
    }

    .main-nav > ul > li:not(.nav-brand) > a {
        padding: 8px 7px;
        font-size: 0.78rem;
    }
}


/* ==========================================================
   700px and below
   ========================================================== */

@media (max-width: 700px) {

    .main-nav > ul {
        flex-wrap: wrap;
    }

    .main-nav > ul > li:not(.nav-brand) {
        flex: 0 0 auto;
    }

    .main-nav > ul > li > a {
        padding: 7px 8px;
        font-size: 0.75rem;
    }
}