/*
Theme Name: GeneratePress Child
Theme URI: https://quranguide.in
Description: Child Theme for GeneratePress
Author: Mariya
Template: generatepress
Version: 1.0
Text Domain: generatepress-child
*/

/* ===================================================
   QURANGUIDE BRAND COLORS
=================================================== */

:root{

    --primary:#0B5A4A;
    --primary-dark:#083E36;
    --gold:#D4A537;
    --gold-light:#E9C66A;
    --bg:#F8F8F5;
    --white:#ffffff;
    --border:#E7E4D9;
    --text:#2C2C2C;
    --muted:#6C756F;

}

/* ===================================================
   CATEGORY PAGE
=================================================== */

.qg-surahs-page{

    background:var(--bg);

    padding:70px 20px;

}

.qg-container{

    max-width:1250px;

    margin:auto;

}

.qg-header{

    text-align:center;

    margin-bottom:50px;

}

.qg-header h1{

    margin:0;

    font-size:44px;

    color:var(--primary);

    font-weight:700;

}

.qg-header p{

    margin-top:15px;

    color:var(--muted);

    font-size:18px;

}

/* ===================================================
   GRID
=================================================== */

.qg-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

}

/* ===================================================
   CARD
=================================================== */

.qg-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:var(--white);

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

    border-radius:18px;

    padding:22px;

    text-decoration:none;

    transition:.35s ease;

    box-shadow:0 10px 22px rgba(0,0,0,.05);

}

.qg-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

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

}

/* ===================================================
   NUMBER
=================================================== */

.qg-number{

    width:54px;

    height:54px;

    background:#F5F5F5;

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

    transform:rotate(45deg);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.qg-number span{

    transform:rotate(-45deg);

    color:var(--primary);

    font-weight:700;

    font-size:18px;

}

/* ===================================================
   INFO
=================================================== */

.qg-info{

    flex:1;

    padding:0 20px;

}

.qg-info h2{

    margin:0;

    font-size:22px;

    color:var(--primary-dark);

    font-weight:700;

}

.qg-eng{

    margin-top:6px;

    color:var(--muted);

    font-size:16px;

}

/* ===================================================
   ARABIC
=================================================== */

.qg-ar{

    direction:rtl;

    text-align:right;

    white-space:nowrap;

    color:var(--primary);

    font-size:28px;

    font-family:"Amiri","Noto Naskh Arabic","Scheherazade New",serif;

}

/* ===================================================
   RESPONSIVE
=================================================== */

@media(max-width:1024px){

    .qg-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .qg-header h1{

        font-size:32px;

    }

    .qg-header p{

        font-size:16px;

    }

    .qg-grid{

        grid-template-columns:1fr;

    }

    .qg-card{

        padding:18px;

    }

    .qg-number{

        width:46px;

        height:46px;

    }

    .qg-info{

        padding:0 15px;

    }

    .qg-info h2{

        font-size:20px;

    }

    .qg-eng{

        font-size:15px;

    }

    .qg-ar{

        font-size:22px;

    }

}