/* Define Theme Variables */
:root {
    --kb-bg-color: #136ef6; /* Dark mode card background */
    --kb-bg-hover: #0e5bcc; /* Dark mode hover background */
    --kb-text-color: #ffffff; /* Dark mode text color */
}

[data-theme="light"] {
    --kb-bg-color: #e0e0e0; /* Light mode card background */
    --kb-bg-hover: #ccc; /* Light mode hover background */
    --kb-text-color: #333333; /* Light mode text color */
}

/* 
  .layout-content.status .custom-header-container
  - Ensures text in the custom header container wraps properly.
  - Adds a bottom margin to separate the header from following content.
*/
.layout-content.status .custom-header-container {
    overflow-wrap: break-word; /* Ensure long words break to next line */
    margin-bottom: 0px; /* Add space between header and the components */
}

/* 
  .masthead
  - Creates a full-width header section with a vertical gradient background.
  - Uses flexbox to center its content both horizontally and vertically.
  - Sets a minimum height to ensure adequate vertical space.
*/
.masthead {
    background: linear-gradient(
        180deg,
        #1e37b9 0%,
        #136ef6 100%
    ); /* Use a gradient background */
    width: 100%; /* Ensure the masthead spans the full width */
    padding: 2rem; /* Add padding to the masthead */
    display: flex; /* Use flexbox to center items */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    min-height: 150px; /* Set a minimum height for the masthead */
}

/* 
  .masthead-banner
  - Styles the banner within the masthead.
  - Applies a black background (using !important to override other styles) and consistent padding.
*/
.masthead-banner {
    background-color: #fff !important; /* Set the background color to white */
    padding: 1rem; /* Add padding to the banner */
    margin-bottom: 3rem;
}

/* 
  .masthead-banner-inner
  - Arranges inner elements (such as headings and dropdowns) using flexbox.
  - Justifies content with space between items and vertically centers them.
  - Sets text color to white for contrast against the dark background.
  - Uses flex-wrap: nowrap to keep items on one row on larger screens.
*/
.masthead-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items together at the start */
    flex-wrap: nowrap;
    color: #000;
}



/* 
  .masthead-banner h1
  - Removes default margins and paddings from the heading.
  - Note: Previous flex and text-align rules were removed to allow natural left alignment.
*/
.masthead-banner h1 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    /* Removed flex: 1 1 100% and text-align: center to let it naturally align left */
}

/* Add spacing between the image and heading */
.masthead-banner-inner h1.page-name {
    margin-left: 10px; /* Adjust spacing as needed */
}

#checklist-link:hover {
    background-color: #d4d4d4 !important;
}
#show-updates-dropdown:hover {
    background-color: #1550a9 !important;
}

/* 
  .masthead-banner .updates-dropdown-container > a.show-updates-dropdown
  - Styles the dropdown trigger link with padding, background color, border-radius, and bold white text.
  - Adds a top margin to separate it from surrounding elements.
*/
.masthead-banner .updates-dropdown-container > a.show-updates-dropdown {
    padding: 0.5em 1em; /* Add padding to the button */
    line-height: 1.5rem; /* Set the line height */
    border-radius: 0.2rem; /* Add a border radius */
    background-color: #126ef6; /* Set the background color */
    font-weight: bold; /* Set the font weight */
    color: #fff; /* Set the text color */
    margin-top: 10px; /* Add space above the button */
}

/*
  .masthead-banner .updates-dropdown-container > a.show-updates-dropdown-white
  - Styles the dropdown trigger link as a button.
  - Sets a white background with a #136ef6 font color.
  - Retains padding, border-radius, and margin for consistency.
*/
.masthead-banner .updates-dropdown-container > a.show-updates-dropdown-white {
    padding: 0.5em 1em; /* Add padding to the button */
    line-height: 1.5rem; /* Set the line height */
    border-radius: 0.2rem; /* Add a border radius */
    background-color: #fff; /* Set the background color to white */
    font-weight: bold; /* Set the font weight */
    color: #136ef6; /* Set the text color to #136ef6 */
    margin-top: 10px; /* Add space above the button */
}

/* 
  .updates-dropdown-section
  - Sets the text color for sections within the updates dropdown to black.
*/
.updates-dropdown-section {
    color: black; /* Set the text color */
}

/* 
  Dropdown Navigation Width
  - Within the updates dropdown container, each navigation link is assigned a width of roughly 16.67%,
    effectively distributing six links evenly across the container.
*/
.updates-dropdown-container
    .updates-dropdown
    .updates-dropdown-nav.nav-items-6
    a {
    width: 16.666666667%; /* Set the width of each item */
}

