/*
 Theme Name: Avada Child
 Template: Avada
*/

/* ============================================================================
   COA INTERACTIVE MAP
   ============================================================================ */

:root {
    /* COA Container positioning - compensates for SVG internal whitespace */
    --coa-offset-x: 20px;
    --coa-offset-y: -105px;  /* Compensates for whitespace in SVG file */

    /* COA Container dimensions */
    --coa-max-width: 600px;
    --coa-max-height: 700px;
    --coa-min-width: 400px;   /* Minimum size before hiding */

    /* Tooltip styling */
    --tooltip-bg: rgba(0, 0, 0, 0.95);
    --tooltip-text: #ffffff;
    --tooltip-padding: 10px 15px;
    --tooltip-border-radius: 6px;
    --tooltip-font-size: 14px;
    --tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Hover effects */
    --path-hover-stroke: #000;
    --path-hover-stroke-width: 3px;
    --path-hover-brightness: 1.15;

    /* Animation timing */
    --transition-speed: 0.2s;
    --transition-easing: ease-out;
}

.full-width-sticky-title{
	height: 90px;
}

/* .fusion-custom-z-index{
	height: 320px;
} */

/*.col-md-6{*/
/* width: 50% !important;*/
/*}*/

@media (max-width: 992px) {
    .col-md-6 {
        width: 50% !important;
    }
}

.threat-title{
    margin-bottom: 3px;
}

/* ============================================================================
   COA CONTAINER
   ============================================================================ */

.coa-svg-container {
    /* Positioning - compensates for SVG whitespace */
    transform: translate(var(--coa-offset-x), var(--coa-offset-y));

    /* Dimensions */
    width: var(--coa-max-width);
    max-width: 100%;
    height: var(--coa-max-height);

    /* Layout */
    position: relative;
    margin: 0 auto;

    will-change: transform, position;
    transform-style: preserve-3d;

    /* Smooth transitions for sticky state changes */
    transition: position var(--transition-speed) var(--transition-easing),
    top var(--transition-speed) var(--transition-easing),
    transform var(--transition-speed) var(--transition-easing);

    /* Fade in on load */
    opacity: 0;
    animation: fadeInMap 0.4s ease-out 0.1s forwards;
    z-index: 0;
}

@keyframes fadeInMap {
    from {
        opacity: 0;
        transform: translate(var(--coa-offset-x), calc(var(--coa-offset-y) - 10px));
    }
    to {
        opacity: 1;
        transform: translate(var(--coa-offset-x), var(--coa-offset-y));
    }
}

.coa-svg-container.is-sticky {
    background: #fff;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    z-index: 0;
}

/* ============================================================================
   SVG ELEMENT
   ============================================================================ */

.coa-svg-container svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;

    /* Performance hint */
    will-change: transform;
}

/* ============================================================================
   SVG PATH INTERACTIONS
   ============================================================================ */

svg #COA_Clipped path {
    /* Smooth transitions for all path effects */
    transition: stroke var(--transition-speed) var(--transition-easing),
    stroke-width var(--transition-speed) var(--transition-easing),
    fill-opacity var(--transition-speed) var(--transition-easing),
    filter var(--transition-speed) var(--transition-easing);

    /* Performance optimization */
    will-change: stroke, stroke-width, fill-opacity;
}

/* Natural hover state (mouse over) */
svg #COA_Clipped path:hover {
    stroke-width: var(--path-hover-stroke-width);
    stroke: var(--path-hover-stroke);
    fill-opacity: 1;
    cursor: pointer;
    filter: brightness(var(--path-hover-brightness));
}

svg #COA_Clipped path.hover {
    stroke-width: var(--path-hover-stroke-width);
    stroke: var(--path-hover-stroke);
    fill-opacity: 1;
    filter: brightness(var(--path-hover-brightness));
}

/* Focus state for keyboard navigation */
svg #COA_Clipped path:focus {
    outline: 3px solid #007cba;
    outline-offset: 2px;
    stroke-width: var(--path-hover-stroke-width);
    stroke: #007cba;
    fill-opacity: 1;
}

/* Active state (clicking) */
svg #COA_Clipped path:active {
    filter: brightness(1.25);
    transform: scale(1.01);
}

/* ============================================================================
   TOOLTIP
   ============================================================================ */

.coa-tooltip {
    /* Positioning */
    position: absolute;
    z-index: 10000;

    /* Appearance */
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-border-radius);
    box-shadow: var(--tooltip-shadow);

    /* Typography */
    font-size: var(--tooltip-font-size);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;

    /* Interaction */
    pointer-events: none;
    user-select: none;

    /* Initial state (hidden) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);

    /* Smooth transitions */
    transition: opacity var(--transition-speed) var(--transition-easing),
    visibility var(--transition-speed) var(--transition-easing),
    transform var(--transition-speed) var(--transition-easing);

    /* Performance optimization */
    will-change: opacity, transform;
}

