/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Brand palette (2026-08-16) - sampled directly from the faceted-gem
   mark (astranite_gem_icon.png) so the site actually matches the icon,
   rather than the old red/navy scheme that predates it. Kept as
   variables so future refinement is one edit, not a find-and-replace. */
:root {
    --astranite-purple-dark: #4b3a8c;
    --astranite-purple: #6b4fa0;
    --astranite-purple-light: #8b72c9;
    --astranite-blue-dark: #2f5580;
    --astranite-blue: #3d6ea5;
    --astranite-plum: #7259b0;
    --astranite-bg-dark: #1c1633;
}

.navbar {
    background: linear-gradient(to right, var(--astranite-bg-dark), var(--astranite-purple-dark));
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.navbar-brand img {
    transition: transform 0.3s ease-in-out;
    max-height: 80px;  
    height: auto;
    width: auto;    
    transform: scale(1.3);     
}


.icon {
    max-height: 100px; 
    height: auto;
    width: auto;
    margin-right: 20px;
}


/* Hero Section */
.hero-section {
    background: url('../assets/background.jpg') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 150px 0;
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Features Section Animations */
.features-section div {
    transition: transform 0.3s ease-in-out;
}
.features-section div:hover {
    transform: translateY(-5px);
}

/* Call to Action */
.call-to-action {
    background: linear-gradient(to right, var(--astranite-purple-dark), var(--astranite-blue-dark));
    color: white;
    padding: 60px 0;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1.5s ease-in 0.5s forwards;
}

/* Buttons - the only two .btn-danger uses on this site (index.html and
   about.html's "Contact Us") are the primary CTA, not a destructive
   action, so brand purple fits better than Bootstrap's default red.
   (Checked: not reused for delete/destructive buttons anywhere in this
   app - those would need to stay genuinely red.) */
.btn-danger {
    background-color: var(--astranite-purple);
    border-color: var(--astranite-purple);
    transition: background 0.3s ease-in-out;
}
.btn-danger:hover {
    background: var(--astranite-purple-dark);
    border-color: var(--astranite-purple-dark);
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.content-wrapper {
    flex-grow: 1; /* Pushes the footer down */
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    /* font-family: 'IBM Plex Sans', sans-serif; */
    background-color: #fff;
    padding-top: 80px;
}
/* h1, h2 {
    font-family: 'Poppins', sans-serif;
} */

.content-wrapper {
    max-height: calc(100vh - 100px); /* Adjusts for navbar height */
    overflow-y: auto; /* Enables vertical scrolling */
    padding-bottom: 20px; /* Prevents content from getting cut off */
}

.hero-section {
    padding-top: 120px; /* Adds space below navbar */
    padding-bottom: 50px; /* Reduces excess bottom space */
    background-color: var(--astranite-bg-dark); /* Was #343a40 (plain dark gray) - now brand-tinted */
    text-align: center;
    color: white; /* Ensures text stands out */
}


/* Ensure the carousel takes up space properly */
#heroCarousel {
    max-height: 600px; /* Adjust height to fit content */
    overflow: hidden; /* Prevents unwanted scroll */
}

/* Style images to fill the carousel properly */
#heroCarousel .carousel-item img {
    width: 100%;
    height: 600px; /* Ensure consistency */
    object-fit: cover; /* Prevents distortion */
}
.carousel-item {
    transition: transform 1s ease-in-out;
}

/* Customize text overlay */
.carousel-caption {
    background: rgba(0, 0, 0, 0.6); /* Slightly transparent background */
    padding: 15px;
    border-radius: 8px;
}

/* Adjust button visibility */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.5); /* Make controls more visible */
    border-radius: 50%;
    padding: 10px;
}

.details-icon {
    width: 80px; /* Adjust based on preference */
    height: auto;
    margin-bottom: 10px;
}


.details_title {
    margin-bottom: 30px; /* Creates space between title and list */
    text-align: center; /* Ensures balanced alignment */
}

.text-content {
    flex-grow: 1; /* Allows text to expand properly */
}


/* Blog Post Form */
.post-form {
    padding: 50px 0;
}

.post-form .container {
    max-width: 800px;
}

.carousel-inner video{
    width: 80%;
    max-height: 600px;
    object-fit:contain;
}

.carousel-inner img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}


