:root {
    --bbn-highlight: maroon;
    --bbn-bgrnd-highlight: navy;
}

html {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--bs-secondary);
    cursor: pointer;

}

a:hover {
    color: var(--bs-light);
}

/* Index */
/* Style to create decorative box underneath navigation for index */
.headerBox {
    width: 95%;
    height: 5vh;
    position: relative;
    z-index: 0;
    border-radius: 25px;
    margin-bottom: 100px;
}

/* Style to position logo under navigation for index */
.mainLogo {
    position: absolute;
    
    /* Horizontal Centering */
    left: 50%;
    transform: translateX(-50%);
    
    /* Vertical Floating */
    top: -80px;
    
    width: 238px;
    height: 200x;
    z-index: 10; /* Ensure it stays above the box borders */
}

@media (min-width: 650px) {
    .mainLogo {
        width: 238px;
        height: 200px;

        top: -80px;
    }
}
/* End Index */

/* Princes page */
.prince-card {
    width: 75%;
}

@media (min-width: 650px) {
    .prince-card {
        width: 50%;
    }
}
/* End Princes page */

/* Schedule page */
#location-address {
    text-align: center;
}
/* End schedule page */

/* Influence form */
.inf-form-container {
    width: 100%;
}

@media (min-width: 650px) {
    .inf-form-container {
        width: 90%;
    }
}

/* Animation for the new form section */
.character-action-animate {
    animation: bbnFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bbnFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for the removed form section */
.character-action-fade-out {
    animation: bbnFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bbnFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
        margin-top: -100px; /* Helps the below rows slide up */
    }
}

/* Ensure the container is ready for absolute positioning of children if needed */
#influence-form {
    transition: all 0.5s ease;
}

.border-main {
    border: 2px solid var(--bbn-highlight);
}

.border-side-main {
    border-left: 2px solid var(--bbn-highlight);
    border-right: 2px solid var(--bbn-highlight);
}

.border-bgrnd {
    border: 2px solid var(--bbn-bgrnd-highlight);
}

.border-side-bgrnd {
    border-left: 2px solid var(--bbn-bgrnd-highlight);
    border-right: 2px solid var(--bbn-bgrnd-highlight);
}

.use-list {
    list-style-type: none;
    padding-left: 0 !important;
}
/* End Influence form */

/* Influence dashboard */
.card-heater-shield {
    /* Define the Heater Shield shape */
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    
    aspect-ratio: 4 / 5; 
    width: 115px;
    height: 150px;

    /* Top rounding - makes it look more authentic than a flat top */
    border-radius: 50% 50% 0 0 / 10% 10% 0 0;

    /* Keeps the rest of your established styling */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    /* background: linear-gradient(145deg, #2c2c2c, #1a1a1a); */
    /* Originate from the end of the top-right curve (approx 80% width, 10% height) */
    background: radial-gradient(circle at 80% 10%, #2c2c2c 0%, #1a1a1a 80%);
    position: relative;
    border: round;
    transition: transform 0.3s ease;
}

/* Update the border pseudo-element to match the new shape */
.card-heater-shield::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    background: transparent;
    /* border: 3px solid maroon; */
    pointer-events: none;
}

.card-heater-shield::before {
    content: "";
    position: absolute;
    /*top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: all 0.7s;
    border: round;*/

    /* 1. Use the same clip-path so the light physically CANNOT exist outside the shield bounds */
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    inset: 0;
    border: round;
    
    /* 2. Narrower beam angled to match the heater curve (approx 120deg) */
    background: linear-gradient(
        120deg, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0) 70%
    );
    
    /* 3. Start the beam 'parked' up at the top-right curve */
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
    
    transition: transform 0.6s ease-in-out, opacity 0.3s ease;
    z-index: 1;
}

/* Hover state logic */
.card-heater-shield:hover {
    /* Lift and Tilt: Creates a subtle 3D effect */
    transform: translateY(-10px) rotateX(5deg) scale(1.02);
    
    /* Using spread to simulate light hitting the edges */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 
                0 0 15px var(--bbn-highlight);
    
    /* Bring back full color */
    filter: grayscale(0%);
}

.card-heater-shield:hover::before {
    /*left: 100%;  Moves the shine across the card */
    opacity: 1;
    transform: translateX(-100%) translateY(100%);
}

/* Animate the crest separately for extra depth */
.card-heater-shield:hover .heraldry-crest {
    transform: scale(1.1);
    transition: transform 0.3s ease-out;
}

.heraldry-crest {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2; /* Ensures it stays above the border pseudo-element */
    top: -25%;

    /* Center the icon inside the circle */
    display: inline-flex;
    justify-content: center;
    align-items: center;

}

/* TARGET: The span directly following the badge */
.heraldry-crest + span {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    
    /* Compensate for the badge's 'top' shift to keep them together */
    margin-top: -15px; 
    
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #bbb;
}

.heraldry-crest span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #1a1a1a;
    /* This adds a slight "inset" look */
    box-shadow: inset 0 0 10px #000, 0 4px 8px rgba(0,0,0,0.5);
}

/* Custom Maroon Badge to match theme */
.bg-main {
    background-color: var(--bbn-highlight) !important;
    color: white;
}

/* Badge background */
.bg-bgrnd {
    background-color: var(--bbn-bgrnd-highlight) !important;
    color: white;
}

/* End Influence dashboard */