/* 
  .logo
  - Defines a default fixed width (500px) for the logo container.
*/
.logo {
    width: 400px; /* Default container width */
}

/* 
  .logo img
  - Ensures the logo image scales to the width of its container.
  - Maintains aspect ratio by setting height to auto and limits maximum width to 500px.
*/
.logo img {
    width: 100%; /* Set the image width to 100% of the container */
    max-width: 500px; /* Set the maximum width of the image */
    height: auto; /* Allow the height to adjust automatically */
}

/* 
  Responsive Logo Adjustment
  - For viewports smaller than 500px, the logo container width adjusts to 100% for better responsiveness.
*/
@media (max-width: 500px) {
    .logo {
        width: 100%; /* Allow the container to shrink */
    }
}

/* Remove History Link */
.history-footer-link {
    display: none; /* Hide the history link */
}

/* Remove Past Incidents Link */
.incidents-list {
    display: none; /* Hide the past incidents link */
}

/*
  Replace "x" with the number of days you want to show + 2.
  For example, if you wanted to show the last 3 days of history, you would replace x with 5.
  Do the replacements described above and then paste the following into your Custom CSS section.
*/
.status-day:nth-child(n + 0) {
    display: none; /* Hide the days you don't want to show */
}

/* 3 Column Layout */
.components-container {
    display: flex; /* Use flexbox to create a row */
    flex-wrap: wrap; /* Allow components to wrap on smaller screens */
    padding-top: 15px; /* Add space above the components */
    gap: 2px; /* Adjusts spacing between columns */
    margin: 2; /* Adjusts spacing between columns */
}

/* 3 Column Layout */
.component-container {
    flex: 0 0 calc((100% - 6px) / 3); /* Set the width of each column */
    box-sizing: border-box; /* Include padding and border in the width */
    padding: 15px; /* Add padding around each component */
    border: 1px solid #e0e0e0 !important; /* Add a border around each component */
    border-radius: 0.2px; /* Add a border radius */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .component-container {
        flex: 0 0 calc((100% - 2px) / 2); /* Two columns on medium screens */
    }
}

@media (max-width: 576px) {
    .masthead {
        padding: 1rem;
        min-height: 200px;
    }
    .masthead-banner {
        padding: 1rem;
    }
    .masthead-banner-inner {
        flex-wrap: wrap; /* Allow wrapping on very small screens */
        justify-content: center;
    }
    /* Force the logo and buttons to be on separate rows */
    .masthead-banner-inner .logo-and-status,
    #replace-with-subscribe,
    #checklist-link {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    .component-container {
        flex: 0 0 100%; /* Single column on small screens */
    }
    .status-legend {
        flex-wrap: wrap; /* Allow wrapping on small screens */
    }
    .legend-item {
        /* Try to make two items per row with some gap */
        flex: 1 1 calc(50% - 20px);
        font-size: 0.9rem;
    }
    /* If the breaker is interfering with the layout, hide it */
    .breaker {
        display: none;
    }
}

/* 
  .status-legend
  - Sets up the container for status legends using flexbox.
  - Centers the items and adds a consistent gap.
  - Prevents wrapping on larger screens.
*/
.status-legend {
    display: flex; /* Use flexbox to create a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    gap: 20px; /* Add space between items */
}

/* 
  .legend-item
  - Styles individual legend items with flexbox.
  - Ensures items are centered vertically, have a readable font size,
    and maintain a minimum width for legibility.
*/
.legend-item {
    display: flex; /* Use flexbox to create a row */
    align-items: center; /* Center items vertically */
    font-size: 1.1rem; /* Set the font size */
    flex: 1 1 auto; /* Let items grow and shrink naturally */
    min-width: 100px; /* Prevent items from becoming too narrow */
}

/* Optional: Hide the breaker if it’s not needed on larger screens */
.breaker {
    display: none; /* Hide the breaker */
}

