/*
Theme Name:   Big Caring Foundation Child
Theme URI:    https://dataflows.co
Author:       KK
Author URI:   https://dataflows.co
Description:  Child theme for Data Flows. Safe space to add custom CSS overrides and style experiments without modifying the parent theme files.
Template:     bigcaringfoundation
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 8.3
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bigcaringfoundation-child
*/

/*
 * =========================================================================
 * CHILD THEME CUSTOM CSS
 * =========================================================================
 *
 * Add your CSS overrides below. All parent theme CSS variables (from
 * dataflows/style.css) are available here.
 *
 * Examples:
 *   :root { --color-primary: #e63946; }          — change brand colour
 *   .site-header { background: var(--color-surface); } — tweak header bg
 *
 * =========================================================================
 */



@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

:root {
  /* =========================================
     COLORS
  ========================================= */
  --primary: #FCAF17;
  --secondary: #D97706;
  --black: #0F172A;
  --dark-gray: #333333;
  --light-gray: #888888;
  --stroke-1: #DBDCDF;
  --stroke-2: #E2E8F0;
  --bg-1: #F8FAFC;
  --bg-2: #FAFAFA;
  --bg-3: #F8FAFC;

  /* =========================================
     TYPOGRAPHY VARIABLES
  ========================================= */
  --font-main: "Urbanist", sans-serif;
}

/* =========================================
   GLOBAL & BODY
========================================= */
body {
  font-family: var(--font-main) !important;
  color: var(--dark-gray);
  background-color: var(--bg-1);
  overflow-x: clip;
}

#page { overflow-x: clip; }
body.mobile-menu-active { overflow-y: hidden; }
:last-child { margin-bottom: 0; }

/* =========================================
   COLORS (UTILITY CLASSES)
========================================= */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-black { color: var(--black) !important; }
.text-dark-gray { color: var(--dark-gray) !important; }
.text-light-gray { color: var(--light-gray) !important; }
.text-white { color: #FFFFFF !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-light { background-color: var(--bg-1) !important; }

/* =========================================
   TYPOGRAPHY
========================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main) !important;
  color: var(--black);
  margin-top: 0;
}

/* H1: ExtraBold 80px, Auto Line Height, -2% Letter Spacing */
h1 {
  font-size: 80px;
  font-weight: 800; 
  line-height: normal;
  margin-bottom: 20px;
}

/* H2: Bold 46px, 54px Line Height, -1px Letter Spacing */
h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 54px; /* Approx 1.17 */
  margin-bottom: 20px;
}

/* H3: Bold 40px, 48px Line Height, -1px Letter Spacing */
h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px; /* 1.2 */
  margin-bottom: 15px;
}

/* H4 & H5 mapped from the remaining UI scale (0 letter spacing) */
h4 {
  font-size: 30px; /* Using Bold 30 */
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
}

h5 {
  font-size: 28px; /* Using Semi 28 */
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a { color: inherit; }
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover { color: var(--primary); }

/* Paragraphs & Lists */
p {
  font-family: var(--font-main) !important;
  font-size: 16px; /* Based on Reg 16 */
  font-weight: 400;
  color: var(--dark-gray);
  margin: 0 0 15px;
  line-height: 1.6;
  letter-spacing: 0;
}
/* p:last-child { margin: 0; } */
p strong { font-weight: 700; color: var(--black); }

ul, ol { padding: 0; margin-left: 25px; letter-spacing: 0; }
ul:last-child, ol:last-child { margin-bottom: 0; }
ul li, ol li {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-gray);
  margin: 0px;
}

.bold { font-weight: 700; }
.italic { font-style: italic; }


/* =========================================
   BUTTONS AND LINKS
========================================= */
a { color: var(--secondary); transition: all 0.3s ease; }
a:hover { color: var(--primary); }
a:focus { outline: none; }

.main-navigation .menu a:hover, 
.main-navigation .menu a:focus, 
.main-navigation .menu .current-menu-item > a, 
.main-navigation .menu .current-page-ancestor > a{
    background-color: #fff;
    color: var( --primary) !important;
}

/* Base Button Styles */
.btn {
  font-family: var(--font-main) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px; /* Standard rounding from UI */
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  letter-spacing: 0;
}

.btn:focus { box-shadow: none; }

/* Primary Yellow/Orange Button (from UI: Book a Call) */
.btn-primary {
  background-color: var(--primary) !important;
  color: var(--black) !important; 
}
.btn-primary:hover {
  background-color: var(--secondary) !important;
  color: var(--black) !important;
}

/* Dark Button (from UI: See What We Build) */
.btn-dark {
  background-color: var(--dark-gray) !important;
  color: #FFF !important;
}
.btn-dark:hover {
  background-color: var(--black) !important;
  color: #FFF !important;
}

/* Outline Button (from UI: Explore Services) */
.btn-outline {
  background-color: #FFF !important;
  border: 1px solid var(--stroke-1) !important;
  color: var(--dark-gray) !important;
}
.btn-outline:hover {
  border-color: var(--dark-gray) !important;
  color: var(--black) !important;
}

/* Pill Button Variant (from Ribbon of Hope banner) */
.btn-pill {
  border-radius: 50px !important;
  padding: 12px 32px;
}

/* Square Icon Buttons (from UI) */
.btn-icon-square {
  background-color: var(--primary);
  color: var(--black);
  width: 70px;
  height: 70px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.btn-icon-square:hover {
  background-color: var(--secondary);
  transform: translateY(-3px);
}
.btn-icon-square svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Elementor Button Override */
.elementor-widget-button.btn .elementor-button {
  font-family: var(--font-main) !important;
  border-radius: 8px;
}

/* =========================================
   UI COMPONENTS (CARDS)
========================================= */
#masthead > .container {
    height: 100% !important;
    max-width: 1280px;
    padding: 0;
}

