/* 

Theme Name: afzal-K.dev
Author: Afzal Kaduji
Version: 1.0

*/
:root {
    --white: #fff;
    --off-white: #f8f7ff;
    --amber: #f5a73b;
    --body-grey: #222;
    --highlight--lt:#fff;
    --highlighthover--lt: #bad8ff;
    --highlight--dk: #00326f;
    --highlighthover--dk: #284455;
    --HTML: #f15a2b;
    --CSS: #1775bb;
    --JS: #fcb040;
    --WP: #1f7196;
    --PHP: #284455;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

ul, li {
    margin:0;
    padding:0;
}
ul { list-style-position: outside;  line-height: 2.5rem; }
.wp-block-list { padding-left: 1.5rem; }

h1, h2, h3, h4, h5, h6, button {
    font-family: "Bruno Ace", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* html { overflow: hidden; } */
html, body {
    margin: 0 !important; /* WP casues margin-top: 32px !important for admin bar, so reset this */
    padding: 0;
    /* height: 100hv; */
    font-size: 62.5%;
    /* height: 100%; */
    line-height: 2.5rem;
  }

body { 
    background-color: blueviolet; 
    font-size: 1.6rem;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    color: var(--body-grey);
}

.site_container { 
    width: 100%; /* 100vw takes up scrollbar width, will be some horizontal scrolling, better to use width: 100%*/
    /* height: 100vh; */
    background-color: green;
    overflow: hidden;
}

/* ---------- General styles ---------- */

.margin--sm { margin: 1rem; }
.margin--md { margin: 2rem; }
.margin--lg { margin: 3rem; }

.button { font-size: 2rem; padding: 1rem 2rem; max-width: 20rem; border: none; cursor: pointer }
.button--blue { background-color: var(--highlight--dk); color:var(--white) }
.form__label {display: block }
.form__input, .form__textarea { display: block; width: 100%; border: none }
::placeholder { font-family: "Open Sans", sans-serif; font-size: 1.6rem }

.highlight {
    transition: all 0.3s;
}
.highlight--lt { color: var(--highlight--lt) }
.highlight--lt:hover {
    color: var(--highlighthover--lt);
}
.highlight--dk:link, .highlight--dk:visited,
.post__meta-item a:link, .post__meta-item a:visited,
.archive .post__nav .nav-links a:link, .archive .post__nav .nav-links a:visited
{ color: var(--highlight--dk); text-decoration: none; }

.highlight--dk:hover,
.post__meta-item a:hover
{ color: var(--highlighthover--dk); }

/* ----- archive cards ----- */
.archive__card { 
    display:grid; margin-top: 3rem;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
 }
.archive__card-title { margin-top: 0 }
.archive__card-readmore { 
   text-decoration: none;
   display: block;
}
.archive__card-img { transition: all 15s; overflow: hidden; }

/* @media only screen and (max-width:575px), (min-width:992px) and (max-width:1199px) {
    .archive__card-detail { display: none }
} */

@media only screen and (max-width:575px), (min-width:992px) and (max-width:1199px)  {
    .archive__card { 
        display:grid; margin-top: 3rem;
        grid-template-columns: 1fr;
        gap: 2rem;
     }
}

/* ----- animations ----- */
.imgtwist { transition: all 1s;}
.imgtwist:hover { transform: scale(105%); }
.bounce-md { transition: all .3s; }
.bounce-md:hover { transform: scale(105%); }
.fromleft { animation: fromleft 1s forwards}
.fromright { animation: fromright 1s forwards}
.frombottom { animation: frombottom 1s forwards }

@keyframes fromleft {
    0% { transform: translate(100px);}
    100% { transform: translate(0);}
}

@keyframes fromright {
    0% { transform: translateX(-50rem);}
    100% { transform: translateX(0);}
}

@keyframes frombottom {
    0% { transform: translateY(3rem)}
    100% { transform: translateY(0)}
}

/* -------------------------------------------------------------------------------- */
.layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: black;
}
.layout__sidebar, .layout__content { width: 50%; }
.layout__sidebar { 
    background-color: black;
    background: url(https://www.afzal-k.dev/wp-content/uploads/2025/08/SQ-test.jpg) no-repeat;
    padding: 5rem;
    display: flex;
    justify-content: space-between; 
    flex-direction: column; 
    /* overflow: hidden; */
    position: relative;
    z-index: 3;
}
/* --- Home Hero -- */
.layout__sidebar-hero {
    z-index: 3;
    margin-top: 2rem;
}
.layout__sidebar-heroimg {
    border: 1rem solid var(--white);
    border-radius: 50%;
    max-width: 225px;
    display: block;
}
.layout__content {
    background: var(--white);
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
    z-index: 2;
    overflow-x: hidden;
}
.layout__sidebar-menu, .layout__footer-menu {
    list-style: none;
}

@media only screen and (max-width:991px) {
    .layout {
        flex-direction: column;
        height: auto;
        }
    .layout__sidebar, .layout__content { width: 100%; }
    .layout__content-section {
        height: auto !important;
    }
    }

/* --- Navigation -- */
.layout__sidebar-menu .menu-item a { 
    font-size: 5rem;
    color: var(--white);
    text-decoration: none; 
    text-transform: uppercase;
    line-height: 7rem;
    font-family: "Bruno Ace", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
}
.layout__sidebar-menu .menu-item a::before {
    content: "";
    position: absolute;
    left: -2rem; top: 0;
    height: 100%;
    border-right: 1rem solid var(--amber);
    transition: all 0.3s;
    opacity:0;
}
.layout__sidebar-menu .menu-item a:hover::before {
    opacity: 1;
}
.layout__sidebar-menu .menu-item.current_page_item a { color:var(--amber); }
.layout__sidebar-menu .menu-item.current-menu-item a { color:var(--amber); }

/* Highlight menu item on home page scroll */
#menu-main a.active {
    color: #007bff;
  }

@media (max-width: 575px) {
.layout__sidebar-menu .menu-item a { 
        font-size: 10vw;
        line-height: 15vw;
    }
  }

/* --- Footer --- */
.layout__sidebar-title { 
    font-size: 8rem;
    color: var(--white);
    text-transform: capitalize;
    display: block;
    margin-bottom:0;
    margin-top: 2rem;
    line-height: 1;
}

.css-typing h1 {
    border-right: .15em solid orange;
    white-space: nowrap;
    overflow: hidden;
  }
.css-typing h1 {
    width: 43rem;
    opacity: 0;
    animation: type 5s steps(20, end), blink .3s step-end infinite alternate;
    animation-fill-mode: forwards;
  }
  @keyframes type {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
@keyframes blink {
    50% {
      border-color: transparent;
    }
  }

  
  
.layout__sidebar-footerMeta { 
    display: flex; 
    align-items: end; 
    justify-content: space-between;
    font-size: 1.4rem;
}
.layout__sidebar-footerCopy { color: var(--white); }

.layout__sidebar-footer {}

.layout__sidebar-footer-email {
    font-size: 4rem;
    text-decoration: none;
    display: block;
}
.layout__sidebar-footer-nav {
    margin-top: 2rem;
}
.layout__sidebar-footer-nav .menu-item a {
    color: var(--white);
    font-size: 2rem;
    text-decoration: none;
    transition: all 0.5s;
}
.layout__sidebar-footer-nav .menu-item a:hover {
    color: var(--highlighthover--lt);
}
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: none; /* hidden by default */
    overflow: hidden;
    border: 1px solid var(--body-grey);
    background-color: var(--white);
    z-index: 9999;
    cursor: pointer;
}
.back-to-top__icon {
    font-size: 2rem;
    padding: 1rem;
    display: block;
    width: auto !important;
}

.back-to-top--visible {
    display: flex; /* toggle with JS */
    /* align-items: center;
    justify-content: center; */
  }

@media (max-width: 575px) {
    .layout__sidebar-footerMeta { 
        flex-direction: column;
        align-items: start; 
        justify-content:start;
        gap: 1rem;
    }
    .layout__sidebar-title { 
        font-size: 12vw;
        margin-bottom:0;
        margin-top: 2rem;
    }
    .layout__sidebar-footer-email {
        font-size: 7vw;
    }
}

/* ---------- Content part ---------- */
.layout__content-section { padding: 5rem }
.layout__content-profession { background-color: var(--amber); }
.layout__content-profession-role { 
    font-size: 6rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}
.layout__content-profession-role span { display: block }
.layout__content-profession-description { 
    font-size: 3rem; 
    margin-top: 0.5rem; 
    line-height: 3.5rem; 
}
.layout__content-profession-skills { list-style: none; display: flex; gap: 0.5rem }
.layout__content-profession-icon { font-size: 4rem; }

@media only screen and (max-width: 575px) {
    .layout__content-profession-description { 
        font-size: 2rem;
        line-height: 1.3;
    }
}

  /* ----- Portfolio Home ----- */
#portfolio, #articles, #contact { scroll-margin-top: 5rem; }
.layout__content-portfolio { background-color: var(--white); }
.layout__content-portfolio-subtitle { margin-bottom: 3rem; }
.layout__content-portfolio-imgcrop, .layout__content-article-imgcrop {
    /* aspect-ratio: 16 / 9; */
    aspect-ratio: 1 / 1;
    border: 1px dotted var(--body-grey);
}

.layout__content-portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*  ----- Articles Home ----- */
.layout__content-blog { background-color: var(--white); }

/* ----- Contact ----- */

/* -- Contents page ----- */
.page-id-45 .layout__content,
.page-id-45 .layout__content-portfolio
{ background-color: var(--amber); }
/* ---------------------- */

.layout__content-contact {
    background-color: var(--amber);
 }
 .layout__content-contact-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
 }
 .layout__content-label { font-weight:600; font-size: 1.6rem; opacity: 0; }
 .layout__content-contact .formgroup { position: relative; }
 .layout__content-contact .formgroup .layout__content-label {
    position: absolute;
    top: -1.5rem; left: -3px;
    transition: all 0.5s;
    color: var(--white);
    background-color: var(--body-grey);
    padding: 2px 5px;
 }
