/*
Theme Name:     Bob Odanovic Theme 2023
Author:			Iconica Communications
Version: 		1.0
*/

/*
Key sections of this stylesheet:
Section 1: Variables
Section 2: HTML Reset
Section 3: Basic Elements
Section 4: Gutenberg elements (and other elements in div#main)
Section 5: Header
Section 6: Blogroll items (including blogroll on homepage)
Section 7: Sidebar items
Section 8: Footer items
Section 9: Special modifier classes
Section 10: Other items
*/

/*====================== Section 1: Variables ======================*/
:root {
    --main-content-width: 90%;
    --max-main-content-width: 1980px;
    --main-content-margin: 0 auto;
    --brand-color1: #000;
    --brand-color2: #1b1b1b;
    --accent-color1: #94b0be;
    --accent-color1-hover: #3ca1d4;
    --accent-color2: #ceb86e;
    --content-vert-padding1: 75px;
    --content-vert-padding2: 30px;
    --content-horiz-padding1: 20px;
    --default-font-size: 18px;
    --font-family1: 'Poppins', sans-serif;
    --font-weight-normal: 400;
    --font-weight-heavy: 700;
}
body {
    --wp--preset--font-size--large: 26px;
}

/*====================== Section 2: HTML Reset ======================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*====================== Section 3: Basic Elements ======================*/

/* Base text specs */
body,
input[type="text"], 
input[type="tel"], 
input[type="email"], 
textarea {
    color: #010101;
	font-family: var(--font-family1);
    font-size: var(--default-font-size);
    line-height: 1.7em;
    font-weight:var(--font-weight-normal);
}

/* Text, lists and headers */
h1, h2, h3, h4, h5, h6 {
    color: #010101;
    font-weight: var(--font-weight-heavy);
    line-height:1em;
    text-transform: uppercase;
}
h1 {
    font-size: 50px;
}
h2 {
    font-size: 42px;
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 19px;
}
p, ol, ul {
    padding-bottom: 20px;
    line-height: 1.7em;
}
ol, ul {
    padding-left: 15px;
    margin-left: 10px;
}
strong {
    font-weight: var(--font-weight-heavy);
}
em {
    font-style: italic;
}
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    padding-bottom: 20px;
    line-height: 1.2em;
}

/* Links */
a {
    color: var(--accent-color1);
}
a:hover {
	color: var(--accent-color1-hover);
    transition: .5s;
}

/* Form Elements (Buttons are below in "Gutenberg Elements" section) */
input[type="text"], input[type="tel"], input[type="email"], textarea {
    padding: 10px;
    border: solid 1px #ccc;
    max-width: 100%;
    box-sizing: border-box;
    width:100%;
}
.wpcf7-form label {
    display: block;
    margin-bottom:15px;
}
span.wpcf7-form-control-wrap {
    width: 100%;
    display: block;
}
.wpcf7-list-item.first {
    margin-left: 0;
}

/* Other */
#main h1.entry-title {
    padding-top: 0;
}
.alignleft, img.alignleft {
	float:left;
	margin: 0 10px 10px 0;
}
.alignright, img.alignright {
	float:right;
	margin: 0 0 10px 10px;
}
.aligncenter, img.aligncenter {
	text-align:center;
	margin: 0 10px 10px;
}
p:empty:before {
	display:none;
}

/* Blog comments section */
#comments .comment {
    margin-bottom: 15px;
}
body .commentlist, 
body .commentlist .children {
    border-bottom: 1px dotted #999;
    list-style: outside none none;
    padding-bottom: 10px;
    padding-left: 0;
}
body .commentlist .children {
    border-bottom: medium none;
    padding-left: 20px;
}
#commentform label, 
#commentform input, 
#commentform textarea {
    display: block;
    width: 100%;
}
#comments .comment-meta img, 
#comments .comment-meta cite {
    margin-right: 10px;
}

/* Blog entry */
#main .content, 
#main .author {
    border-bottom: 1px dotted #999;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#main .author {
    padding-bottom: 20px;
}

/*====================== Section 4: Gutenberg elements (and other elements in div#main) ======================*/