#primary-menu > li.menu-item,
#primary-menu > ul.sub-menu {
    margin: 0 0 auto !important;
}

/* Dark Image Overlay Cards (e.g., Molecular Audit) */
.card-overlay {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}
.card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0) 70%);
  z-index: 1;
}
.card-overlay > * { position: relative; z-index: 2; }
.card-overlay h3 { color: #FFF; margin-bottom: 8px; }
.card-overlay p { color: var(--stroke-2); font-size: 14px; }

/* Solid Color Info Cards (e.g., Ribbon of Hope C.A.R.E cards) */
.card-info {
  background-color: var(--primary);
  border-radius: 16px;
  padding: 30px;
  color: var(--black);
  height: 100%;
}
.card-info.alt { background-color: var(--secondary); color: #FFF; }
.card-info h3 { color: inherit; font-size: 40px; margin-bottom: 15px;}
.card-info h4 { color: inherit; font-size: 20px; margin-bottom: 10px;}
.card-info p { color: inherit; font-size: 14px;}

.site-content {padding: 0 !important;}

.section-box {
    max-width: 1280px;
    margin: 0 auto;
}
/* =========================================
   ELEMENTOR FULL WIDTH FIX
========================================= */
:is(.elementor-section-wrap,[data-elementor-id]) > .elementor-element.e-con-full {
  position: relative; width: 100vw; max-width: 100vw; left: 50% !important; margin-left: -50vw !important; padding: 0;
}
.elementor-element.e-con > .e-con-inner { max-width: 100%; }

/* =========================================
   RESPONSIVE UTILITIES
========================================= */
.desktop-only { display: block; }
.mobile-only { display: none !important; }
.br-desktop { display: inline; }
.br-mobile { display: none; }

/* =========================================
   MEDIA QUERIES
========================================= */

@media screen and (min-width: 1200px) {
  .container { max-width: 1140px; }
  .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1140px !important; padding: 0 15px; }
}

@media screen and (min-width: 1440px) {
  .container { max-width: 1320px; }
  .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1320px !important; }
}

/* Tablet & Smaller Desktop */
@media screen and (max-width: 1199px) {
  :is(.elementor-section-wrap,[data-elementor-id]) > .elementor-element.e-con-full {
    width: calc(100% + 30px); max-width: calc(100% + 30px); left: initial !important; margin: 0 -15px !important;
  }
  .container { max-width: 100%; height: 100%; }
  
  h1 { font-size: 60px; }
  h2 { font-size: 38px; line-height: 1.2; }
  h3 { font-size: 32px; line-height: 1.2; }
  p { font-size: 16px; }
  .btn { padding: 12px 24px; font-size: 15px; }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .br-desktop { display: none; }
  .br-mobile { display: inline; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }
  
  .card-overlay { min-height: 250px; }
  .btn-icon-square { width: 60px; height: 60px; }
}

.main-navigation .menu .sub-menu {
    margin-left: 0 !important;
}
/*footer*/

/* =========================================
   SITE FOOTER
========================================= */
.site-footer {
    background-color: #242424; /* Dark gray background */
    background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.20) -20%, transparent 40%);
    color: #FFFFFF;
    padding: 80px 0 30px;
    font-family: var(--font-main);
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; /* Custom widths for columns */
    gap: 40px;
    margin-bottom: 60px;
}

/* Col 1: Contact Info */
.footer-logo img {
    max-width: 200px;
    height: auto;
    margin-bottom: 30px;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #E2E8F0;
    line-height: 1.6;
}

.footer-contact-list li.align-top {
    align-items: flex-start;
}
.footer-contact-list li.align-top svg {
    margin-top: 4px;
}

/* Col 2 & 3: Menus */
.footer-heading {
    color: #FCAF17;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 15px;
}

.footer-menu li a {
    color: #E2E8F0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-menu li a:hover {
    color: #FCAF17;
}

/* Col 4: Newsletter */
.newsletter-text {
    font-size: 14px;
    color: #E2E8F0;
    line-height: 1.5;
    margin-bottom: 20px;
}

.footer-subscribe-form {
    display: flex;
    margin-bottom: 30px;
}

.footer-subscribe-form input {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 50px 0 0 50px;
    font-size: 14px;
    outline: none;
}

.footer-subscribe-form button {
    background-color: #FCAF17;
    color: #242424;
    border: none;
    padding: 0 25px;
    border-radius: 0 50px 50px 0;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.footer-subscribe-form button:hover {
    background-color: #D97706;
}

/* Socials */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-label {
    color: #FCAF17;
    font-weight: 700;
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    display: flex;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #FCAF17;
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    text-align: center;
}

.footer-bottom p {
    color: #94A3B8;
    font-size: 13px;
    margin: 0;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 767px) {
    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .site-footer {
      background-color: #242424; /* Dark gray background */
      background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.20) -20%, transparent 40%);
      color: #FFFFFF;
      padding: 80px 20px 30px;
      font-family: var(--font-main);
  }
}

.mobile-menu .menu a:hover, .mobile-menu .menu a:focus, .mobile-menu .menu .current-menu-item > a {
      color: var(--primary) !important;
    }

.entry-header {
  display: none;
}

.site-header__inner {
  padding: 0 20px;
}