/* ==========================================================================
   INSTEAD NUTRITION · custom.css · v2 (October 2026)
   Matches Brand Guidelines v1.0. Hero colour: Deep Forest #1A2618.
   v2 changes: link colours follow light/dark surfaces (contrast fix), bottom
   nav contrast, --ci-dark-charcoal alias, named hover tokens, missing
   .btn-secondary:hover, Bootstrap focus/check colours on brand.
   ========================================================================== */

/* ==========================================================================
   1. CORPORATE FONTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&display=swap');

/* ==========================================================================
   2. STRICT BRAND COLOUR PALETTE
   ========================================================================== */
:root {
    /* Text & Neutrals */
    --ci-text: #1a1a1a;
    --ci-dark-charcoal: #1a1a1a;   /* alias used by ui_style_guide.php */
    --ci-white: #ffffff;
    --ci-muted: #666666;

    /* Backgrounds */
    --ci-alabaster: #f2f3ec;

    /* Greens (Primary Brand) — Deep Forest is the HERO colour */
    --ci-deep-forest: #1a2618;
    --ci-pine: #2c3624;
    --ci-sage: #3d4b3b;
    --ci-muted-moss: #76885c;
    --ci-olive: #b6b86f;

    /* Accents */
    --ci-warm-beige: #dbd2a9;
    --ci-oat: #d6d2ba;
    --ci-off-white: #ece6d6;
    --ci-muted-gold: #e0cd4f;   /* highlights on DARK backgrounds only */
    --ci-rust: #8c2f0b;         /* errors, delete, over target only */

    /* Interaction shades (hover / tint versions of palette colours) */
    --ci-rust-dark: #6a2308;
    --ci-gold-dark: #c9b63c;
    --ci-rust-tint: #faeaea;

    /* Link colours: Sage on light surfaces (8.3:1 contrast).
       Dark surfaces switch these to Olive further down (section 3b). */
    --ci-link: var(--ci-sage);
    --ci-link-hover: var(--ci-muted-moss);

    /* Bring Bootstrap's own variables onto the brand palette */
    --bs-link-color: #3d4b3b;
    --bs-link-color-rgb: 61, 75, 59;
    --bs-link-hover-color: #76885c;
    --bs-link-hover-color-rgb: 118, 136, 92;
    --bs-focus-ring-color: rgba(61, 75, 59, 0.25);
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY & BACKGROUND
   ========================================================================== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--ci-alabaster);
    color: var(--ci-text);
    padding-bottom: 80px;
    font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ci-deep-forest);
}

.text-muted { color: var(--ci-muted) !important; }
.small, small { font-size: 0.8rem; }

/* Standard links — the colour comes from --ci-link, so it flips
   automatically on dark surfaces without extra !important overrides. */
a {
    color: var(--ci-link) !important;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--ci-link-hover) !important;
}

/* Links inside running text are underlined so they are easy to spot */
p a:not(.btn):not(.social-link),
.form-text a,
.guide-body-example a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   3b. DARK SURFACES — links switch to Olive (7.6:1 on Deep Forest)
   -------------------------------------------------------------------------- */
.navbar-custom,
.card-dark,
.offcanvas,
.accordion-dark .accordion-button,
.bg-dark,
.bg-deep-forest,
.bg-pine {
    --ci-link: var(--ci-olive);
    --ci-link-hover: var(--ci-off-white);
}

/* Override Bootstrap's default pink code colour */
code {
    color: var(--ci-sage) !important;
    font-weight: 500;
}
.card-dark code { color: var(--ci-olive) !important; }

/* Bootstrap checkboxes, radios and switches on brand */
.form-check-input:checked {
    background-color: var(--ci-sage);
    border-color: var(--ci-sage);
}
.form-check-input:focus {
    border-color: var(--ci-sage);
    box-shadow: 0 0 0 0.2rem rgba(61, 75, 59, 0.2);
}
.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(61, 75, 59, 0.3) !important;
}

/* ==========================================================================
   4. CUSTOM APP MACROS
   ========================================================================== */
.macro-calories { color: var(--ci-muted-moss) !important; }
.macro-protein { color: var(--ci-muted-moss) !important; }
.macro-carbs { color: var(--ci-muted-moss) !important; }
.macro-fat { color: var(--ci-muted-moss) !important; }

/* ==========================================================================
   5. BUTTONS (ROUNDED, SMALL/MEDIUM ONLY)
   ========================================================================== */