/* For multiple inner components: add a bottom border to every inner container except the last */
.component-inner-container:not([data-js-hook="component-group-opener"]):not(
        :last-child
    ) {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* For cases where the parent has only one inner component (excluding group openers), remove the bottom border */
.component-container:has(
        > .component-inner-container:not(
                [data-js-hook="component-group-opener"]
            ):only-child
    )
    > .component-inner-container:not([data-js-hook="component-group-opener"]) {
    border-bottom: none !important;
}

/* 
  .status-legend
  - Sets up the container for status legends using flexbox.
  - Centers the items and adds a consistent gap.
  - Prevents wrapping on larger screens.
*/
.status-legend {
    display: flex; /* Use flexbox to create a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    gap: 20px; /* Add space between items */
}

/* 
  .legend-item
  - Styles individual legend items with flexbox.
  - Ensures items are centered vertically, have a readable font size,
    and maintain a minimum width for legibility.
*/
.legend-item {
    display: flex; /* Use flexbox to create a row */
    align-items: center; /* Center items vertically */
    font-size: 1.1rem; /* Set the font size */
    flex: 1 1 auto; /* Let items grow and shrink naturally */
    min-width: 120px; /* Prevent items from becoming too narrow */
}

/* Optional: Hide the breaker if it’s not needed on larger screens */
.breaker {
    display: none; /* Hide the breaker */
}

/* 
  .component-statuses-legend
  - Styles the container for component statuses.
  - Uses flexbox with wrapping enabled for smaller screens.
  - Centers the content and provides consistent spacing.
  - Adds top margin and horizontal padding for improved layout on small screens.
*/
.component-statuses-legend {
    display: flex; /* Use flexbox to create a row */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 15px; /* Consistent spacing between items */
    width: 100%; /* Ensure the legend spans the full width */
    margin-top: 50px; /* Add space above the legend */
}

/* 
  Center text within the status legend items inside the component statuses legend.
*/
.component-statuses-legend .status-legend {
    text-align: center; /* Center the text */
}

/* 
  .regional-header
  - Ensures the regional header spans full width and provides a top margin for spacing.
  - Uses flex properties to allow natural growth and shrinkage.
*/
.regional-header {
    flex: 1 0 100%; /* Grow and shrink as needed, but always occupy 100% width */
    width: 100%; /* Ensure the header spans the full width */
    margin: 3rem 0 1rem;
}

/* 
  .global-header
  - Ensures the global header spans the full width.
  - Uses flex properties for consistent behavior similar to the regional header.
*/
.global-header {
    flex: 1 0 100%; /* Grow and shrink as needed, but always occupy 100% width */
    width: 100%; /* Ensure the header spans the full width */
}

.faq-container {
    margin: 0;
    text-align: left; /* Optional: ensure text is left-aligned */
    margin-top: 3rem; /* Add space above the container */
}

/* Dark Theme KB Cards */

/* Knowledge Base Container */
.kb-container {
    display: flex; /* Use flexbox for layout */
    gap: 20px; /* Adjust spacing between the cards */
    align-items: stretch; /* Ensure cards stretch to the same height */
    margin-bottom: 1rem;
}

/* Individual KB Card */
.kb-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    text-decoration: none;
    border-radius: 5px;
    /* Add a subtle border around the entire card: */
    border: 1px solid #e0e0e0;

    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: color 0.2s, box-shadow 0.2s;
}

/* Hover Effect for KB Cards */
.kb-link:hover {
    color: #136ef6;
}

