/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/* =========================================================
   SC Hall of Fame — Inductee Grid (Blog module)
   Apply to Blog module: Advanced → CSS Class = inductee-grid
   ========================================================= */


/* =========================================================
   GLOBAL TYPOGRAPHY & COLORS
   ========================================================= */
:root{
  --color-brown-dark:#6b4a35;   /* header/footer background */
  --color-brown-med:#4a3122;    /* headings, links default */
  --color-brown-text:#2b1d16;   /* body text */
  --color-gold:#e09900;         /* primary accent / buttons */
  --color-gold-light:#d4a24c;   /* hover accent */
  --color-bg:#fffaf5;           /* warm page background */
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}

body{
  background:var(--color-bg);
  color:var(--color-brown-text);
  font-family:'Open Sans',sans-serif;
  line-height:1.6;
  font-size:16px;
  margin:0;
}

a{
  color:var(--color-brown-med);
  text-decoration:none;
  transition:color .3s ease;
}
a:hover,a:focus{color:var(--color-gold)}

h1,h2,h3,h4,h5{
  font-family:'Playfair Display','Georgia',serif;
  color:var(--color-brown-med);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .5em;
}
h1{font-size:2.4rem}
h2{font-size:2.0rem}
h3{font-size:1.6rem}
h4{font-size:1.3rem}
h5{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em}

/* Header / Footer base colors */
#main-header,#main-footer{background:var(--color-brown-dark)!important;color:#fff}
#main-footer,#main-footer a{color:#fff!important}
#main-footer a:hover{color:var(--color-gold-light)!important}

/* Global button normalization */
.et_pb_button,button,input[type="submit"]{
  background:var(--color-gold);
  border:2px solid var(--color-gold);
  color:#fff!important;
  border-radius:30px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  transition:all .3s ease;
  padding:.5rem 1.2rem;
}
.et_pb_button:hover,button:hover,input[type="submit"]:hover{
  background:var(--color-gold-light);
  border-color:var(--color-gold-light);
  color:#fff!important;
}

/* =========================================================
   SC Hall of Fame — Inductees (Divi Blog, Layout = Fullwidth)
   Module class: inductee-grid
   ========================================================= */

/* 1) Make a simple, reliable 4 / 2 / 1 flex grid */
.inductee-grid .et_pb_posts{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:24px !important;
}
.inductee-grid .et_pb_posts > article.et_pb_post{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}
/* 4 across desktop */
@media (min-width:981px){
  .inductee-grid .et_pb_posts > article.et_pb_post{
    flex:0 0 calc((100% - 3*24px)/4) !important;
  }
}
/* 2 across tablet */
@media (max-width:980px) and (min-width:641px){
  .inductee-grid .et_pb_posts > article.et_pb_post{
    flex:0 0 calc((100% - 1*24px)/2) !important;
  }
}
/* 1 across mobile */
@media (max-width:640px){
  .inductee-grid .et_pb_posts > article.et_pb_post{
    flex:0 0 100% !important;
  }
}

/* 2) Card internals: equal heights + tidy spacing */
.inductee-grid .post-content{ flex:1 1 auto; margin-top:6px !important; }
.inductee-grid h2.entry-title{
  font-size:clamp(18px,1.6vw,22px) !important;
  line-height:1.3 !important;
  margin:6px 0 6px !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(1.3em * 2);
}

/* 3) Read More button */
/* Inductee & Category Read More buttons – visual style + layout */
.inductee-grid .et_pb_post .more-link,
body.archive.category .et_pb_blog_grid .et_pb_post .more-link{
  display:inline-block;
  margin-top:auto !important;          /* keeps button at bottom of card */
  background:#e09900;                  /* gold background */
  border:2px solid #e09900;
  color:#fff !important;
  padding:.5rem 1.1rem;
  border-radius:30px;
  text-transform:uppercase;
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
  text-decoration:none !important;
  transition:all .2s ease;
}

.inductee-grid .et_pb_post .more-link:hover,
body.archive.category .et_pb_blog_grid .et_pb_post .more-link:hover{
  background:#d4a24c;
  border-color:#d4a24c;
}


/* 4) Safety: don’t let other layouts interfere */
.inductee-grid .et_pb_blog_grid .et_pb_salvattore_content{ display:block !important; }

/* 
 * CATEGORY ARCHIVE IMAGE FIX
 * --------------------------
 * This reduces the oversized featured images that appear on ALL category archive pages 
 * (e.g., /category/african-american, /category/coaches, etc.).
 * It sets a max width, keeps proportions, and centers the images.
 * Does NOT affect the main inductees grid, single inductee pages, or normal blog posts.
 */