.btn {
    border-radius: 50px !important; /* Forces all buttons to be pill-shaped */
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 1.2rem;
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* Buttons are <a> tags sometimes: keep their own text colours */
a.btn { text-decoration: none !important; }

.btn-primary { background-color: var(--ci-muted-moss); border-color: var(--ci-muted-moss); color: var(--ci-white); }
.btn-primary:hover { background-color: var(--ci-sage); border-color: var(--ci-sage); color: var(--ci-white); }

.btn-secondary { background-color: var(--ci-pine); border-color: var(--ci-pine); color: var(--ci-white); }
.btn-secondary:hover { background-color: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-white); }

.btn-success { background-color: var(--ci-olive); border-color: var(--ci-olive); color: var(--ci-text); }
.btn-success:hover { background-color: var(--ci-muted-moss); border-color: var(--ci-muted-moss); color: var(--ci-white); }

.btn-danger { background-color: var(--ci-rust); border-color: var(--ci-rust); color: var(--ci-white); }
.btn-danger:hover { background-color: var(--ci-rust-dark); border-color: var(--ci-rust-dark); color: var(--ci-white); }

.btn-warning { background-color: var(--ci-muted-gold); border-color: var(--ci-muted-gold); color: var(--ci-deep-forest); }
.btn-warning:hover { background-color: var(--ci-gold-dark); border-color: var(--ci-gold-dark); color: var(--ci-deep-forest); }

.btn-info { background-color: var(--ci-sage); border-color: var(--ci-sage); color: var(--ci-white); }
.btn-info:hover { background-color: var(--ci-pine); border-color: var(--ci-pine); color: var(--ci-white); }

.btn-light { background-color: var(--ci-off-white); border-color: var(--ci-off-white); color: var(--ci-text); }
.btn-light:hover { background-color: var(--ci-oat); border-color: var(--ci-oat); color: var(--ci-text); }

.btn-dark { background-color: var(--ci-pine); border-color: var(--ci-pine); color: var(--ci-white); }
.btn-dark:hover { background-color: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-white); }

/* Make sure <a class="btn ..."> keeps the button's text colour, not the link colour */
a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-info, a.btn-dark { color: var(--ci-white) !important; }
a.btn-success, a.btn-light { color: var(--ci-text) !important; }
a.btn-warning { color: var(--ci-deep-forest) !important; }

/* Table/Card Icon Actions */
.btn-icon-only {
    width: 35px; height: 35px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background-color: transparent; border: none;
    color: var(--ci-muted);
    transition: all 0.2s;
}
/* Small modifier for tight tables to prevent stacking */
.btn-icon-sm {
    width: 28px;
    height: 28px;
}
.btn-icon-sm i {
    font-size: 0.95rem !important; /* Scales down the icon inside */
}
.btn-icon-only:hover { background-color: var(--ci-off-white); color: var(--ci-pine); }
.btn-icon-only.text-danger:hover { background-color: var(--ci-rust-tint); color: var(--ci-rust) !important; }

/* ==========================================================================
   6. BADGES
   ========================================================================== */
.badge {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: 50px;
}
.badge-primary, .bg-primary { background-color: var(--ci-muted-moss) !important; color: var(--ci-white) !important; }
.badge-secondary, .bg-secondary { background-color: var(--ci-warm-beige) !important; color: var(--ci-text) !important; }
.badge-success, .bg-success { background-color: var(--ci-olive) !important; color: var(--ci-text) !important; }
.badge-danger, .bg-danger { background-color: var(--ci-rust) !important; color: var(--ci-white) !important; }
.badge-warning, .bg-warning { background-color: var(--ci-muted-gold) !important; color: var(--ci-text) !important; }
.badge-info, .bg-info { background-color: var(--ci-sage) !important; color: var(--ci-white) !important; }
.badge-light, .bg-light { background-color: var(--ci-off-white) !important; color: var(--ci-text) !important; }
.badge-dark, .bg-dark { background-color: var(--ci-pine) !important; color: var(--ci-white) !important; }

/* ==========================================================================
   7. CARD STRUCTURES
   ========================================================================== */
.card-clean {
    background-color: var(--ci-white);
    border: 1px solid var(--ci-white); /* invisible on purpose; use var(--ci-oat) for a visible edge */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    padding: 1.5rem;
}

.card-dark {
    background-color: var(--ci-pine);
    color: var(--ci-white);
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
}
.card-dark h1, .card-dark h2, .card-dark h3, .card-dark h4, .card-dark h5, .card-dark h6, .card-dark p {
    color: var(--ci-white);
}