/* Top Icon Styling */
.kb-top-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.kb-top-icon img {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.kb-top-icon img[alt="SkyTab Icon"] {
    margin: -1px; /* adjust as needed */
    height: 72px;
}

/* Center the Card Text */
a .kb-card-text {
    text-align: center;
    margin-bottom: 10px;
}

/* Position Arrow Icon at the Bottom */
.kb-arrow-icon img {
    width: 28px;
    height: auto;
}

/*–– Subscribe button should look exactly like the show‑updates‑dropdown ––*/
.flat-button.subscribe-button {
    display: inline-block; /* same as your dropdown */
    padding: 0.5em 1em; /* identical padding */
    line-height: 1.5rem; /* identical line‑height */
    border-radius: 0.2rem; /* identical border‑radius */
    background-color: #126ef6; /* identical bg color */
    font-weight: bold; /* identical font weight */
    color: #fff; /* identical text color */
    text-decoration: none; /* remove underline */
    margin-top: 10px; /* identical top margin */
}

/* hover state */
.flat-button.subscribe-button:hover {
    background-color: #1550a9 !important; /* identical hover color */
}

/* Override both plus and minus icon pseudo-elements to always show the chevron-right */
.group-parent-indicator.fa-plus-square-o:before,
.group-parent-indicator.fa-minus-square-o:before {
    content: "\f054" !important; /* FontAwesome chevron-right icon */
    font-family: FontAwesome !important; /* Ensure the icon is displayed */
}

/* Rotate the chevron 90 degrees when expanded */
.group-parent-indicator[aria-expanded="true"] {
    transform: rotate(90deg); /* Rotate 90 degrees */
}

/* Remove 90 day uptime wrapper */
.shared-partial.uptime-90-days-wrapper {
    display: none;
}

/* Hide the parent if its first child is a green status component */
.component-container.border-color.is-group:has(
        > .component-inner-container.status-green:first-child
    ) {
    display: none;
}

/*Hide any green status component inside a child-components-container*/
.child-components-container > .component-inner-container.status-green {
    display: none;
}

.component-container.border-color:has(
        > .component-inner-container.status-green.showcased
    ) {
    display: none;
}

.component-inner-container:last-child,
.component-inner-container:only-child {
    border-bottom: none !important;
}

/* Actions container to align Subscribe and Dropdown side-by-side */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Make checklist button look like Bootstrap's btn-light without changing markup */
.header-actions .btn.btn-outline-secondary {
    color: #136ef6; /* blue text */
    background-color: #f8f9fa; /* light gray bg */
    border-color: #f8f9fa; /* match light bg */
}

/* Make the checklist button text bold */
.header-actions .btn.btn-outline-secondary {
    font-weight: bold;
}

.header-actions .btn.btn-outline-secondary:hover,
.header-actions .btn.btn-outline-secondary:focus {
    color: #136ef6;
    background-color: #e2e6ea; /* slightly darker on hover */
    border-color: #dae0e5;
}
.header-actions .btn.btn-outline-secondary:active,
.header-actions .show > .btn.btn-outline-secondary.dropdown-toggle {
    color: #136ef6;
    background-color: #e2e6ea; /* keep light tone when menu is open */
    border-color: #dae0e5;
}

/* Minimal Bootstrap‑like button reset */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Outline secondary style */
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Make Subscribe and Checklist controls the exact same size */
.header-actions .btn,
.header-actions .flat-button.subscribe-button,
.header-actions #replace-with-subscribe a,
.header-actions #replace-with-subscribe button {
    /* Standardize box metrics */
    font-size: 1rem;
    line-height: 1rem;
    padding: 0.5em 1em;
    border-radius: 0.2rem;
}

/* Dropdown wrapper */
.dropdown {
    position: relative;
}

/* Toggle caret mimic */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Menu positioning + base styles */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 12rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    right: 0; /* align to right edge of button */
}

/* Fix: prevent hover background from escaping menu corners */
.dropdown-menu {
    overflow: hidden; /* clip child hover backgrounds to rounded corners */
}

/* Show state */
.dropdown.show .dropdown-menu {
    display: block;
}

/* Dropdown items */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
/* Fix: avoid width+padding overflow on items */
.dropdown-item {
    box-sizing: border-box; /* include padding in width */
    width: auto; /* let it naturally fill the container without overflow */
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e37b9;
    background-color: #f8f9fa;
}

/* Respect small screens: stack actions */
@media (max-width: 576px) {
    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* Large screens: keep statuses on a single line when using .font-small */
@media (min-width: 992px) {
  .component-statuses-legend.font-small {
    flex-wrap: nowrap; /* prevent wrapping of the outer legend row */
  }

  /* Ensure the inner status-legend row also stays on a single line */
  .component-statuses-legend.font-small .status-legend {
    flex-wrap: nowrap;
  }

  /* Allow items to shrink, remove right margin, and keep labels on one line */
  .component-statuses-legend.font-small .legend-item {
    flex: 0 1 auto;
    min-width: 0;      /* override base 120px min-width */
    margin-right: 0;   /* as requested */
    white-space: nowrap;
  }
}

/* Override upstream 5% right margin on legend items to prevent wrapping; use container gap for spacing */
.layout-content.status.status-index .components-section .component-statuses-legend .legend-item {
    margin-right: 0 !important;
}

/*Uncomment to show components container*/
.component-container {
    display: none;
}

/* Make any .container used with/inside kb-container span full width */
.kb-container .container,
.kb-container.container {
    width: 100% !important;
    max-width: 100% !important;
}



.components-container.one-column .status-legend .legend-item,
.component-statuses-legend.font-small .status-legend .legend-item {
  flex: 1 1 0;        /* equal column widths */
  min-width: 0;       /* allow shrink without overflow */
  text-align: center; /* keep labels centered */
  padding: 0 10px;    /* breathing room instead of gap */
}