/* Footer */
footer {
    background: var(--astranite-bg-dark); /* Was flat #222 - now brand-tinted to match navbar/hero */
    color: white;
    padding: 20px 0; /* Reduced padding */
    text-align: center;
    position:relative;
    bottom: 0;
    width: 100%;
    opacity: 0;
    animation: fadeIn 1.5s ease-in 1s forwards;
}


/* Page container to push footer to bottom */
#page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.custom-alert {
background-color: #fff3cd;  /* Bootstrap warning yellow */
border: 1px solid #ffeeba;
color: #856404;
}

/* Contact page phone input (countryCodeSelector + localPhone, see
   contact.html): this rule existed in ginas-real-hair's styles.css but
   was never ported here, so the two form-select/form-control elements
   fell back to Bootstrap's default block-level width:100%, stacking the
   country selector on its own row above the number instead of sitting
   beside it. */
.intl-phone-container {
    display: flex;
    gap: 8px;
}

#countryCodeSelector {
    max-width: 170px;
}

input[type="tel"] {
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .intl-phone-container {
        flex-direction: column;
    }

    #countryCodeSelector {
        max-width: 100%;
    }
}

/* Homepage hero carousel - no imagery (2026-08-16, see index.html's
   comment for why). First pass used the flat .case-studies-hero
   gradient and it read as too cold/corporate for a homepage - added
   two soft, blurred color blobs in the brand purple/blue over the same
   dark gradient base, so it feels warmer and more alive without
   resorting to stock photography. */
.hero-carousel-plain .hero-carousel-slide {
    background:
        radial-gradient(circle at 18% 25%, rgba(139, 114, 201, 0.45), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(61, 110, 165, 0.4), transparent 48%),
        linear-gradient(135deg, var(--astranite-bg-dark), var(--astranite-purple-dark));
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-carousel-plain .hero-carousel-caption {
    position: static;
    max-width: 760px;
    padding: 40px 20px;
    color: white;
}

/* Case studies page (/case-studies) */
.case-studies-hero {
    background: linear-gradient(135deg, var(--astranite-bg-dark), var(--astranite-purple-dark));
    color: white;
    padding: 100px 0 60px;
    margin-top: -80px; /* body has padding-top:80px for the fixed navbar */
    padding-top: 160px;
}

.case-studies-hero .lead {
    color: var(--astranite-purple-light);
}

.case-studies-list {
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.case-study-card {
    border-radius: 12px;
    border: 1px solid #e5e0f2;
    box-shadow: 0 4px 18px rgba(75, 58, 140, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(75, 58, 140, 0.15);
}

.case-study-body {
    padding: 35px 40px;
}

.case-study-tag {
    display: inline-block;
    background: var(--astranite-purple-light);
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.case-study-card h2 {
    color: var(--astranite-purple-dark);
    margin-bottom: 6px;
}

.case-study-lede {
    font-style: italic;
    color: var(--astranite-blue-dark);
    font-size: 1.1rem;
    margin-bottom: 18px;
}

.case-study-visit {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--astranite-purple);
    text-decoration: none;
}

.case-study-visit:hover {
    color: var(--astranite-purple-dark);
    text-decoration: underline;
}

/* Footer client logo strip */
.footer-clients {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-clients-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.footer-clients-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.footer-clients-logos a {
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.footer-clients-logos a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-clients-logos img {
    height: 36px;
    width: auto;
    border-radius: 6px;
    background: white;
    padding: 4px 8px;
}

.footer-seal-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.footer-seal {
    height: 22px;
    width: 22px;
}

.footer-offices {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    margin-bottom: 0;
}

/* Language toggle (navbar, 2026-08-16) */
.lang-link {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.lang-link:hover {
    color: #fff;
}

.lang-link-active {
    color: #fff;
    text-decoration: underline;
}

/* Show/hide password toggle (task #275) - the button js/passwordToggle.js
   injects next to every input[type="password"] on the page. .pw-toggle-wrap
   is the <span> it wraps the input in; padding-right on the input itself
   makes room so typed text never sits under the icon. */
.pw-toggle-wrap {
    position: relative;
    display: block;
}

.pw-toggle-wrap input[type="password"],
.pw-toggle-wrap input[type="text"] {
    padding-right: 42px;
}

.pw-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    line-height: 0;
    cursor: pointer;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-toggle-btn:hover {
    color: #343a40;
}