/*
 Theme Name:   Laman7 - Bricks Child Theme
 Theme URI:    https://laman7.com/
 Description:  Use this child theme to extend Bricks. Comes with AutoCSS 2.0
 Author:       Laman7
 Author URI:   https://laman7.com/
 Template:     bricks
 Version:      1.3
 Text Domain:  bricks
*/

/* AutoCSS 2.0 Dec 2024 Developed by Laman7 https://github.com/edwin-laman7/autoCSS */
/* Made by Laman7 */

html {font-size:100%}
:root {
    /* Colors */
	--primary: #3C78D8;
    --primary-off: #2661BF;
    --secondary: #9961AC;
    --secondary-off: #844F96;
    --accent: #D4A418;
    --accent-off: #CA9C17;
	--body-color: #F5F5F5;
	--body-off: #FFF;
    --white: #F5F5F5;
    --base: #101010;
    --grey-light: #c1c1c1;
    --grey: #919191;
    --grey-mid: #525252;
    --grey-dark: #343746;
    --black: #070719;

    
    --highlight: #FFC514cc; /* default 44 */
    --highlight-dark: #FFC51490; /* default 77 */
    
    --hover-brightness: 1.3;
    --border-radius: 0.5rem;
    --btn-radius: 2rem;
    --btn-hover: "\00BB";
    --btn-outline-border: 2px;
    /* 
    \2192 for arrow
    \203A for single right chevron
    \00BB for double right chevron
    */
	
	/* Delete to use Bricks Default */
	--bricks-color-primary: var(--primary) !important; 
	--bricks-color-secondar: var(--secondary) !important;

    --typescale: 1.2;  /*scale*/
    --body: 1.125rem   ; /* 18px */
    --m: calc(var(--body)*var(--typescale));
    --l: calc(var(--m)*var(--typescale));
    --xl: calc(var(--l)*var(--typescale));
    --xxl: calc(var(--xl)*var(--typescale));
    --xxxl: calc(var(--xxl)*var(--typescale));
    --s: 1rem          ; /* 16px */
    --xs: calc(var(--body)/var(--typescale));

    --lh-xxxl: 1.2em;
    --lh-h1: 1.1em;
    --lh-h2: 1.3em;
    --lh-heading: 1.3em;
    --lh-body: 1.5em;
    --lh-btn: 1em;
    --ls-heading:-0.025em;
    --ls-h1:-0.025em;
    --ls-h2:-0.025em;
    --col:7rem;
    --btn-on: 3rem; /*Turn button when a number exists*/
    
    --clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
    --clamp-xxl: clamp(2.5rem, calc(2.5rem + ((1vw - 0.3rem) * 4.8077)), var(--xxl));
    --clamp-xl: clamp(1.75rem, calc(1.75rem + ((1vw - 0.3rem) * 2.4038)), var(--xl));
    --clamp-l: clamp(1.5rem, calc(1.5rem + ((1vw - 0.3rem) * 0.9615)), var(--l));
    --clamp-m: clamp(1.125rem, calc(1.125rem + ((1vw - 0.3rem) * 0.7212)), var(--m));
    --clamp-s: clamp(0.875rem, calc(0.875rem + ((1vw - 0.3rem) * 0.2404)), var(--s));
    --clamp-xs: clamp(0.625rem, calc(0.625rem + ((1vw - 0.3rem) * 0.2404)), var(--xs));
        
    --clamp-body: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 0.2404)), var(--body));
    --clamp-section: clamp(1rem, calc(1rem + ((1vw - 0.3rem) * 3.8462)), 3rem);

    --width-card: 26rem;
    --width-card-m: 40rem;
    --width-card-l: 54rem;
    --width-content: 1080px;

    /*BreakEvent Point*/
    --desktop: 1312px; /* Desktop */
    --tablet: 992px; /* Tablet */
    --landscape: 768px; /* Landscape */
    --mobile: 480px; /* Mobile */
}

/* Overide Bricks Default */

button.bricks-button {
    border-radius: var(--btn-radius);
    gap: calc(var(--clamp-s)*.75);
}

/* Your Styles Below this link */

.logo {
    img {width: 6rem; height: auto;}
    @media (max-width:480px) {
        align-items: center;
    }
}
.menu {
    display: flex; justify-content: flex-end; align-items: center; flex-direction: row;
    @media (max-width:480px) {
        justify-content: center;
    }
}

body{
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 200; min-height: 75vh;
}

h1,h2,h3 {font-weight: 500;}
h4,h5,h6 {font-weight: 300;}

a {text-decoration: none;}
main {min-height: 75vh;}
.center-alll > * {
    align-items: center;
    justify-content: center;
}
header {
    .container {display: flex; flex-direction: row; justify-content: space-between;
        position:relative; top:1rem; z-index: 10;
    }
    img.logo {width:3rem}
    img#menu-button {width:2rem}
    margin-bottom: -1.5rem;
    @media only screen and (min-width: 767px) {
        .container {top:1rem}
    }
    @media only screen and (min-width: 1023px) {
        .container {top:1rem}
    }
}
.noti-block {margin-top: 3rem;}
#main-container {background-image: url(/assets/bg-1-subuh.svg); background-size: cover;
background-repeat: no-repeat; background-position: center 21%; }
#current-time {margin-top:rem}
.text-countdown {font-size: 5rem;line-height: 5rem;}
.icon-solat {width: 1.5rem; height: auto;}
.block-icon {width: 2rem}
#block-countdown {min-height: 35vh; text-shadow: 4px 4px 8px #00000099;
    @media only screen and (min-width: 767px) { margin-top: 4rem; }
    @media only screen and (min-width: 1023px) { margin-top: 6rem; }
}
#countdown {position:absolute; bottom:0}

/* Progress Bar */
.progress-container { 
    @media only screen and (max-width: 480px) {
        width: 360px; position: absolute; bottom: 5rem;
    }
    @media only screen and (min-width: 481px) {
        width: 400px; position: absolute; bottom: 4rem;
    }
    @media only screen and (min-width: 1023px) {
        width: 460px; position: absolute; bottom: 3rem;
    }
    }
.progress-svg {width: 100%; height: auto;  }
#main-section {
    padding: 0;
}
#prayer-times {height: fit-content; align-self: end; justify-self: end; }
.bg-glass {/* From https://css.glass */
    background: rgba(0, 0, 0, 0.55);
    /* border-radius: 16px; */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.8px);
    -webkit-backdrop-filter: blur(8.8px);
    border: 1px solid rgba(0, 0, 0, 0.3);}
/* Search */
#search { width: 100%; padding: 10px; border:2px solid var(--grey-light); background-color: transparent; font-weight: 300; color: var(--white); border-radius: 2rem; padding-left: 1rem;}

ul#location-list {
    margin:0; padding: 0; display: flex; flex-wrap: wrap;
    li {list-style: none; margin: 0.25rem; width: fit-content; padding: .25rem 1rem;
        border: 1px solid var(--grey-light); border-radius: 2rem;
        a {color: var(--white)}
    }
    
} 
section#menu {display: none; position:absolute; top: 0rem; padding-top: 5rem; width: 100%}
.width-unset {width: unset;}
.container {padding: 0 var(--clamp-s);}

ul, ul li{margin:0;}
ul {padding-left: 1.5rem;}
ul li {padding: 0 0 0 .25rem}
main { 
    p {margin: .75rem 0;}
    .default div { h1,h2,h3 {margin:1.5rem 0 1rem }}

}
a {color: var(--accent);}