/* Theme Information */
/*
Theme Name: Kgokelo
Theme URI: http://themetailor.co.za
Author: ThemeTailor
Author URI: http://themetailor.co.za
Description: Webanchor Boiler Plate Theme
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: themetailor
Tags: editor-style
*/




:root { 
    --red: #ed3d32;
    --black:  #000000;
    --white:  #FFF;
    --green:  #007749;
    --yellow:  #f1a81d;
    --blue:  #2a307d;
 }

.has-white-color { color: var(--white)!important; }
.has-white-background-color { background-color: var(--white)!important; }

.has-red-color { color: var(--red)!important; }
.has-red-background-color { background-color: var(--red)!important; }

.has-black-color { color: var(--black)!important; }
.has-black-background-color { background-color: var(--black)!important; }

.has-yellow-color { color: var(--yellow)!important; }
.has-yellow-background-color { background-color: var(--yellow)!important; }

.has-green-color { color: var(--green)!important; }
.has-green-background-color { background-color: var(--green)!important; }

.has-blue-color { color: var(--blue)!important; }
.has-blue-background-color { background-color: var(--blue)!important; }


/* Reset */
html { scroll-behavior: smooth; }
body { font-family: montserrat; font-weight: 400; margin: 0; padding: 0; color: var(--black); font-size: 16px; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: montserrat; margin: 0; padding: 0; color: var(--black); font-weight: 500; text-transform: capitalize; }
h1 { font-size: 40px; }
h2 { font-size: 40px; }

h1.site-title { background: url('img/logo.png') no-repeat; background-size: 100%; width: 200px; text-indent: -9999px; margin-bottom: 0; height: 65px; }
h1.site-title a { display: block; height: 65px; line-height: 65px; }

p { text-align: justify; }
p, ul, ol { margin: 0 0 15px 0; padding: 0; color: var(--black); }
p a { text-decoration: underline; }
strong, b { font-family: montserrat, Arial; }
figure.wp-block-image { margin: 0 0 25px 0; }
img { width: 100%; height: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; padding: 0; }
.alignwide  { width: 80vw; max-width: 1000px; margin: 0 auto; }
.aligncenter { text-align: center; }

.wp-block-post-excerpt__excerpt { margin-bottom: 15px; }
.wp-block-post-excerpt__more-link { font-weight: 600; }
:where(.wp-block-columns.is-layout-flex) { gap: 80px!important; }
.wp-block-image { margin: 0; }

.wp-block-button__link { margin-bottom: 25px; width: 400px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,1); }

input[type=text] { border: 1px solid var(--black); border-radius: 0; padding: 8px;  }
input[type=password] { border: 1px solid var(--black); border-radius: 0; padding: 8px;  }

input#gform_submit_button_1, input[type=submit], button[type=submit] { cursor: pointer; background-color: var(--yellow); border-color: var(--white); border-width: 2px; font-size: 1.125em!important; border-style: solid; color: var(--white); padding-top: 0.667em; padding-right: 1.33em; padding-bottom: 0.667em; padding-left: 1.33em; width: 400px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,1); margin: 0 auto; }
input#gform_submit_button_1:hover, input[type=submit]:hover, button[type=submit]:hover { background: var(--red) }

.template-content { max-width: 1000px; margin: 0 auto 50px; }
#loginform { display: block; text-align: center; }
#loginform input { width: 400px; box-sizing: border-box; }
#loginform label { display: block; font-size: 14px; width: 400px; box-sizing: border-box; text-align: center; margin: 0 auto 5px; }

a { color: var(--black); text-decoration: none; transition: color 0.3s; }
a:hover, a:focus { opacity: .5; }

header { background: var(--white); padding: 20px 50px; display: flex; justify-content: space-between; align-items: center;  }
header h1 { margin: 0; padding-right: 20px; }
header h1 a { font-size: 60px; color: var(--red);  }
header h1 a:hover { color: var(--red); text-decoration: none; opacity: .9; }
header p { margin: 0; }
header.page-header { padding: 10px 30px; background: var(--accent); }
header.page-header h1 { color: var(--white); }

.site-branding { display: flex; align-items: center; }
.site-branding p { text-transform: uppercase; }

nav {  }
nav ul { list-style: none; margin: 0; display: flex; justify-content: space-between; padding-left: 4px; }
nav li { display: inline-block; position: relative; margin-left: 30px; }
nav a { font-size: 14px; color: var(--grey); font-weight: 600; padding: 10px 0; display: block; letter-spacing: .5px; text-transform: capitalize; }
nav a:hover, nav li.current-menu-item a { color: var(--red); }
nav ul.sub-menu { display: none; padding: 0; margin: 0; }
.menu-nav-container { width: 100%; }
nav ul li.menu-item-has-children:hover ul.sub-menu { display: block; position: absolute; left: -20px; top: 40px; background: var(--white); z-index: 9999; width: 240px; padding: 0 20px; }
nav ul li.menu-item-has-children:hover ul.sub-menu li a { cursor: pointer; }
nav ul.sub-menu li { display: block; width: 100%; padding-right: 0; margin: 0; }



