/*
Theme Name: Soul Page
Theme URI: https://enroll.packedclass.com/soul-page
Author: Ephraim Sng - PackedClass
Author URI: packedclass.com
Description: A custom WordPress theme for a "Soul Page" landing page for Charter Schools.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soul-page
*/

:root {
    --primary-color: #1C87E2; /* Deep purple for a soulful primary color */
    --secondary-color: #F5BC47; /* Indigo for a complementary secondary color */
    --header-font: larken, sans-serif;; /* Elegant, serif font for headers */
    --body-font: 'Roboto', sans-serif; /* Clean, modern sans-serif for body text */
  }
  
  /* Apply custom fonts */
  body {
    font-family: var(--body-font);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: 800;
    font-style: normal;
  }
  
  /* Override Bootstrap's primary and secondary colors */
 /* Primary Button */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* Primary Hover – auto-darkened */
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary-color) 80%, black);
  border-color: color-mix(in srgb, var(--primary-color) 80%, black);
  color: white;
}

/* Primary Outline */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
	  border-color: var(--primary-color);
  color: white;
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
}

/* Secondary Hover – auto-darkened */
.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--secondary-color) 80%, black);
  border-color: color-mix(in srgb, var(--secondary-color) 80%, black);
  color: white;
}

/* Secondary Outline */
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.btn-outline-secondary:hover {
  background-color: var(--secondary-color);
  color: white;
}

  .drop-shadow {
    box-shadow: 20px 20px 0px var(--secondary-color);
    border-radius: 8px;
  }

  .lead {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
  }
  
  /* Example usage of custom variables */
  header {
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 1.5rem;
  }
  
  main { }

.star-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
  }
  
  .star-rating svg {
    width: 50px;
    height: 50px;
  }
  
  .star-rating use {
    fill: gold;
  }

  #hero{
    background-color: rgba(0, 0, 0, 0.8);
    border-bottom: var(--secondary-color) 10px solid;
    color: white;
    position: relative;
  }

  #hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/wp-content/themes/soul-page/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
  }

      #hero::after{
    content: '';
    display: block;
    transform: translate(0, 50%);
    margin: 0 auto;
    width: 290px;
		  height: 181px;}

  #ratings, #cta {
    background-color: var(--primary-color);
    color: white;
  }

  #ratings .btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
  }

  #cta .btn-primary {
    background-color: var(--secondary-color);
    font-weight: bold;
  }

  .site-footer {
    background-color: #1f4760;
    color: white;
    padding: 1rem 0;
    text-align: center;
  }