.layout__content-subtitle { margin-bottom: 2rem; }
 .layout__content-input:focus::placeholder, .layout__content-textarea:focus::placeholder
 { color: transparent }
 .layout__content-input:focus ~ .layout__content-label, .layout__content-textarea:focus ~ .layout__content-label
 { opacity: 1; }
 .layout__content-input,  .layout__content-textarea {  
    padding: 2rem 1rem;
}
 .layout__content-input { min-height: 5rem }
 .layout__content-textarea { min-height: 10rem; font-family: "Open Sans", sans-serif; font-size: 1.8rem; }

 @media (max-width: 575px) {
    .layout__content-profession-role { font-size: 10vw !important; line-height: 10vw !important; }
    }

 /* ----- Portfolio / Article pages ----- */
 /* ----- Single and archive pages ----- */
 .single-portfolio .layout__content-profession,
 .single-articles .layout__content-profession,
 .tax-portfolio_category .layout__content-profession,
 .tax-articles_category .layout__content-profession,
 .archive .layout__content-profession
 {
	background-color: var(--amber);
	/* position: sticky; */
    top: 0;
	z-index: 999;
	width: 100%;
    /* min-height: 30rem; */
}
 .single-portfolio .posts__header,
 .single-articles .posts__header,
 .tax-portfolio_category .posts__header,
 .tax-articles_category .posts__header,
 .archive .posts__header
 { 
    display: flex;
    justify-content: space-between;
    align-items: center;    
}
 .single-portfolio .layout__sidebar-cat,
 .single-articles .layout__sidebar-cat,
 .tax-portfolio_category .layout__sidebar-cat,
 .tax-articles_category .layout__sidebar-cat,
 .archive .layout__sidebar-cat
 { 
    background-color: var(--body-grey);
    padding: 1rem 2rem;
    color: var(--white);
}
.single-portfolio .layout__sidebar-categories,
.single-articles .layout__sidebar-categories,
.tax-portfolio_category .layout__sidebar-categories,
.tax-articles_category .layout__sidebar-categories,
.archive .layout__sidebar-categories
{
    list-style: none;
    line-height: 3rem;
}
.single-portfolio .layout__sidebar-categories a,
.single-articles .layout__sidebar-categories a,
.tax-portfolio_category .layout__sidebar-categories a,
.tax-articles_category .layout__sidebar-categories a,
.archive .layout__sidebar-categories a
{ 
    text-decoration: none; color: var(--white); 
}
.single-portfolio .layout__sidebar-cathead,
.single-articles .layout__sidebar-cathead,
.tax-portfolio_category .layout__sidebar-cathead,
.tax-articles_category .layout__sidebar-cathead,
.archive .layout__sidebar-cathead
{
    margin-top: 0.5rem; margin-bottom: 1rem;
}

