/* --------------------------------------------------------------
   styles.css – Updated & Security‑Hardened
   -------------------------------------------------------------- */

/* ---------- Root variables (easy theming & CSP friendliness) ---------- */
:root {
    /* Core palette */
    --bg-darkest:   #000;   /* footer, header */
    --bg-dark:      #1a1a1a;
    --bg-darker:    #222;
    --bg-darkmid:   #333;
    --bg-darklight:#444;
    --bg-card:      #555;

    --text-light:   #fff;
    --accent:       #00e676;   /* primary green */

    /* Borders & misc */
    --border-color: #ccc;

    /* Font stacks (fallbacks) */
    --font-sans:    'Roboto', Arial, Helvetica, sans-serif;
    --font-heading:'Russo One', "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Global reset (fixed universal selector) ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- Base typography ---------- */
body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--bg-dark);
}

/* Headings */
h1,
h2 {
    font-family: var(--font-heading);
    color: var(--accent);
}

/* ---------- Header & navigation ---------- */
header {
    background-color: var(--bg-darkest);
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
/* Adding a opacity change when hovered */
.top-nav a:hover {
    opacity: 0.85;               /* same effect as logo */
}
/* Give the <li> a little vertical padding */
.top-nav li {
    padding: 0.5rem 0;
}
/* ---------- Hero section ---------- */
#hero {
    height: 100vh;
    /* Replace the placeholder URL with the image you host on a trusted CDN/Proton Drive */
/*    background: url('https://drive.proton.me/uc?export=view&id=YOUR_FILE_ID')
                no-repeat center center / cover;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#hero h1 {
    font-size: 4rem;
}

#hero p {
    font-size: 1.5rem;
}

/* ---------- Generic sections ---------- */
section {
    padding: 60px 20px;
    text-align: center;
}

/* Individual section backgrounds */
#about   { background-color: var(--bg-darker); }
#skills  { background-color: var(--bg-darkmid); }
#contact { background-color: var(--bg-darklight); }

/* ---------- Skills grid ---------- */
.skills-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.skill {
    background-color: var(--bg-card);
    padding: 20px;
    width: 250px;
    border-radius: 10px;
}

.skill h3 {
    margin-bottom: 10px;
}

/* ---------- Form styling ---------- 
form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
}

form input,
form textarea {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid var(--bg-card);
    border-radius: 5px;
    background-color: var(--bg-darkmid);
    color: var(--text-light);
}

form button {
    padding: 10px;
    background-color: var(--accent);
    color: var(--text-light);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
*/
/* ---------- Footer ---------- */
footer {
    background-color: var(--bg-darkest);
    padding: 20px;
    text-align: center;
    color: var(--text-light);
}

/* Links inside the footer */
footer a {
    color: var(--accent);
    text-decoration: none;
}

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

/* ---------- Threat‑map container (responsive) ---------- */
.threat-map-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;               /* wraps on narrow screens */
}

/* Individual map boxes – responsive width & aspect ratio */
.threat-map-box {
    width: 100%;
    max-width: 32%;                /* roughly a third on wide screens */
    aspect-ratio: 16 / 9;          /* keeps height proportional */
    position: relative;
    background-color: var(--bg-darkmid);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

/* Iframe fills its container */
.threat-map-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Map label overlay */
.map-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-light);
    padding: 5px;
    font-size: 14px;
}

/* ---------- Disclaimers & auxiliary text ---------- */
.disclaimer {
    font-size: 0.9em;
    color: #ccc;                 /* slightly lighter than body text */
    margin-top: 15px;
    font-style: italic;
    text-align: center;
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}
/* Remove the default underline and keep the original colour */
a.logo {
    text-decoration: none;   /* ← stops the underline */
    cursor: pointer;         /* shows the hand cursor on hover */
}

/* A subtle hover cue (you can delete if you don’t want it) */
a.logo:hover {
    opacity: 0.85;           /* fades slightly on hover */
}
/* -------------------------------------------------
   Base styling for the whole about section
------------------------------------------------- */
.about-section {
    display: flex;                 /* creates a horizontal flex container */
    align-items: flex-start;       /* top‑align the two columns */
    gap: 2rem;                     /* space between the columns */
    padding: 2rem 0;               /* vertical breathing room */
}

/* -------------------------------------------------
   Left column – the heading
------------------------------------------------- */
.about-header {
    flex: 0 0 200px;               /* fixed width (adjust as you like) */
    /* keep the same heading style you already have */
}
.about-header h2 {
    margin: 0;                     /* remove default bottom margin */
    font-size: 2rem;               /* same size you were using */
    /* any other heading styles you already applied */
}

/* -------------------------------------------------
   Right column – the paragraph(s)
------------------------------------------------- */
.about-body {
    flex: 1;                       /* take the remaining horizontal space */
}
.about-body p {
    margin-top: 0;                 /* tighten spacing under the heading */
    line-height: 1.6;
    color: #fff;                   /* keep your existing text colour */
}

/* -------------------------------------------------
   RESPONSIVE: stack columns on narrow screens
------------------------------------------------- */
@media (max-width: 768px) {
    .about-section {
        flex-direction: column;    /* stack vertically */
        gap: 1rem;
    }
    .about-header {
        flex: none;
    }
}
/* -------------------------------------------------
   Overall section styling (optional dark background)
------------------------------------------------- */
.skills-section {
    background-color: #212121;   /* dark background for contrast */
    color: #fff;                 /* default text colour – white */
    padding: 2rem 0;
}

/* -------------------------------------------------
   Flex wrapper – creates the two columns
------------------------------------------------- */
.skills-flex-wrapper {
    display: flex;               /* horizontal layout */
 align-items: center;      /* ← change from flex-start to center */
    gap: 2rem;                   /* space between heading and boxes */
}

/* -------------------------------------------------
   Left column – the heading
------------------------------------------------- */
.skills-header {
    flex: 0 0 200px;             /* fixed width; adjust as needed */
}
.skills-header h2 {
    margin: 0;     /* remove default bottom margin */
    font-size: 2rem; /* same size you used elsewhere */
}

/* -------------------------------------------------
   Right column – the three boxes (unchanged)
------------------------------------------------- */
.skills-boxes {
    flex: 1;                     /* take the remaining width */
    display: flex;               /* keep the three boxes side‑by‑side or stacked */
    flex-wrap: wrap;             /* allow them to wrap on smaller screens */
    gap: 1.5rem;                 /* spacing between the boxes */
}
.skills-container h3 {
   margin-bottom: 0.2rem;     /* remove default bottom margin */
}
/* -------------------------------------------------
   Keep the original look of each .skills-container
------------------------------------------------- */
.skills-container {
    background: #2b2b2b;
    padding: 1rem;
    border-radius: 8px;
    flex: 1 1 calc(33.333% - 1rem);   /* three per row, with gap */
}

/* -------------------------------------------------
   RESPONSIVE: stack heading above boxes on narrow screens
------------------------------------------------- */
@media (max-width: 768px) {
    .skills-flex-wrapper {
        flex-direction: column;   /* heading on top, boxes below */
    }
    .skills-header {
        flex: none;
    }
}
.skills-container p,
.skills-container ul,
.skills-container ol {
    margin-top: 0.2rem;      /* keep a little breathing room */
}
/* The link inherits the heading colour and removes the underline */
.category-heading a.category-link {
    color: var(--accent);   /* same green you use for other titles */
    text-decoration: none;
}

/* Hover – a subtle shade‑change to indicate clickability */
.category-heading a.category-link:hover {
    opacity: 0.85;
}
/* --------------------------------------------------------------
   End of styles.css
   -------------------------------------------------------------- */