/* Show state */
.coa-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Tooltip arrow (pointing up) */
.coa-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    /* Triangle shape */
    border: 6px solid transparent;
    border-top-color: var(--tooltip-bg);

    /* Performance */
    will-change: border-color;
}

/* ============================================================================
   RESPONSIVE SCALING
   ============================================================================ */

/* Scale down between 992px and 768px */
@media (max-width: 992px) {
    .coa-svg-container {
        width: 80%;
        height: auto;
        min-width: var(--coa-min-width);
    }
}

/* Hide completely below 768px (tablets portrait and below) */
@media (max-width: 767px) {
    .coa-svg-container {
        display: none;
    }
}

/* ============================================================================
   TABLE INTEGRATION
   ============================================================================ */

.coa-table {
    width: 100%;
    border-collapse: collapse;
}

.coa-table tr {
    transition: background-color var(--transition-speed) var(--transition-easing);
}

.coa-table tr:hover {
    background-color: rgba(0, 124, 186, 0.05);
}

/* ============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */

/* Skip to content link for screen readers */
.coa-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100000;
}

.coa-skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    svg #COA_Clipped path:hover,
    svg #COA_Clipped path.hover,
    svg #COA_Clipped path:focus {
        stroke: #000;
        stroke-width: 4px;
    }

    .coa-tooltip {
        background: #000;
        border: 2px solid #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .coa-svg-container,
    svg #COA_Clipped path,
    .coa-tooltip {
        transition: none;
        animation: none;
    }

    .coa-svg-container {
        opacity: 1;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .coa-svg-container.is-sticky {
        position: static !important;
        background: transparent;
        box-shadow: none;
    }

    .coa-tooltip {
        display: none;
    }
}

/* ============================================================================
   COA TITLE (if exists)
   ============================================================================ */

.coa-title {
    z-index: 1 !important;
    margin-bottom: 20px;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.coa-svg-container.loading {
    opacity: 0.5;
    pointer-events: none;
}

.coa-svg-container.loading::after {
    content: 'Loading map...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    font-weight: bold;
    color: #333;
}

/* ============================================================================
   MISSING SPECIES TOOLTIP
   ============================================================================ */

.missing-species-tooltip .tooltip-text {
    visibility: hidden;
    width: 280px;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    top: 50px;
    right: 40px;
    z-index: 999;
    border-radius: 5px;
    border: 2px solid rgb(140, 81, 10);
    background: white;
    color: #000;
}

.missing-species:hover .tooltip-text {
    visibility: visible;
}

/* ============================================================================
   SPECIES SCIENTIFIC NAME
   ============================================================================ */

.species-scientific-name {
    font-size: .7em;
    font-weight: bold;
    font-style: italic;
}

/* ============================================================================
   FUSION ROW MAX WIDTH
   ============================================================================ */

.fusion-row {
    max-width: 1280px !important;
}

.coa-svg-container { position: relative; min-height: 240px; }
.coa-loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; text-align: center;
    background: transparent;
}
.coa-loader-text { font-size: 0.95rem; opacity: 0.85; }

/* Spinner */
.coa-loader-spinner {
    width: 28px; height: 28px; display: inline-block;
    border: 3px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.55);
    border-radius: 50%;
    animation: coa-spin 800ms linear infinite;
}
@keyframes coa-spin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .coa-loader-spinner { animation: none; }
}

.coa-tooltip { position: absolute; will-change: transform; }


 .fusion-footer{
    position: absolute;
    z-index: 999;
}

.awb-menu__description{
	display: none !important;
}

/* Trim the tall rows on the small/medium variant */
@media (max-width: 1440px) {
    .fusion-title-heading {
        font-size: .5em !important;
    }

	.swap-header-top p{
        font-size: .7em !important;
    }
	
    .fusion-tb-header .fusion-builder-row-2,
    .fusion-tb-header .fusion-builder-row-3 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Keep logos sane */
    .fusion-tb-header img.fusion-standard-logo,
    .fusion-tb-header .fusion-image-element img {
        max-height: 56px;
        height: auto; width: auto;
    }

    /* Remove extra vertical space in the main nav items */
    .header-main-menu li { margin-top: 0 !important; }
	
	    .full-width-sticky-title{
        font-size: 1.5rem !important;
        max-height: 80px !important;
    }
    .full-width-sticky-title h1{
        margin-top: -10px !important;
        font-size: 1.5rem !important;
    }
	.fusion-sticky-container{
		height: 80px;
	}
}

.swap-header-top-mobile p{
    padding: 0 !important;
    font-size: .5em !important;
}
.swap-header-top-mobile span{
    padding: 0 !important;
    font-size: .8em !important;
}

.swap-header-top-mobile-banner{
    margin-bottom: -15px !important;
    margin-top: -15px !important;
}

.swap-header-top-mobile-menu{
    margin-bottom: -30px !important;
}

.swap-large-header{
    max-height: 300px !important;
}