/* Main Blocks */
#main > .entry-header,
#main > .wp-block-group, 
#main > .wp-block-columns.has-background {
    padding-top: var(--content-vert-padding1);
    padding-bottom: var(--content-vert-padding1);
}
#main > *, 
#main .is-layout-constrained,
#main > .is-layout-flex,
#main .wp-block-columns.is-layout-flex,
#main .wp-block-cover .wp-block-cover__inner-container, 
#main .wp-block-cover-image .wp-block-cover__inner-container {
    width: var(--main-content-width);
    max-width: var(--max-main-content-width);
    margin: var(--main-content-margin);
}
#main > .alignfull,
#main .is-layout-flex.alignfull,
#main .wp-block-columns.is-layout-flex.alignfull {
    margin: 0;
    width: 100%;
    max-width: 100%;
}
#main .alignfull > .wp-block-group__inner-container > .wp-block-columns {
    margin: 0 !important;
    width: 100% !important;
}

/* Columns with background */
.wp-block-columns.has-background .wp-block-column {
    padding: 0 30px;
}

/* Columns that are inside a fullwidth group block */
#main .wp-block-group.alignfull .wp-block-column {
    padding: 0;
}

/* Main blocks for pages with sidebars */
#main.has-sidebar #content-container {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	padding-bottom: var(--content-vert-padding2);
}
#main.has-sidebar #content-container > #leftbar {
	flex-basis:calc(66% - 50px);
    overflow:visible;
    height:100%;
}
#main.has-sidebar #content-container > aside {
	flex-basis:33%;
}
#main.has-sidebar #leftbar > *, 
#main.has-sidebar #leftbar .is-layout-constrained, 
#main.has-sidebar #leftbar > .is-layout-flex, 
#main.has-sidebar #leftbar .wp-block-columns.is-layout-flex, 
#main.has-sidebar #leftbar .wp-block-cover .wp-block-cover__inner-container, 
#main.has-sidebar #leftbar .wp-block-cover-image .wp-block-cover__inner-container {
  	margin-left:0;
  	margin-right:0;
}

/* Text modifications */
.has-large-font-size {
    line-height: 1.5em;
}

/* Separator */
.wp-block-separator {
    height: 1px;
    display: block;
    border: 0;
    background-color: #999;
    margin-top: 30px !important;
    margin-bottom: 50px !important;
    width: 60% !important;
}

/* Cover Block */
.wp-block-cover {
    padding: 30px 0;
}

/* Images */
.wp-block-image {
    margin-bottom: var(--content-vert-padding2);
}

/* Buttons */
input[type="button"],
input[type="submit"],
.wp-block-button .wp-block-button__link,
.button {
    box-sizing: border-box;
    display: block;
    padding: 15px 29px;
    border: none;
    border-radius: 0;
    margin: 0 0 20px;
    text-align: center;
    background-color: var(--accent-color1);
    color: var(--brand-color1);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: var(--font-weight-heavy);
    line-height: 1em;
    letter-spacing: 1.2px;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button .wp-block-button__link:hover,
.button:hover {
	background-color: var(--accent-color1-hover);
	color:#fff;
	text-decoration: none;
	box-shadow:none;
    transition: 0.5s;
}
/* Tables */
.wp-block-table td {
  padding: 5px;
}


/* Color Palette Applications */
#main .has-branded-rich-black-color {
    color: var(--brand-color1);
}
#main .has-branded-rich-black-background-color {
    background-color: var(--brand-color1);
}
#main .has-branded-black-color {
    color: var(--brand-color2);
}
#main .has-branded-black-background-color {
    background-color: var(--brand-color2);
}
#main .has-branded-accent-light-blue-color {
    color: var(--accent-color1);
}
#main .has-branded-accent-light-blue-background-color {
    background-color: var(--accent-color1);
}
#main .has-branded-accent-gold-color {
    color: var(--accent-color2);
}
#main .has-branded-accent-gold-background-color {
    background-color: var(--accent-color2);
}