.card {
    background-color: var(--ci-off-white);
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
}

/* ==========================================================================
   8. ACCORDIONS
   ========================================================================== */
.accordion-item {
    border: none;
    border-radius: 12px !important;
    margin-bottom: 1.5rem;
    overflow: hidden;
    background-color: var(--ci-white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.accordion-button {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: none !important;
    padding: 1rem 1.25rem;
}
.accordion-body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: var(--ci-text);
    padding: 1.25rem;
    background-color: var(--ci-white);
}

/* Light Accordion */
.accordion-light .accordion-button {
    background-color: var(--ci-oat);
    color: var(--ci-text);
}
.accordion-light .accordion-button:not(.collapsed) {
    background-color: var(--ci-warm-beige);
    color: var(--ci-text);
}

/* Green (Muted Moss) Accordion */
.accordion-moss .accordion-button {
    background-color: var(--ci-muted-moss);
    color: var(--ci-text);
}
.accordion-moss .accordion-button:not(.collapsed) {
    background-color: var(--ci-sage);
    color: var(--ci-white);
}

/* Dark Accordion */
.accordion-dark .accordion-item {
    border-color: var(--ci-pine);
    background-color: var(--ci-pine);
}
.accordion-dark .accordion-button {
    background-color: var(--ci-pine);
    color: var(--ci-white);
}
.accordion-dark .accordion-button:not(.collapsed) {
    background-color: var(--ci-deep-forest);
    color: var(--ci-white);
}
.accordion-dark .accordion-body {
    background-color: var(--ci-white) !important;
    color: var(--ci-text) !important;
}

/* ==========================================================================
   9. FORMS (MOBILE-SIZED)
   ========================================================================== */
.form-control, .form-select {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--ci-oat);
    background-color: var(--ci-white);
    color: var(--ci-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ci-sage);
    box-shadow: 0 0 0 0.2rem rgba(61, 75, 59, 0.2);
}
.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ci-sage);
    margin-bottom: 0.3rem;
}

/* ==========================================================================
   10. APP NAVIGATION (HEADER, FOOTER & FAB)
   ========================================================================== */
.navbar-custom {
    background-color: var(--ci-deep-forest);
    padding: 12px 0;
}
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background-color: var(--ci-alabaster);
    border-top: 1px solid var(--ci-oat);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 15px 0;
    z-index: 1030;
}
a.nav-item-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--ci-muted-moss) !important;   /* inactive (was Olive: too faint on Alabaster) */
    text-decoration: none !important;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
a.nav-item-icon i {
    font-size: 1.4rem;
    margin-bottom: 2px;
}
a.nav-item-icon:hover, a.nav-item-icon.active {
    color: var(--ci-deep-forest) !important;  /* active = hero colour */
}
.fab-btn {
    background-color: var(--ci-deep-forest);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.fab-btn i {
    color: var(--ci-olive);
    font-size: 2.4rem;
}
.fab-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   11. SOCIAL & CONTACT LINKS (Font Awesome icons)
   ========================================================================== */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.2s ease-in-out;
}
.social-link:hover {
    opacity: 0.8;
}

/* Colour variants */
.social-link-light { color: var(--ci-deep-forest) !important; }
.social-link-light i { color: var(--ci-sage) !important; }

.social-link-dark { color: var(--ci-white) !important; }
.social-link-dark i { color: var(--ci-olive) !important; }

/* Size variants */
.social-link-lg { font-size: 1.2rem; }
.social-link-lg i { font-size: 1.6rem; }

.social-link-md { font-size: 0.95rem; }
.social-link-md i { font-size: 1.25rem; }

.social-link-sm { font-size: 0.8rem; }
.social-link-sm i { font-size: 1rem; }

/* ==========================================================================
   12. OPTIONAL SWITCHES — remove the comment markers to turn one on
   ========================================================================== */

/* A) Deep Forest primary button (ties the app to the hero colour and
      raises button contrast from 3.9:1 to 15.7:1)
.btn-primary { background-color: var(--ci-deep-forest); border-color: var(--ci-deep-forest); color: var(--ci-white); }
.btn-primary:hover { background-color: var(--ci-sage); border-color: var(--ci-sage); color: var(--ci-white); }
.badge-primary, .bg-primary { background-color: var(--ci-deep-forest) !important; color: var(--ci-white) !important; }
*/

/* B) 16px inputs on phones (stops iPhone Safari zooming in when a field is tapped)
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px !important; }
}
*/