/*
Theme Name: Citadela Circle
Theme URI: https://citadelacircle.ae
Description: Custom theme styling for the Citadela Circle platform, using a warm sunset-inspired colour scheme.
Author: John Mottram
Author URI: 
Version: 1.0.0
Text Domain: citadela-circle
*/

/* -------------------------------------------
   GLOBAL FONT CHANGE
   ------------------------------------------- */
body {
    /* Set the body font to Google Sans Flex, falling back to Arimo, then a generic sans-serif. */
    font-family: 'Google Sans Flex', 'Arimo', sans-serif;
}

/* COLOURS — SUNSET THEME */

/* Deep mountains / shadows */
.dark-primary-color      { background: #1A0F1A; }   /* deep plum-charcoal */

/* Mid warm orange-red (general brand primary) */
.default-primary-color   { background: #C44707; }   /* burnt orange */

/* Soft warm highlight (light primary) */
.light-primary-color     { background: #F2C36B; }   /* warm golden sand */

/* Accent = bright sun yellow/orange */
.accent-color            { background: #FFB400; }   /* vivid sunset yellow */
.accent-text-color       { color: #FFB400; }

/* Text colours */
.primary-text-color      { color: #3B2A26; }        /* warm dark brown-grey */
.secondary-text-color    { color: #FFFFFF; }        /* for dark backgrounds */

/* Dividers & subtle backgrounds */
.divider-color           { background: #F7E3C1; }   /* pale warm cream */
.divider-text-color      { color: #F7E3C1; }

/* Core neutrals */
.white-color             { background: #FFFFFF; }
.black-color             { background: #1A0F1A; }   /* matches dark primary */

/* Position the header on top of the content */
.site-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Ensures it sits above images/sliders */
    background-color: #1A0F1A; /* dark-primary-color */
    
    /* Optional: Add a subtle bottom border to separate it from the content */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Styling for footer text and navigation links */
.site-footer a {
    /* Inherit the white color from the parent text-white class */
    color: inherit; 
    transition: color 0.2s ease;
}
.site-footer a:hover,
.site-footer a:focus {
    /* Use the vivid sunset yellow accent color on hover */
    color: #FFB400; 
}

/* Styling to reverse member navigation icon colors */
.navbar-dark .navbar-nav .nav-link {
    /* Set default color to the Accent Color (vivid sunset yellow) */
    color: #FFFFFF; 
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    /* Set hover/focus color to White */
    color: rgb(221, 218, 218); 
}

/* Styling for links (icons) within the new full-width member banner */

/* Default color: Accent Color (#FFB400 - Vivid Sunset Yellow) */
.site-header a {
    color: #FFFFFF; 
    transition: color 0.2s ease;
}

/* Hover/Focus color: White (#FFFFFF) */
.site-header a:hover,
.site-header a:focus {
    color: #3B2A26; 
}

/* ** FINE-GRAINED ALIGNMENT FIX ** */
.site-header a i {
    transform: translateY(-4px); /* Lifts the icons 4 pixels up to match the center of the larger image */
    display: inline-block;
}

/* -------------------------------------------
   A. Base Button Color Scheme (Yellow/Plum Swap)
   ------------------------------------------- */

/* Standard theme primary buttons (used for 'Publish to Loop' etc.) */
.btn-primary {
    /* DEFAULT: Yellow Background, Plum Text */
    background-color: #FFB400 !important;
    border-color: #FFB400 !important;
    color: #1A0F1A !important; 
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    /* HOVER: Plum Background, White Text */
    background-color: #1A0F1A !important;
    border-color: #1A0F1A !important;
    color: #FFFFFF !important;
}


/* -------------------------------------------
   B. Front-Page CTA Button (Separate Class)
   ------------------------------------------- */

.btn-register {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; /* Smooth transition for all properties (color, shadow, etc.) */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

    /* COLORS (Default: Yellow Background, Plum Text) */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem;         
    padding: 0.75rem 2rem;      
    border-radius: 50px;
}

.btn-register:hover,
.btn-register:focus,
.btn-register:active,
.btn-register:focus-visible {
    /* HOVER COLORS (Plum Background, White Text) */
    background-color: #1A0F1A !important; 
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    
    /* Remove shadow on hover for a subtle "press" effect */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* New Login Button Style */
.btn-login {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; /* Smooth transition for all properties (color, shadow, etc.) */

    /* COLORS (Default: Dark Plum Background, White Text) - Inverted from btn-cta-main default */
    background-color: #1A0F1A !important; /* Dark Primary Color */
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important; /* White Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem;         
    padding: 0.75rem 2rem;      
    border-radius: 50px;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active,
.btn-login:focus-visible {
    /* HOVER COLORS (Yellow Background, Dark Plum Text) - Inverted from btn-cta-main hover */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */
}

/* Target all links inside the element with the class .main-content */
#content a {
    color: #FFB400; /* Vivid Sunset Yellow */
    text-decoration: none;
    
    /* ADD THIS LINE for a smooth transition on the color property */
    transition: color 0.3s ease; 
}

/* Style for when the mouse hovers over the link */
#content a:hover {
    color: #1A0F1A; /* Deep Plum-Charcoal */
    text-decoration: none;
}

/* 1. Card Shadows for Visual Depth */

/* Large Shadow */
.card-shadow-lg {
    /* Use a color close to your primary-text-color (#3B2A26) for a warm shadow */
    box-shadow: 0 10px 25px -5px rgba(59, 42, 38, 0.25); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-lg:hover {
    /* Subtle hover effect to suggest interactivity */
    box-shadow: 0 15px 30px -5px rgba(59, 42, 38, 0.35); 
}

/* Medium Shadow */
.card-shadow-md {
    /* Slightly smaller shadow than -lg for less prominence */
    box-shadow: 0 5px 15px -3px rgba(59, 42, 38, 0.20); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-md:hover {
    /* Subtle lift on hover */
    box-shadow: 0 8px 20px -3px rgba(59, 42, 38, 0.30); 
}

/* Small Shadow (New) */
.card-shadow-sm {
    /* Very subtle shadow for minor elements or lists */
    box-shadow: 0 2px 8px -2px rgba(59, 42, 38, 0.15); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-sm:hover {
    /* Slight lift on hover, almost invisible */
    box-shadow: 0 4px 10px -2px rgba(59, 42, 38, 0.20); 
}

.text-shadow{
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}


/* 2. Style for List Group Items (e.g., Messages/Members Lists) */
.list-group-item {
    border-color: #F7E3C1; /* Use the divider-color for a soft border */
}

/* 3. Soft Background for Alternating Content Sections */
.section-subtle-bg {
    background-color: #F7E3C1; /* pale warm cream divider-color */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 4. Style Form Fields with Theme Colors */
.form-control {
    border-radius: 4px;
    /* Use a light color for the default border */
    border: 1px solid #F2C36B; /* Light Primary/warm golden sand */
}

.form-control:focus {
    /* Use the default primary color for a warm focus glow */
    border-color: #C44707; /* Burnt orange */
    box-shadow: 0 0 0 0.25rem rgba(196, 71, 7, 0.35); /* Soft, burnt orange glow */
}

.nav-item,
.nav-item a {
    display: flex;
    align-items: center;
}

/* Custom HR style for accent color line, 4px thick, centered, 100px wide */
.hr-accent {
  width: 75px;
  height: 3px;
  /* Centers the block element horizontally */
  /* Use background-color for the solid bar of color */
  background-color: #FFB400; 
  /* Ensures it's fully opaque (Bootstrap often sets opacity < 1 on <hr>) */
  opacity: 1; 
  /* IMPORTANT: Remove all default border styles */
  border: none;
}

/* -------------------------------------------
   C. NINJA FORMS INTEGRATION
   ------------------------------------------- */

/* 1. Style the Form Fields (Matching .form-control) */

/* Target all text, email, and number inputs within the Ninja Forms structure */
.nf-field-element input[type=text],
.nf-field-element input[type=email],
.nf-field-element input[type=number],
.nf-field-element textarea {
    /* Use styles from .form-control */
    border-radius: 4px;
    border: 1px solid #F2C36B; /* Light Primary/warm golden sand */
    width: 100%; /* Ensure inputs are full width of their container */
    padding: 0.5rem 0.75rem;
    line-height: 1.5;
    background-color: #FFFFFF;
    color: #3B2A26; /* Primary Text Color */
}

/* Style Form Field Focus State (Matching .form-control:focus) */
.nf-field-element input[type=text]:focus,
.nf-field-element input[type=email]:focus,
.nf-field-element input[type=number]:focus,
.nf-field-element textarea:focus {
    border-color: #C44707; /* Burnt orange */
    box-shadow: 0 0 0 0.25rem rgba(196, 71, 7, 0.35); /* Soft, burnt orange glow */
    outline: none; /* Removes default browser outline */
}

/* 2. Style the Submit Button (Matching .btn-register) */

/* Target the submit input directly */
.nf-form-cont input[type=submit],
.nf-form-cont .nf-field-element .nf-element-submit button {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

    /* COLORS (Default: Yellow Background, Plum Text) */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem !important;         
    padding: 0.75rem 2rem !important;      
    border-radius: 50px !important;
    width: auto !important; /* Prevent it from taking 100% width unless intended */
}

.nf-form-cont input[type=submit]:hover,
.nf-form-cont input[type=submit]:focus,
.nf-form-cont .nf-field-element .nf-element-submit button:hover,
.nf-form-cont .nf-field-element .nf-element-submit button:focus { 
    /* HOVER COLORS (Plum Background, White Text) */
    background-color: #1A0F1A !important; 
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* Optional: Clean up the form container wrapper for a simpler look */
.nf-field-element .nf-field-label {
    /* Ensure labels are visible and styled appropriately, perhaps white if the form container is dark */
    color: #3B2A26; /* Matches primary text color */
}

.nf-form-fields-required{
    display: none !important;
}