/**
 * Theme Toggle Component
 * Sun icon only - always visible, noticeable in both themes
 * Matches feather site design patterns - just an icon, no button styling
 */

.theme-toggle {
    position: fixed;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    z-index: calc(var(--z-index-overlay) + 1); /* Always above header */
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    /* Ensure it stays in corner and doesn't interfere with header */
    pointer-events: auto;
}

/**
 * Home Page Sign-in Link
 * Positioned to the left of theme toggle, standard hyperlink style
 */
.home-signin-link {
    position: fixed;
    top: var(--spacing-xs);
    right: calc(var(--spacing-xs) + 24px + var(--spacing-xs)); /* To the left of theme toggle */
    z-index: calc(var(--z-index-overlay) + 1);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    line-height: 24px; /* Match theme toggle height */
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.home-signin-link:hover {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.theme-toggle:hover {
    opacity: 0.7;
}

/* Icon styling */
.theme-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Sun icon - always visible, uses stroke for visibility in both themes */
.theme-icon-sun {
    fill: none;
    stroke: var(--color-text-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hide moon icon */
.theme-icon-dark {
    display: none;
}

/* Ensure toggle doesn't conflict with header - keep it in corner */
@media (max-width: 768px) {
    .theme-toggle {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 24px;
        height: 24px;
    }

    .theme-icon {
        width: 24px;
        height: 24px;
    }
    
    .home-signin-link {
        right: calc(var(--spacing-xs) + 24px + var(--spacing-xs));
        font-size: var(--font-size-xs);
    }
}

/**
 * Prevent sign-in link from overlapping header buttons
 * When sign-in link is present, push header down below it
 */
@media (max-width: 1250px) {
    /* When sign-in link is present, push header down to avoid overlap */
    body:has(.home-signin-link) .header {
        top: calc(var(--spacing-xs) + 24px + var(--spacing-xs)); /* Below sign-in link */
    }
    
    body:has(.home-signin-link) .header.scrolled {
        top: calc(var(--spacing-xs) + 24px + var(--spacing-xs));
    }
}

/* On very small screens, add a bit more spacing */
@media (max-width: 600px) {
    body:has(.home-signin-link) .header {
        top: calc(var(--spacing-sm) + 24px + var(--spacing-xs));
    }
    
    body:has(.home-signin-link) .header.scrolled {
        top: calc(var(--spacing-sm) + 24px + var(--spacing-xs));
    }
}

/**
 * Hide theme toggle when modals/panels are open
 * Uses CSS :has() for modern browsers - JS fallback handles older browsers
 * Improves UX by preventing toggle from appearing over modal content
 */

/* Hide when standard modal overlays are visible */
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .theme-toggle,
body:has(.modal-overlay[style*="display: block"]) .theme-toggle,
body:has(.modal-overlay[style*="display: flex"]) .theme-toggle,
/* Hide when styled modal overlays from modals.js are present */
body:has(.styled-modal-overlay) .theme-toggle,
/* Hide when video panel is open */
body:has(.video-panel.open) .theme-toggle,
body:has(.video-panel-overlay.open) .theme-toggle {
    display: none !important;
}

/* Also hide the sign-in link when modals/panels are open */
body:has(.modal-overlay:not([style*="display: none"]):not([style*="display:none"])) .home-signin-link,
body:has(.modal-overlay[style*="display: block"]) .home-signin-link,
body:has(.modal-overlay[style*="display: flex"]) .home-signin-link,
body:has(.styled-modal-overlay) .home-signin-link,
body:has(.video-panel.open) .home-signin-link,
body:has(.video-panel-overlay.open) .home-signin-link {
    display: none !important;
}