/*
Theme Name: Zahuri
Theme URI: 
Author: Jamiluddin Morris Zahuri
Author URI: 
Description: Custom theme for The Zahuri Sufi Website
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: zahuri
Tags: 
*/
/* ==========================================================
   ZAHURI DESIGN SYSTEM v2
   Foundation + Layout + Typography
========================================================== */

/* ---------- Brand Colors ---------- */

:root{

    --zahuri-blue:#162d63;
    --zahuri-blue-dark:#0f214a;
    --zahuri-gold:#c8a24a;
    --zahuri-gold-light:#e2c67c;

    --zahuri-cream:#f6f1e4;

    --zahuri-text:#222222;
    --zahuri-text-light:#666666;

    --zahuri-content-width:1100px;
    --zahuri-wide-width:1400px;

}


/* ---------- Reset ---------- */

*,
*::before,
*::after{

    box-sizing:border-box;

}


/* ---------- Page ---------- */

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:#ffffff;

    color:var(--zahuri-text);

    font-family:Georgia,"Times New Roman",serif;

    font-size:18px;

    line-height:1.75;

}


/* ---------- Global Layout ---------- */

.wp-site-blocks{

    width:100%;

}


.wp-block-post-content{

    max-width:var(--zahuri-content-width);

    margin:0 auto;

    padding:40px 28px;

}


.alignwide{

    max-width:1300px;

    margin:0 auto;

}


.alignfull{

    width:100%;

}


/* ---------- Typography ---------- */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:Georgia,"Times New Roman",serif;

    color:var(--zahuri-blue);

    font-weight:400;

    line-height:1.25;

    margin-top:0;

}


h1{

    font-size:2.8rem;

    text-align:center;

    margin-bottom:36px;

}


h2{

    font-size:2.1rem;

    margin-top:55px;

    margin-bottom:20px;

}


h3{

    font-size:1.6rem;

    margin-top:40px;

    margin-bottom:18px;

}


p{

    margin:0 0 22px;

}


a{

    color:var(--zahuri-blue);

    text-decoration:none;

    transition:.25s;

}


a:hover{

    color:var(--zahuri-gold);

}


/* ---------- Images ---------- */

img{

    max-width:100%;

    height:auto;

}


/* ---------- Lists ---------- */

ul,
ol{

    margin-bottom:22px;

    padding-left:26px;

}


/* ---------- Quotes ---------- */

blockquote{

    border-left:4px solid var(--zahuri-gold);

    margin:30px 0;

    padding:8px 24px;

    color:#555;

    font-style:italic;

}


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

table{

    width:100%;

    border-collapse:collapse;

}


td,
th{

    padding:12px;

    border:1px solid #dddddd;

}


/* ---------- Selection ---------- */

::selection{

    background:var(--zahuri-gold);

    color:white;

}


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

@media (max-width:900px){

    body{

        font-size:17px;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .wp-block-post-content{

        padding:28px 20px;

    }

}

/* ==========================================================
   HEADER
========================================================== */

/* Header wrapper */

.wp-block-template-part{

    width:100%;

    background:var(--zahuri-cream);

    border-bottom:3px solid var(--zahuri-gold);

    padding:18px 40px;

}


/* Main Header Row */

.wp-block-template-part .wp-block-group,
.wp-block-template-part .wp-block-row{

    max-width:var(--zahuri-wide-width);

    margin:0 auto;

    width:100%;

}


/* Logo */

.wp-block-site-logo{

    flex-shrink:0;

}

.wp-block-site-logo img{

    height:82px;

    width:auto;

    display:block;

}


/* Site Title */

.wp-block-site-title{

    margin:0;

    padding:0;

    font-family:Georgia,"Times New Roman",serif;

    font-size:1.75rem;

    font-weight:400;

    letter-spacing:.4px;

    white-space:nowrap;

}

.wp-block-site-title a{

    color:var(--zahuri-blue);

    text-decoration:none;

}

.wp-block-site-title a:hover{

    color:var(--zahuri-gold);

}


/* Navigation */

.wp-block-navigation{

    margin-left:auto;

    gap:34px;

}


.wp-block-navigation .wp-block-navigation-item{

    white-space:nowrap;

}


.wp-block-navigation a{

    color:var(--zahuri-blue);

    font-size:1rem;

    font-family:Georgia,"Times New Roman",serif;

    font-weight:400;

    text-decoration:none;

    transition:.25s;

    padding:4px 0;

}


.wp-block-navigation a:hover{

    color:var(--zahuri-gold);

}


/* Current page */

.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current_page_item > a,
.wp-block-navigation-item.current-menu-ancestor > a{

    color:var(--zahuri-gold);

}


/* Submenus */

.wp-block-navigation__submenu-container{

    border:1px solid #ddd;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


/* Header spacing */

.wp-block-site-logo{

    margin-right:18px;

}


/* Mobile */

@media (max-width:900px){

    .wp-block-template-part{

        padding:16px 20px;

    }

    .wp-block-site-logo img{

        height:62px;

    }

    .wp-block-site-title{

        font-size:1.35rem;

    }

    .wp-block-navigation{

        gap:18px;

    }

}