aside { box-sizing: border-box; margin-left: 4%; width: 21%; }
aside ul, aside ul li { list-style: none; margin: 0; padding: 0; }

section.description { padding: 30px 30px 30px; font-size: 18px; background: var(--blue); box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); margin-bottom: 50px; }


.container { max-width: 1000px; margin: 0 auto; display: flex; }
.wp-block-cover__inner-container { max-width: 1000px; margin: 0 auto; }

.content-area { width: 75%; }
.content-archive { max-width: 80%; margin: 0 auto; }

.widget { margin-bottom: 20px; }
.widget-title { font-size: 18px; margin-bottom: 10px; }



.entry-header h1, .entry-header h2 { font-size: 24px; margin-bottom: 10px; }
.entry-content { font-size: 16px; line-height: 1.8; margin-bottom: 40px; }
.more-link { background-color: #0073aa; border-radius: 3px; color: var(--white); display: inline-block; padding: 5px 15px; transition: background-color 0.3s; }
.more-link:hover { background-color: #005177; }



footer#colophon { font-size: 12px; width: 100%; max-width: 100%; margin: 0 auto; color: var(--black); padding: 10px 0; text-align: center; }
footer p { font-size: 15px; text-align: center; }
footer img.nac { width: 220px; margin: 0 auto 20px; }

ul.social { font-size: 30px; list-style: none; display: flex; justify-content: center; display: none; }
ul.social li { margin: 0 5px; }


.home ul.social { display: flex; }

.clearfix::after { content: ""; clear: both; display: table; }

#content { align-content: space-evenly; display: flex; }



article { margin-bottom: 40px; overflow: hidden; display: flex; flex-direction: column; }
.archive article .entry-content { display: flex; }
.archive article .entry-content .entry-text { width: 70%; display: flex; flex-direction: column; justify-content: space-between; }
.archive article .entry-content .entry-text h2 { margin-bottom: 10px; }
.archive article .thumb { width: 28%; margin-left: 2%; }
.archive article img { width: 100%; height: auto; }
.archive article { border-bottom: 1px solid var(--blue); background: var(--blue); padding: 30px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); }
.archive article .tags { text-transform: uppercase; font-size: 12px; margin-top: 20px; }
.archive article .tags a { color: var(--red); }
.archive article .tags a:hover { color: var(--accent); }

.archive section.letter-section {  padding: 5px 30px; background: var(--accent-3); margin-bottom: 40px;  }
.archive section.letter-section h2 { color: var(--white); }
.archive .letter-navigation { f color: var(--blue); letter-spacing: 1px; }
.archive .letter-navigation a { color: var(--white); font-weight: 600;  }

a.btn-read-more { margin-top: 10px; font-size: 12px; background: var(--red); color: var(--white); padding: 2px 8px; display: block; width: fit-content; }
a.btn-read-more:hover { background-color: var(--accent); }


.single .entry-content img { max-width: 430px; margin-bottom: 30px; margin-right: 30px; float: left; }
.single .entry-header { padding: 10px 30px; background: var(--accent); border: none; margin-bottom: 30px; }
.single .entry-header h1 { color: var(--white); margin: 0; padding: 0; }
.single .tags { display: block; color: var(--white); background: var(--red); text-transform: uppercase; font-size: 12px; padding: 5px 10px; width: fit-content; }
.single .tags a { color: var(--white); }
.single .tags a:hover { opacity: .8; }

.eventbox { margin-bottom: 20px; }

.post-type-archive-event .content-area { width: 900px; }

section.page-content { width: 1000px; margin: 0 auto; max-width: 90%; }
section.page-content img { width: 100%; height: auto; }
section.page-content > .wp-block-cover .wp-block-columns { gap: 0; margin-bottom: 0; }
section.page-content > .wp-block-cover .wp-block-columns figure { margin: 0; }
section.page-content > .wp-block-cover .wp-block-columns .wp-block-column { height: 150px; display: flex; align-items: center; box-sizing: border-box; }
section.page-content > .wp-block-cover .wp-block-columns .wp-block-column h1 { text-align: center; display: block; width: 100%; }
section.page-content > .wp-block-cover .wp-block-columns .wp-block-column img { height: 180px; width: auto; }
section.page-content > .wp-block-cover h2 {  }


.btn-see-more a { background: var(--red); color: #FFF; padding: 10px 20px; }

.postblock { padding: 30px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); }
.postblock img { margin: 20px 0; display: block; }
.postblock h2 { font-size: 20px; }
.postblock p {  }


.lost-password-wrapper {
    margin: 50px auto;
    padding: 20px; 
    width: 450px;
    text-align: center;
}
.lost-password-wrapper input {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
}
.error {
    color: var(--red);
}

.page-template-template-login .template-content p, .page-template-template-login .template-content { text-align: center; }


.user-list-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.user-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.user-item {
    text-align: center;
    width: 170px;
}
.user-item p { display: block; text-align: center; margin: 10px 0 0; }
.user-item img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}