body.archive.category .et_pb_post .entry-featured-image-url img,
body.archive.category .et_pb_post a img {
    max-width: 260px;
    height: auto;
    margin: 0 auto 6px; !important;
    display: block;
}

/* 
 * CATEGORY ARCHIVE GRID – EQUAL HEIGHT CARDS
 * ------------------------------------------
 * Makes each inductee card in the Blog grid the same height on category archive pages,
 * even if some have more categories / meta lines than others.
 * Also pushes the Read More button to the bottom for a neat, aligned row.
 */

body.archive.category .et_pb_blog_grid .et_pb_post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Let the middle content (meta/excerpt) expand, so the button sits at the bottom */
body.archive.category .et_pb_blog_grid .et_pb_post .post-content {
    flex-grow: 1;
}

/* Push the Read More button to the bottom of the card */
body.archive.category .et_pb_blog_grid .et_pb_post .more-link {
    margin-top: auto;
}

/* -----------------------------------------
   1. Add spacing between all main nav items
   ----------------------------------------- */
.et_pb_menu .et-menu-nav > ul > li {
    padding-right: 25px !important; /* adjust spacing between links */
}

/* -----------------------------------------
   2. Add extra spacing before search icon
   ----------------------------------------- */
.et_pb_menu__icon {
    margin-left: 20px !important; /* increase if needed */
}

/* -----------------------------------------
   3. Search overlay background color
   ----------------------------------------- */
/* Force entire search overlay background to white */
.et_search_form_container,
.et_pb_menu .et_pb_menu__search-container,
.et_pb_menu__search-container {
    background-color: #ffffff !important;
}

/* -----------------------------------------
   4. Search input field styling
   ----------------------------------------- */
/* Force entire search overlay background to white */
.et_search_form_container,
.et_pb_menu .et_pb_menu__search-container,
.et_pb_menu__search-container {
    background-color: #ffffff !important;
}

/* Force the input field background to white */
.et-search-form,
.et-search-field,
.et_pb_menu__search-container input.et-search-field,
.et_search_form_container input.et-search-field,
#et_search_submit + .et-search-field,
.et_pb_fullscreen_nav_container input.et-search-field {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Optional: placeholder color */
.et-search-field::placeholder {
    color: #666666 !important;
}

/* Remove Divi's default border glow (if showing) */
.et-search-field:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* -----------------------------------------
   5. Placeholder text color
   ----------------------------------------- */
.et_search_form_container input.et-search-field::placeholder {
    color: #666666 !important;
}

/* ================================
   SEARCH RESULTS PAGE STYLING
   Targets Blog Module with class: search-results-blog
   ================================ */

/* 1. Make featured images smaller (no more full-width monsters) */
.search-results-blog .et_pb_post .entry-featured-image-url {
    max-width: 280px;           /* thumbnail-ish width */
    margin: 0 0 15px 0;   /* center image and add space below */
    display: block;
    text-align: left;
}

/* 2. Make sure image itself scales nicely */
.search-results-blog .et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Style category/meta links so they look like links */
.search-results-blog .post-meta a {
    text-decoration: underline;
    font-weight: 600;
}

/* 4. Tidy up the meta line (optional, so it isn't too loud) */
.search-results-blog .post-meta {
    font-size: 13px;
    opacity: 0.8;
}


/* Force left alignment on images in Search Results */
.search-results-blog .entry-featured-image-url {
    margin-left: 0 !important;  /* remove auto-centering */
    margin-right: auto !important;
    text-align: left !important;
}

.search-results-blog .entry-featured-image-url img {
    display: block !important;
    margin: 0 !important;
}

/* Move Divi contact form labels above the input fields */
.et_pb_contact_form_label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    opacity: 1 !important;
}

/* Ensure labels don't appear inside the field */
.et_pb_contact_form_container .et_pb_contact_field input::placeholder,
.et_pb_contact_form_container .et_pb_contact_field textarea::placeholder {
    opacity: 0.6;
}

.et_pb_contact_form_container .et_pb_contact_field {
    margin-bottom: 20px;
}

/* Hide placeholder text inside ALL Divi contact form fields */
.et_pb_contact_form_container input::placeholder,
.et_pb_contact_form_container textarea::placeholder,
.et_pb_contact_form_container select::placeholder {
    color: transparent !important;
}

/* Hide Divi's duplicate checkbox placeholder text */
.et_pb_contact_field[data-type="check"] .et_pb_contact_field_options_title {
    display: none !important;
}