.single-portfolio .post__meta,
.single-articles .post__meta,
.tax-portfolio_category .post__meta,
.tax-articles_category .post__meta,
.archive .post__meta
{ display:flex; gap: 2rem; margin-bottom: 1rem; margin-top: -1rem; }

.single-portfolio .post__featured,
.single-articles .post__featured,
.tax-portfolio_category .post__featured,
.tax-articles_category .post__featured,
.archive .post__featured
{ 
    max-width: 500px; width: 100%; margin-top: 1rem;
    border: 1px dotted var(--body-grey);
    margin-bottom: 2rem;
}

.single-portfolio .post__nav,
.single-articles .post__nav,
.tax-portfolio_category .post__nav,
.tax-articles_category .post__nav,
.archive .post__nav
{ margin-top: 5rem; margin-bottom: 2rem }

.single-portfolio .post__nav .nav-links,
.single-articles .post__nav .nav-links,
.tax-portfolio_category .post__nav .nav-links,
.tax-articles_category .post__nav .nav-links,
.archive .nav-links
{ display: flex; justify-content: space-between; gap: 2rem; }

.single .post__nav, .single .post__nav a:link, .single .post__nav a:visited,
.archive .post__nav, .archive .post__nav a:link, .archive .post__nav a:visited
{ color: var(--highlight--dk); text-decoration: none; }

.single .post__nav a:active, .single .post__nav a:hover,
.archive .post__nav a:active, .archive .post__nav a:hover


