/* * KiddoKudos Custom Stylesheet
 * ----------------------------
 * This file contains all the custom styling for the KiddoKudos website.
 * Centralizing the styles here ensures a consistent look and feel across all pages.
 */

/* CSS Variables for the Color Palette */
:root {
    --kk-deep-purple: #6A1B9A;
    --kk-rich-gold: #FFC107;
    --kk-soft-lilac: #C39BD3;
    --kk-warm-amber: #FFD700;
    --kk-light-cream: #F5E6CC;
    --kk-gentle-gray: #E0E0E0;
    --kk-dark-text: #343a40; /* A darker gray for general text */
}

/* Global Body and Typography Styles */
body {
    font-family: "Sarabun", "Lato", sans-serif;
    font-weight: 400; /* Regular */
    font-style: normal;
    background-color: var(--kk-light-cream);
    color: var(--kk-dark-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sarabun", "Montserrat", sans-serif;
    font-weight: 700; /* Bold */
    font-style: normal;
    color: var(--kk-deep-purple);
}

/* Reusable Utility Classes */
.section-padding {
    padding: 4rem 0;
}

.rounded-1-5 {
    border-radius: 1.5rem !important;
}

/* Fix for iPhone Safe Area (Notch/Dynamic Island) */
.sticky-top {
    padding-top: calc(1rem + env(safe-area-inset-top));
}

/* --- NAV BAR 1 (Updated) --- */
.navbar {
    padding: 1rem; /* Added from NAV BAR 2 */

  /* This creates the bottom-most, thinner deep-purple border.
     The total thickness (2px) is the sum of both borders you want. */
  border-bottom: 2px solid var(--kk-deep-purple);

  /* This paints the thicker, gold border on TOP of the deep-purple one.
     The inset shadow covers the top 2px of the 5px border. */
  box-shadow: inset 0 -5px 0 0 var(--kk-rich-gold);
}

.navbar-brand {
    color: var(--kk-deep-purple) !important;
}

.navbar-nav .nav-link {
    color: var(--kk-deep-purple);
}

.navbar-nav .nav-link.active {
    font-weight: 700;
    color: var(--kk-deep-purple) !important;
}

/* hover styles */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--kk-soft-lilac);
    color: var(--kk-deep-purple);
    font-weight: 700;
}

/* Popover Styles */
.navbar .navbar-nav .nav-link {
    padding: 0.65rem 1.25rem;
    margin: 0 0.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--kk-rich-gold) !important;
    background-color: var(--kk-deep-purple);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(106, 27, 154, 0.2);
}

/* --- Styles added from NAV BAR 2 --- */
.lang-switcher .lang-flag {
    width: 30px;
    height: auto;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    opacity: 0.6;
    margin: 0 5px;
    border: 2px solid transparent;
}

.lang-switcher .lang-flag:hover {
    opacity: 1;
    transform: scale(1.1);
}

.lang-switcher .lang-flag.active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--kk-deep-purple);
}


/* --- Hero Section --- */
.hero-section {
    background-color: var(--kk-soft-lilac);
    color: white;
    font-weight: 700;
    padding: 6rem 0;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- Footer --- */
.footer-custom {
  background-color: var(--kk-soft-lilac);
  color: var(--kk-deep-purple); /* Use a dark color for text on a light background */

  /* --- 10px Two-Tone Border --- */
  /* This creates the bottom-most, thinner gold border (4px) */
  border-top: 6px solid var(--kk-deep-purple);
  /* This paints the thicker, deep-purple border (6px) on TOP of the gold one */
  box-shadow: inset 0 10px 0 0 var(--kk-rich-gold);
}

/* Style for headings and links in the footer */
.footer-custom h5 {
  color: var(--kk-deep-purple);
}

.footer-custom a {
  color: var(--kk-deep-purple);
  text-decoration: none; /* Optional: removes underline from links */
}

.footer-custom a:hover {
  color: var(--kk-rich-gold); /* Optional: hover effect for links */
}

.footer-copyright {
  /* Use !important to ensure this color overrides Bootstrap's default styles */
  border-color: var(--kk-deep-purple) !important;
}

#cta {
  /* This adds the soft lilac shadow around the entire element */
  box-shadow: 0 10px 25px -5px var(--kk-soft-lilac);
}

/* This media query applies the max-width ONLY on medium screens and larger */
@media (min-width: 768px) {
  #cta {
    max-width: 60%;
  }
}