.search .wp-block-cover, 
.author .wp-block-cover, 
.single-play .wp-block-cover, 
.tax-theme-keyword .wp-block-cover,
.page-template-template-play .wp-block-cover { margin-bottom: 50px; }
.search .container,
.author .page-content, 
.single-play .content-area,
.tax-theme-keyword .container, 
.page-template-template-play .container { padding-bottom: 50px; }
.author .page-content p { margin-bottom: 15px; }
table { width: 100%; }
table tr {  }
table tr:nth-child(odd) { background: #eee; }
table td { padding: 10px; }
table td.title { width: 150px; font-weight: bold; }
.author .page-content h2 { margin-top: 50px; margin-bottom: 25px; }

.author .about-box { display: flex; }
.author .about-box .img-box { padding-right: 40px; }
.author .about-box img { width: 400px; }
ul.play-list { list-style: none; padding: 0; margin: 0; width: 100%; }
ul.play-list li { padding: 10px; }
ul.play-list li:nth-child(odd) { background: #eee; }

.single-play table td.title { width: 260px; }
.single-play table td a { color: var(--green); }
.single-play footer { margin-top: 50px!important; }

.tax-theme-keyword table td.title,
.page-template-template-play table td.title { width: 50%; }

.width600 { max-width: 600px; margin: 0 auto; }

.search-form { display: flex; align-items: center; border: 1px solid var(--red); border-radius: 15px; overflow: hidden; width: 100%; max-width: 300px; margin-left: 30px; }
.search-field {flex-grow: 1; padding: 10px; border: none; outline: none; font-size: 16px; }
.search-submit { background-color: var(--red); border: none; padding: 10px; cursor: pointer; font-size: 18px; color: #0073aa; }
.search-form button[type="submit"] { background-color: var(--red); border: 0; }
.search-submit:hover { color: #005177; }
.search-submit i { font-size: 16px; }

#site-navigation { display: flex; }

.search h2 { display: block; padding-bottom: 25px; }
.search table { padding-bottom: 25px; }

#showmobi { display: none; }

.blog .entry-content { display: flex; }
.blog .thumbox { width: 48%; padding-right: 2%; }
.blog .textbox h2, .blog .textbox h2 a { font-size: 24px; text-decoration: none; } 
.blog .textbox a.btn-read-more { padding: 10px 20px; background: var(--green); box-shadow: 5px 5px 0px 0px rgba(0,0,0,1); }


.single .template-content { padding-top: 80px; }

.page-template-template-login #loginform p { text-align: center; }

/* Mobile Phones (Portrait) */
@media only screen and (max-width: 1050px) {
    .template-content, section.page-content, .alignwide { max-width: 100%; width: 100%; }
    h1 {  }
    h2 { font-size: 24px; }
    h3 { font-size: 20px!important; }
    h4 {  }
    h5 {  }
    h6 {  }
    p, ul, ol { font-size: 13px!important; }
    .wp-block-button__link { width: fit-content; font-size: 14px; padding: 10px 20px; }

    .wp-block-columns img { max-width: 60%; margin: 0 auto; display: block; }

    table td { width: 100%; display: block; }
    .author .about-box img { width: 100%; margin: 0 auto; }
    .author .about-box { display: block; }
    .author .about-box .img-box { padding: 0 0 30px 0; }
    .page-content .wp-block-cover .wp-block-columns { display: block!important; }
    section.page-content > .wp-block-cover .wp-block-columns .wp-block-column { height: auto; padding: 20px; }

    #site-navigation { display: none; position: fixed; right: 0; background: #FFF; top: 0; width: 100%; z-index: 9999; height: 100vh; padding: 30px; box-sizing: border-box; overflow: scroll; }
    #showmobi { display: block; font-size: 24px; cursor: pointer; }
    .search-form { margin-left: 0; margin-top: 20px; }
    nav ul.sub-menu { display: block!important; padding-left: 30px; }

    nav ul { display: block; }
    nav li { display: block; margin-left: 0; }

    .wp-block-cover__inner-container > div > .wp-block-column:first-of-type { background: var(--green); }
    .wp-block-cover__inner-container > div > .wp-block-column img { display: block; width: 100%!important; height: auto!important; }
    .wp-block-cover__inner-container > div > .wp-block-column h2 { font-size: 24px !important; text-align: center; display: block; margin: 0 auto; }
    h2.wp-block-heading { font-size: 24px!important; padding: 0 20px; }

    .page-id-22 .wp-block-cover__inner-container > div > .wp-block-column:first-of-type,
    .parent-pageid-22 .wp-block-cover__inner-container > div > .wp-block-column:first-of-type { background: var(--yellow); }

    .wp-image-204 { max-width: 50%!important; }
    figure.wp-block-image { text-align: center; }

    .blog .entry-content { display: block; padding: 0 20px; }
.blog .thumbox { width: 100%; padding-right: 0; }
	section.page-content p { padding: 0 20px; box-sizing: border-box; }
	section.page-content .template-content { text-align: center; padding: 0 20px; box-sizing: border-box; }
	#loginform input, #loginform label { max-width: 100%; box-sizing: border-box; }

    .page-template-template-login .template-content {
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}}