/*
 Theme Name:     Divi Scaffold
 Description:    Divi Child Theme
 Author:         Mauro Bono
 Author URI:     https://www.maurobono.com
 Template:       Divi
 Version:        1.0.0
 Text Domain:    divi-scaffold
*/

/* === Local Fonts === */

/* Inter-100 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('assets/fonts/inter/inter-v12-latin-100.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-100.woff') format('woff');
}

/* Inter-200 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/inter/inter-v12-latin-200.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-200.woff') format('woff');
}

/* Inter-300 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/inter/inter-v12-latin-300.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-300.woff') format('woff');
}

/* Inter-regular - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/inter/inter-v12-latin-regular.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-regular.woff') format('woff');
}

/* Inter-500 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/inter/inter-v12-latin-500.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-500.woff') format('woff');
}

/* Inter-600 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/inter/inter-v12-latin-600.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-600.woff') format('woff');
}

/* Inter-700 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/inter/inter-v12-latin-700.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-700.woff') format('woff');
}

/* Inter-800 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('assets/fonts/inter/inter-v12-latin-800.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-800.woff') format('woff');
}

/* Inter-900 - Latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('assets/fonts/inter/inter-v12-latin-900.woff2') format('woff2'),
       url('assets/fonts/inter/inter-v12-latin-900.woff') format('woff');
}

/* Color Palette */
:root {
  
  /* Gray Scale: global */
  --gray-900: #18181B;
  --gray-800: #27272A;
  --gray-700: #3F3F46;
  --gray-600: #52525B;
  --gray-500: #71717A;
  --gray-400: #A1A1AA;
  --gray-300: #D4D4D8;
  --gray-200: #E4E4E7;
  --gray-100: #F4F4F5;
  --gray-50: #FAFAFA;
  
  /* Accent Scale: per project based */
  --accent-900: #4ca6a1;
  --accent-800: #5eafaa;
  --accent-700: #70b8b4;
  --accent-600: #82c1bd;
  --accent-500: #94cac7;
  --accent-400: #a6d3d0;
  --accent-300: #b7dbd9;
  --accent-200: #c9e4e3;
  --accent-100: #dbedec;
  --accent-50: #edf6f6;
}


.section-header {
    background: url(assets/img/background.jpg) no-repeat center;
    background-size: cover;
    object-fit: cover;
    background-blend-mode: multiply;
    padding: 3rem 0;
    color: white;
}

.flex-parent-blog-item { /* index all blogs */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.flex-child-blog-item { /* index all blogs */
    /* background: black; */
    /* border: 3px solid black; */
    padding: 1rem;
}

.page-numbers {   /* index.php blog pagination: The class .page-numbers is automatically generated by wordpress when there's more than one
    page, otherwise it's not showed. that's why you have to style .page-numbers in order to function properly. */
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--header-bg-color);
    color: white;
    border: 2px solid black;
    display: inline-block;
    
}

.generic-blog {
    background: black;
    padding-top: 2.5rem;
}

.generic-blog-h1 {
    color: var(--accent-color);
}

.generic-blog-p {
    color: white;
    margin-bottom: 1.5rem;
}

.blog-item-h2 {
    //text-align: center;
    color: white;
}

.blog-item-h2 a {
    color: #778DA9;
    text-decoration: none;
}

.feature-img {
    //text-align: center;
}

.excerpt {
    color: white;
}

.cta {

    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    background: #1B263B;
    border-radius: 10px;
    padding: .30em 1em;
    margin: 1rem 0;
    cursor: pointer;
}

.cta:hover {
    background: black;
    color: var(--accent-color);

}



@media screen and (min-width: 700px) {

.flex-parent-blog-item { /* index all blogs */
    
    flex-direction: row;
    justify-content: flex-start;
    
}

.flex-child-blog-item { /* index all blogs */
    flex-basis: 48%;
}

.cta {
    text-align: center;
}

}