/* Buttons */
.btn-primary {
    background-color: var(--kk-rich-gold);
    border-color: var(--kk-rich-gold);
    color: var(--kk-dark-text);
    border-radius: 0.75rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-primary:hover {
    background-color: #E6C200;
    border-color: #E6C200;
    color: var(--kk-dark-text);
}

.btn-light {
    color: var(--kk-deep-purple);
    background-color: white;
    border-color: white;
    border-radius: 0.75rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(255,255,255,0.3);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.btn-light:hover {
    background-color: var(--kk-gentle-gray);
    border-color: var(--kk-gentle-gray);
    color: var(--kk-deep-purple);
}

/* Card Styles */
.feature-card, .card-how-it-works {
    background-color: #ffffff;
    border-radius: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out;
    height: 100%;
}
.feature-card:hover, .card-how-it-works:hover {
    transform: translateY(-7px);
}
.feature-card {
    padding: 1.5rem;
}


/* Icon Styles */
.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: var(--kk-deep-purple);
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Specific Component Styles */
.card-how-it-works .icon-square.step-1 { background-color: var(--kk-deep-purple); }
.card-how-it-works .icon-square.step-2 { background-color: var(--kk-rich-gold); color: var(--kk-dark-text);}
.card-how-it-works .icon-square.step-3 { background-color: var(--kk-deep-purple); }
.card-how-it-works .icon-square.step-4 { background-color: var(--kk-rich-gold); color: var(--kk-dark-text);}

.feature-card.border-top {
    border-top-width: 5px !important;
}

/* Bootstrap Overrides */
.bg-light {
    background-color: var(--kk-gentle-gray) !important;
}
.bg-primary {
    background-color: var(--kk-deep-purple) !important;
}
.text-primary {
    color: var(--kk-deep-purple) !important;
}
.text-secondary {
    color: var(--kk-dark-text) !important;
}
.text-white-50 {
    color: rgba(255,255,255,0.7) !important;
}

/* Benefits Section Overrides */
.feature-card .bg-success { background-color: var(--kk-deep-purple) !important; }
.feature-card .bg-info { background-color: var(--kk-rich-gold) !important; }
.feature-card .bg-warning { background-color: var(--kk-deep-purple) !important; }

.feature-card .text-success { color: var(--kk-deep-purple) !important; }
.feature-card .text-info { color: var(--kk-rich-gold) !important; }
.feature-card .text-warning { color: var(--kk-deep-purple) !important; }
    
.border-success { border-color: var(--kk-deep-purple) !important; }
.border-info { border-color: var(--kk-rich-gold) !important; }
.border-warning { border-color: var(--kk-deep-purple) !important; }

/* * ======================================================
 * Centralized Custom Styles 
 * ======================================================
 */

/* --- Custom List Styles (from daily-checklist.php) --- */
.list-custom-gold {
    list-style: none;
    padding-left: 0;
}
.list-custom-gold li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}
.list-custom-gold li::before {
    content: '•';
    color: #FFC107; /* --kk-rich-gold */
    font-size: 1.5rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: -0.1rem;
}

/* --- Icon Color Override (from daily-checklist.php) --- */
.feature-card .icon-square {
    color: #FFC107;
}

/* --- ADHD Affirmation Styles (Footer) --- */
.adhd-container {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers the children (text block and button) */
    text-align: center;
    gap: 15px;
}

.adhd-line {
    width: 100%;
    line-height: 1.4;
    color: var(--kk-deep-purple);
    font-family: "Sarabun", "Montserrat", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed from 'center' to 'flex-start' for left alignment */
    gap: 5px;
}
.adhd-line:not(:last-child) {
    margin-bottom: 6px;
}

.adhd-letter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: var(--kk-deep-purple);
    color: var(--kk-rich-gold);
    border: 2px solid var(--kk-rich-gold);
    border-radius: 6px;
    font-family: 'Arial Black', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

#alternativeDisplay {
    width: 100%;
    text-align: left; /* Changed from 'center' to 'left' */
}

.refresh-btn {
    padding: 5px 15px;
    font-size: 0.9rem;
    align-self: center; /* This keeps the button centered */
}

/* Responsive Adjustments for ADHD Affirmation */
@media (max-width: 992px) {
    .adhd-line {
        font-size: 1rem;
        /* The flex-start justification will apply here as well */
    }
    .adhd-letter {
        width: 30px;
        height: 30px;
        font-size: 1.3rem;
    }
}