/*====================== Section 5: Header ======================*/
/* Note: Navmenus are set in css/navigation.css */
header {
    position: fixed;
    background-color: rgba(0,0,0,0.75);
    z-index: 9999;
    width: 100%;
    top: 0;
    padding: 30px 0;
}
header .container {
    width: var(--main-content-width);
    max-width: var(--max-main-content-width);
    margin: var(--main-content-margin);
    display: flex;
}
header .logo_container {
    max-width: var(--max-main-content-width);
    margin: var(--main-content-margin);
    display:flex;
    z-index: 9999;
    width: 100%;
    justify-content: space-between;
}
header .widgets {
    flex-basis: 25%;
    display: flex;
    align-items: center;
}
header .widgets.right {
    flex-basis: 20%;
}
header .custom-logo-link {
    flex-basis: 50%;
    text-align: center;
}
header .custom-logo {
    max-width: 100%;
    height: 71px;
    width: auto !important;
}

/* Widget area */
.main-menu-widgets .wp-block-social-links {
    justify-content: flex-end;
}

/* Page title display */
.page_title {
    height: 400px;
    margin-bottom: var(--content-vert-padding1) !important;
    padding: var(--content-vert-padding2) 0;
    position: relative;
    background-size: cover;
    background-position: center;
}
.page_title.bottom-nospace {
    margin-bottom: 0 !important;
}
.page_title .overlay {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
body .page_title .is-layout-constrained {
    height: 100%;
    position: relative;
    color: #fff;
}
body .page_title .is-layout-constrained > div {
    position: absolute;
    bottom: 0;
}
body .page_title h1 {
    color: #fff;
    font-size: 65px;
}
#breadcrumbs a {
    color: #fff;
}
body.archive .page_title h1 {
    text-transform: capitalize;
}

/* Other header items */
header .header-widgets a {
    text-decoration: none;
    color: #fff;
}
header .header-widgets p {
    padding: 0;
}

/*====================== Section 6: Blogroll items (including blogroll on homepage) ======================*/
.blogroll h3 {
    margin-top: 0;
}
.blogroll .post-categories {
    padding-left: 0;
    font-style: italic;
}
.blogroll .post-categories li {
    display: inline-block;
    list-style: outside none none;
}
.blogroll .post-categories li::after {
    content: ",";
}
.prev-next-posts, .moreposts {
    border-top: 1px dotted #999;
    margin-top: 20px;
    padding-top: 20px;
}
.prev-next-posts .next {
	text-align:right;
}

/*====================== Section 7: Sidebar items ======================*/


/*====================== Section 8: Footer items ======================*/
footer {
    background-color: var(--brand-color1);
    color: #fff;
    font-size: 16px;
    padding-top: var(--content-vert-padding1);
    padding-bottom: 0;
}
.footer-upper,
.footer-bottom .container {
    width: var(--main-content-width);
    max-width: var(--max-main-content-width);
    margin: var(--main-content-margin);
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
.footer-upper > div, .footer-bottom .container > div {
    width: 48%;
}
.footer-bottom {
    color: #fff;
    font-size: 13px;
	overflow:hidden;
    padding-top: 30px;
    width:100%;
    border-top: solid 1px #fff;
    margin-top: 40px;
}
.footer-bottom .container > div:last-child {
    text-align: right;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color:#fff;
}
footer a {
	color:#fff;
	}
footer a:hover {
    color:var(--accent-color1-hover);
}

/*====================== Section 9: Special modifier classes ======================*/

/* .padded-block */
.padded-block {
    padding: 42px 18px !important;
}

/* .grid-layout */
/* Sub-classes: .full-width , .half-width , .quarter-width */
/* Used in cases where the standard "Columns" block element cant be used.
Sets up a grid-based layout where items can take up a set width according to what you specify.
Start by setting up a parent div with class .grid-layout. 
Child elements can be set to various sizes by using one of the sub-classes mentioned above. */
.grid-layout {
    display: flex;
    flex-wrap: wrap;
}
.grid-layout .full-width,
.grid-layout .half-width,
.grid-layout .quarter-width,
.grid-layout .third-width {
    padding: 10px;
    box-sizing: border-box;
    margin:0;
}
.grid-layout .full-width {
    width: 100%;
}
.grid-layout .half-width {
    width: 50%;
}
.grid-layout .quarter-width {
    width: 25%;
}
.grid-layout .third-width {
    width:33.3%;
}

/* .nopad-right */
/* For two-column blocks that are full-width, and has an image in the right hand column that stretches to the edget of the window.
Apply the class to the column block itself as an additional class.*/
#main .nopad-right {
    padding: 0 !important;
}
#main .nopad-right .wp-block-column:first-child {
    flex-basis: 43%;
    margin-left: 5%;
    padding-right: 2%;
    box-sizing: border-box;
    padding-top: var(--content-vert-padding1);
    padding-bottom: var(--content-horiz-padding1);
    padding-left: 0;
    padding-right: 0;
}
#main .nopad-right .wp-block-column:last-child {
    flex-basis: 50%;
    flex-shrink:0;
    padding:0;
}
#main .nopad-right figure,
#main .nopad-right .wp-block-image {
    margin: 0;
}