/* .single-portfolio .post__nav .nav-previous a:hover,
.single-portfolio .post__nav .nav-next a:hover,

.single-articles .post__nav .nav-previous a:hover,
.single-articles .post__nav .nav-next a:hover,

.tax-portfolio_category  .post__nav .nav-previous a:hover,
.tax-portfolio_category  .post__nav .nav-next a:hover,

.tax-articles_category  .post__nav .nav-previous a:hover,
.tax-articles_category  .post__nav .nav-next a:hover,

.archive .post__nav .nav-previous a:hover,
.archive .post__nav .nav-next a:hover */
{ /*color: var(--body-grey);*/ color: green; }

.single-portfolio .post__skills-list,
.single-articles .post__skills-list,
.tax-portfolio_category .post__skills-list,
.tax-articles_category .post__skills-list,
.archive .post__skills-list
{ list-style: none;  display: flex; gap: 1rem; padding-left: 0; }

.single-portfolio .post__skill-icon,
.single-articles .post__skill-icon,
.tax-portfolio_category .post__skill-icon,
.tax-articles_category .post__skill-icon,
.archive .post__skill-icon
{ font-size: 3rem; }

.single-portfolio .post__skill-icon.fa-brands.fa-html5,
.single-articles .post__skill-icon.fa-brands.fa-html5,
.tax-portfolio_category .post__skill-icon.fa-brands.fa-html5,
.tax-articles_category .post__skill-icon.fa-brands.fa-html5,
.archive .post__skill-icon.fa-brands.fa-html5
{ color: var(--HTML) }
.single-portfolio .post__skill-icon.fa-brands.fa-css3-alt,
.single-articles .post__skill-icon.fa-brands.fa-css3-alt,
.tax-portfolio_category .post__skill-icon.fa-brands.fa-css3-alt,
.tax-articles_category .post__skill-icon.fa-brands.fa-css3-alt,
.archive .post__skill-icon.fa-brands.fa-css3-alt
{ color: var(--CSS) }
.single-portfolio .post__skill-icon.fa-brands.fa-wordpress,
.single-articles .post__skill-icon.fa-brands.fa-wordpress,
.tax-portfolio_category .post__skill-icon.fa-brands.fa-wordpress,
.tax-articles_category .post__skill-icon.fa-brands.fa-wordpress,
.archive .post__skill-icon.fa-brands.fa-wordpress
{ color: var(--WP) }
.single-portfolio .post__skill-icon.fa-brands.fa-php,
.single-articles .post__skill-icon.fa-brands.fa-php,
.tax-portfolio_category .post__skill-icon.fa-brands.fa-php,
.tax-articles_category .post__skill-icon.fa-brands.fa-php,
.archive .post__skill-icon.fa-brands.fa-php
{ color: var(--PHP) }
.single-portfolio .post__skill-icon.fa-brands.fa-js,
.single-articles .post__skill-icon.fa-brands.fa-js,
.tax-portfolio_category .post__skill-icon.fa-brands.fa-js,
.tax-articles_category .post__skill-icon.fa-brands.fa-js,
.archive .post__skill-icon.fa-brands.fa-js
{ color: var(--JS) }

.post__divider-rule { margin-top: 2.5rem; margin-bottom: 5rem; border-top: 1px dotted var(--body-grey);  border-bottom: none;  }

.post__divider-rule--home { margin-top: 2.5rem; margin-bottom: 0rem; border-top: 1px dotted var(--body-grey);  border-bottom: none; margin-right: 5rem; margin-left: 5rem; }

/* ----- Pagination ----- */
.archive .post__nav .nav-links {
	display: flex;
	justify-content: start;
	gap: 1rem;
}

@media only screen and (max-width: 767px), (min-width: 991px) and (max-width: 1399px) {
    .single-portfolio .posts__header, .single-articles .posts__header, .tax-portfolio_category .posts__header, .tax-articles_category .posts__header, .archive .posts__header {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 2rem;
    }
    .single-portfolio .layout__sidebar-cat, .single-articles .layout__sidebar-cat, .tax-portfolio_category .layout__sidebar-cat, .tax-articles_category .layout__sidebar-cat, .archive .layout__sidebar-cat {
        max-width: 300px;
        width: 100%;
    }
}

@media only screen and (min-width: 991px) and (max-width: 1199px) {
    .archive__card {
        flex-direction: column;
        gap: 3rem;
        margin-top: 3rem;
    }
}
@media (max-width: 767px) {
    .archive__card {
        flex-direction: column;
        gap: 3rem;
        margin-top: 3rem;
    }
}

@media (max-width: 575px) {
    .single-portfolio .post__meta, .single-articles .post__meta, .tax-portfolio_category .post__meta, .tax-articles_category .post__meta, .archive .post__meta {
        flex-direction: column;
        gap: 1rem;
    }
}