/* Blended styles.css */

/* --- FONT FACE DECLARATIONS (from styles.css) --- */

/* ABC Whyte Plus Variable Font */
@font-face {
    font-family: 'Whyte';
    /* NOTE: Using your specified paths for the variable font files */
    src: url( 'assets/ABCWhytePlusVariable.woff2') format( 'woff2' ),
         url( 'assets/ABCWhytePlusVariable.woff' ) format('woff');
    font-display: swap;
    /* use alternate a - included from your prior snippet */
    font-feature-settings: "ss01" on;
}

/* ABC Inktrap Light (Placeholder - adjust path/filename if needed) */
@font-face {
    font-family: 'Inktrap';
    /* ASSUMPTION: Placeholder path, adjust to where you upload Inktrap Light */
    src: url( 'assets/ABCInktrapLight.woff2') format( 'woff2' ),
         url( 'assets/ABCInktrapLight.woff' ) format('woff');
    font-display: swap;
}


/* --- Core S1 Styling (from styles.css) --- */
:root {
    /* Define core SentinelOne colors for easy reference */
    --color-dark-purple: #0e0024;
    --color-s1-purple: #6100FF;
    --color-s1-fuchsia: #F40F61;
    --color-light-purple: #9694CD;
    --color-light-purple-end: #dad9ff;
    --color-s1-purple-dark: #4500B6;
    --color-text-sans: var(--color-light-purple-end); /* Light purple for general sans-serif text */
}