/* .nopad-left */
/* For two-column blocks that are full-width, and has an image in the left hand column that stretches to the edget of the window.
Apply the class to the column block itself as an additional class.*/
#main .nopad-left {
    padding: 0 !important;
}
#main .nopad-left .wp-block-column:first-child {
    flex-basis: 50%;
    flex-shrink:0;
    padding:0;
}
#main .nopad-left .wp-block-column:last-child {
    flex-basis: 43%;
    margin-right: 5%;
    padding-left: 2%;
    box-sizing: border-box;
    padding-top: var(--content-vert-padding1);
    padding-bottom: var(--content-horiz-padding1);
    padding-left: 0;
    padding-right: 0;
}
#main .nopad-left figure,
#main .nopad-left .wp-block-image {
    margin: 0;
}

/* .has-arrow (Adds an arrorw to right side of a link) */
.has-arrow a {
    text-decoration: none;
}
.wp-block-read-more:after,
.has-arrow a:after {
    content:' ';
    background-color: var(--accent-color1);
    -webkit-mask-image: url(../bobodanovic/assets/images/button-arrow.svg);
    mask-image: url(../bobodanovic/assets/images/button-arrow.svg);
    mask-image: url(../bobodanovic/assets/images/button-arrow.svg);
    width: 21px;
    height: 12px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 10px;
    transition: margin 0.5s ease;
}
.wp-block-read-more:hover::after, 
.has-arrow a:hover::after {
    margin-left: 20px;
}

#main .button {
    /*See section for Gutenberg items above for more on this class */
}
	
/*====================== Section 10: Other items ======================*/
.pad-top {
	margin-top:30px;
	}
.fine-print {
    font-size: 12px;
    line-height: 15px;
}
.required {
    color:red;
}

/* Instagram embeds */
.instagram-media {
    max-width: 100% !important;
}

/* Subscription form */
.subscription-form span.wpcf7-list-item-label {
    line-height: 1.2em;
}
.subscription-form label {
    flex-basis: 20%;
    height: 50px;
    line-height: 50px;
}
.subscription-form input[type="email"] {
    background: none;
    border-bottom: solid 1px #fff;
    border-width: 0 0 1px 0;
    width:100%;
    color:#fff;
    margin-bottom:20px;
}
.subscription-form input[type="submit"] {
    margin-top:20px;
    /* flex-basis: 10%;
    background-image: url(../bobodanovic/assets/images/button-arrow.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 10px;
    background-position: center;
    font-size: 0;
    margin: 0;
    height: 50px; */
}
/*.subscription-form input[type="submit"]:hover {
    transition: 0.5s;
    transform: scale(1.5);
} */

/* Taxonomies list */
.taxonomies {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 30px;
  }
  .taxonomies .header {
    flex-basis: 18%;
  }
  .taxonomies .items {
    flex-basis: 80%;
  }
.taxonomies a {
    background-color: var(--accent-color1);
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.7em;
}

/* Slideshows */
body .metaslider .flexslider {
    margin: 0;
}
body .metaslider .flexslider .slides,
body .metaslider .flexslider .slides > li,
body .metaslider .flexslider .slides img {
    height:100%;
}
body .metaslider .flexslider .flex-control-nav {
    bottom: 30px;
    width: var(--main-content-width);
    margin: 0 auto;
    position: relative;
    text-align: left;
}

/* Other Contact form 7 items */
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}