/* iframe size management for responsive display */
.doc-embed {
    width: 100%;
    height: 100vh;
}

/* Map embed */
.map-frame {
    width: "100%";
    height: "240px";
}

@media (min-width: 650px) {
    .map-frame {
        width: 600px;
        height: 450px;
    }
}
/* End map embed */

/* Territories page */
/* CSS for territories map SVG */
.responsive-city-map {
  width: 100%;
  height: auto;
  /*display: block;*/
}

/* Base style for all districts */
.district {
  fill: rgba(0, 0, 0, 0); /* Invisible by default */
  /*stroke: black;
  stroke-width: 2;*/
  transition: all 0.2s ease-in-out;
  pointer-events: all; /* Important: makes the transparent area clickable */
}

/* Hover style: Black outline and subtle gray fill */
.district:hover {
  fill: rgba(0, 0, 0, 0.15);
  stroke: #000000;
  cursor: pointer;
}

/* Optional: Active/Selected style */
.district:active {
  fill: rgba(0, 0, 0, 0.3);
}

/* Default style for unclaimed/rack territories
.district {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 1;
} */

/* Clan-Specific Colors (based on image of map) NEED TO HAVE FULL COORDINATE SET BEFORE IMPLEMENTING */
/* 1
.district[data-clan="ventrue"] { fill: rgba(157, 168, 142); stroke: black; } */
/* 2
.district[data-clan="toreador"] { fill: rgba(39, 68, 53); stroke: black; } */
/* 3
.district[data-clan="brujah"] { fill: rgba(255, 255, 204); stroke: black; } */
/* 4
.district[data-clan="gangrel"] { fill: rgba(171, 171, 222); stroke: black; } */
/* 5
.district[data-clan="tremere"] { fill: rgba(230, 200, 222); stroke: black; } */
/* 6
.district[data-clan="nosferatu"] { fill: rgba(233, 207, 169); stroke: black; } */
/* 7
.district[data-clan="malkavian"] { fill: rgba(193, 139, 228); stroke: black; } */
/* 8
.district[data-clan="rack"] { fill: rgba(220, 149, 149); stroke: black; } */
/* 9
.district[data-clan="rack"] { fill: rgba(193, 139, 228); stroke: black; } */
/* Towson
.district[data-clan="lasombra"] { fill: rgba(198, 249, 249); stroke: black; } */

/* Highlight on Hover */
/* fill-opacity makes the existing clan color more vivid */
/*.district:hover {
    fill-opacity: 0.6;
    stroke-width: 3;
    cursor: crosshair;
}*/
/* End CSS for territories map SVG */
/* End Territories page */

/* Style for field descripton on forms  */
.field-description {
    padding: 10px 5px 10px 15px;
}

/* --- Modifies Bootstrap floating-label functionality --- */
.form-floating > label {
    transition: opacity .15s ease-in-out, transform .15s ease-in-out, color .15s ease-in-out;
    transform: translateX(0.75rem);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(0.85) translateY(-0.75rem) translateX(0.75rem);
    font-weight: 700;
}
/* --- End modification of Bootstrap floating-label functionality --- */

/* ----- Setup for dark theme ----- */
[data-bs-theme="dark"] .headerBox {
    border: 15px double var(--bbn-highlight);
}

[data-bs-theme="dark"] body {
    padding-top: 75px;
    font-size: 12pt;
    border: var(--bbn-highlight) solid 7px;
}

[data-bs-theme="dark"] .navbar {
    border-top: var(--bbn-highlight) solid 7px;
    border-right: var(--bbn-highlight) solid 7px;
    border-left: var(--bbn-highlight) solid 7px;
}

/* --- Modifies Bootstrap floating-label functionality --- */
/* --- DARK THEME (White text, Dark background) --- */
[data-bs-theme="dark"] .form-floating > label,
[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label {
    color: #ffffff;
    font-weight: bold;
}

[data-bs-theme="dark"] .form-floating > .form-control:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

/* Fix background gap for dark mode */
[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label::after,
[data-bs-theme="dark"] .form-intrinsic > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: #212529; /* Standard Bootstrap Dark background */
    content: "";
    position: relative;
    inset: 0;
    z-index: 1;
}
/* --- End modification of Bootstrap floating-label functionality --- */
/* ----- End setup for dark theme ----- */

/* ----- Setup for light theme ----- */
[data-bs-theme="light"] .headerBox {
    border: 15px double black;
}

[data-bs-theme="light"] body {
    padding-top: 75px;
    font-size: 12pt;
    border: black solid 7px;
}

[data-bs-theme="light"] .navbar {
    background-color: white;
    border-top: black solid 7px;
    border-left: black solid 7px;
    border-right: black solid 7px;
}

/* --- Modifies Bootstrap floating-label functionality --- */
/* --- LIGHT THEME (Black text, White background) --- */
[data-bs-theme="light"] .form-floating > label,
[data-bs-theme="light"] .form-floating > .form-control:focus ~ label {
    color: #000000;
    font-weight: bold;
}

[data-bs-theme="light"] .form-floating > .form-control:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

/* Fix background gap for light mode */
[data-bs-theme="light"] .form-floating > .form-control:focus ~ label::after,
[data-bs-theme="light"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: #ffffff;
    content: "";
    position: relative;
    inset: 0;
    z-index: 1;
}
/* --- End modification of Bootstrap floating-label functionality --- */
/* ----- End setup for light theme ----- */