/* --- General Body and Typography (Blended S1 color/font, Original layout) --- */
body {
    /* Dark SentinelOne-style background (from styles.css) */
    background-color: var(--color-dark-purple);
    background-image: linear-gradient(135deg, var(--color-dark-purple), #1f0a40); 
    
    /* Layout from styles.css.orig/previous */
    margin: 0; 
    padding: 0;
    line-height: 1.6;
    
    /* Color/Font from styles.css */
    color: var(--color-text-sans);
    font-family: 'Whyte', sans-serif;
    font-weight: 400;
}

/* --- Header (Restored from previous/orig, using S1 colors) --- */
header {
    background-color: var(--color-s1-purple); /* S1 Purple */
    color: white;
    padding: 30px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Stronger shadow on dark background */
    margin-bottom: 40px;
    /* Glossy effect for the header */
    background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
}

h1 {
    /* TYPOGRAPHY: Headlines - Whyte Inktrap Light (from styles.css) */
    font-family: 'Inktrap', 'Whyte', sans-serif;
    font-weight: 300; 
    
    font-size: 2.8em; /* Used orig size, not styles.css size */
    margin: 0;
    letter-spacing: 1px;
    
    /* Subtle glow effect using S1 Purple (from styles.css) */
    text-shadow: 0 0 10px rgba(97, 0, 255, 0.5), 0 0 20px rgba(97, 0, 255, 0.3);
    
    color: white; /* Header text should be white */
    text-align: center; /* Center-aligned for better presentation */
}

h2 {
    /* TYPOGRAPHY: Sub heads - Whyte Light (from styles.css) */
    font-family: 'Whyte', sans-serif;
    font-weight: 300;
    
    font-size: 1.6em;
    margin: 5px 0 0;
    color: var(--color-light-purple-end); /* Lightest purple for subtitle */
    text-align: center; /* Center-aligned to match h1 */
}

/* --- Layout and Structure (from styles.css) --- */
.container {
    max-width: 900px; /* Using original width for content */
    margin: 0 auto;
    padding: 20px; /* Reinstating padding */
    text-align: left;
}

/* --- Banner Styling (from styles.css) --- */
/* NOTE: This banner placement might conflict with the restored header. 
   If you use both, the banner will appear below the header and take up 75% of the body width.
   I've updated the margin/width to fit inside the .container if you decide to use it there.
*/
.banner {
    width: 60%; /* Reduced to 60% width of its container for a smaller banner */
    margin: 0 auto 40px auto; 
    height: 100px;
    max-height: 100px;
    background-image: url('assets/banner.png');
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    display: block; 
}


/* --- Navigation (Restored from previous/orig, using S1 colors) --- */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav li {
    margin: 15px 0;
    width: 80%;
    max-width: 500px;
}

nav a {
    text-decoration: none;
    font-size: 1.2em;
    display: block;
    padding: 15px 25px;
    border-radius: 10px;
    
    color: var(--color-s1-purple); /* S1 Purple text */
    background: white;
    border: 1px solid var(--color-light-purple); /* Light Purple border */
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    transition: all 0.3s ease;
    /* Basic glossy look for buttons */
    background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

nav a:hover {
    background: var(--color-s1-purple-dark); /* Dark Purple on hover */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Invert glossy effect on hover - using S1 Purple */
    background-image: linear-gradient(to bottom, var(--color-s1-purple-dark), var(--color-s1-purple));
}

/* --- Tab Navigation (in-page tabs on index.html) --- */
.tab-nav {
    padding: 20px 25px;
}

.tab-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.tab-nav li {
    margin: 0;
    /* Let each tab take a reasonable width and wrap when needed */
    flex: 1 1 180px;
}

.tab-nav .tab-link {
    text-align: center;
    white-space: normal; /* allow wrapping to second line */
}

.tab-nav .tab-link.active {
    background: var(--color-s1-purple-dark);
    color: white;
}

.tab-panel {
    display: none;
}

/* --- Slide Content Styling (Blended to fit S1 dark theme) --- */
.slide-content {
    background: #1f0a40; /* Slightly lighter dark purple for the box background */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    border-left: 5px solid var(--color-s1-purple); /* S1 Purple Highlight bar */
    /* Allow long URLs and code-like text to wrap instead of overflowing */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Helper for explicit monospaced lines */
.mono-line {
    font-family: "Courier New", monospace;
    white-space: pre-wrap;
}

.slide-content h1 {
    color: var(--color-s1-purple); /* S1 Purple heading */
    font-size: 2em;
    border-bottom: 2px solid var(--color-light-purple); /* Light Purple line */
    padding-bottom: 10px;
    
    /* Reset h1 styles for slide content */
    text-align: left;
    text-shadow: none;
    font-family: 'Inktrap', 'Whyte', sans-serif;
    font-weight: 300;
}

.slide-content ul {
    list-style: disc;
    padding-left: 25px;
    /* Reset ul styles from styles.css */
    margin-left: 0;
    text-align: left;
    font-family: 'Whyte', sans-serif; 
    font-weight: 400;
}

.slide-content li {
    margin-bottom: 10px;
    color: var(--color-text-sans); /* Light text color for readability */
}

.slide-content em {
    display: block;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--color-light-purple);
    color: var(--color-s1-purple); /* S1 Purple for emphasis */
    font-style: italic;
    font-weight: 500;
}

/* --- Back Link Styling (Restored from previous/orig, using S1 colors) --- */
.back-link {
    display: block;
    margin-top: 30px;
    text-align: center;
}

.back-link a {
    color: var(--color-s1-purple);
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border: 1px solid var(--color-s1-purple);
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.back-link a:hover {
    background-color: var(--color-s1-purple);
    color: white;
}

/* --- Signature Styling (from styles.css) --- */
.signature {
    text-align: center;
    font-size: 0.9em;
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Whyte', sans-serif;
    color: var(--color-light-purple); 
}

.signature .heart-symbol {
    color: var(--color-s1-purple); 
    font-size: 1.2em; 
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

/* --- General Link Styling (from styles.css) --- */
a {
    /* TYPOGRAPHY: Sub heads - Whyte Light (from styles.css) */
    font-family: 'Whyte', sans-serif;
    font-weight: 300; 
    font-size: 1.2em;
    
    /* STYLE: Light purple link on dark background (from styles.css) */
    color: #d0aaff;          
    text-decoration: none;     
    transition: color 0.2s ease;
}

a:hover {
    color: #e0c0ff;            
}

/* --- Hint Content Styling --- */
/* Override text colors for hint pages with light backgrounds */
.hint-content {
    color: #2d2d2d; /* Dark gray text for readability on light background */
}

.hint-content p,
.hint-content li {
    color: #2d2d2d; /* Ensure all text in hint boxes is dark */
}