/*
 * Globals
 */

/* Import Google Fonts */
/* Work Sans Regular */
/* Work Sans Regular */


/*
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
    font-weight: 400; 
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Bold.ttf') format('truetype');
    font-weight: 700; 
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Italic.ttf') format('truetype');
    font-weight: 400; 
    font-style: italic;
    font-display: swap;
}
 */


@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/WorkSans-Light.ttf') format('truetype');
    font-weight: 100; /* light */
    font-style: normal;
    font-display: swap;
}

/* Variables */
:root {
  --myblack: #333;
  --myblue: #189ad3;
  --mywhite: #fff;
  --myblackContrast: rgba(17, 16, 16, 0.5);
  --preparation-color: #1b1b1ba1;
  --requested-color: #007bff;
  --concluded-color: #28a745;
  --hottopic-color: #d9534f;
  --exploring-color: rgb(33, 33, 33);
}



h1 {
    font-weight: 10; /* ultra-thin */
    font-size: 60px;
}



/* Lead paragraph styling */
.lead {
    font-size: 20px; /* bigger font size */
    margin-top: 1.15rem; /* space above paragraph */
    font-weight: 10; /* normal weight, optional */
    line-height: 1.6; /* slightly taller line height for readability */
}



/* Navbar styling */
.nav-masthead .nav-link {
    color: rgba(255, 255, 255, 0.8); /* slightly brighter than before */
    font-family: 'Work Sans', 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
    font-size: 1.2rem; /* bigger font size */
    font-weight: 10; /* lighter weight */
    padding: 0.5rem 1rem; /* more padding for easier click */
    margin-left: 1rem; /* spacing between links */
}

.nav-masthead .nav-link.active {
    color: var(--mywhite);
    border-bottom-color: var(--myblue);
}

/* Adjust navbar container to move slightly towards center */
header .nav {
    justify-content: flex-start; /* start closer to center, not far right */
    gap: .5rem; /* space between links */
}

/* Optional: adjust header div layout */
header div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center the nav links */
    align-items: center;
    gap: 2rem; /* space between brand and nav links */
}

.nav-masthead .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Work Sans', 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
    font-size: 1.2rem;
    font-weight: 100;
    padding: 0.25rem 0; /* vertical padding */
    border-bottom: 0.8px solid transparent; /* prepare for underline */
    transition: border-color 0.3s ease; /* smooth transition */
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: var(--myblue); /* blue underline on hover */
}



.nav-masthead .nav-link.active {
    border-bottom-color: var(--myblue); /* only active link gets blue underline */
}







/* ===== Hero Container & Wave ===== */
.hero-container {
    margin-bottom: 2rem; /* space below wave/logo */
    text-align: center;
    margin-top: 20vh;
}

.hero-container svg {
    width: 99%;  /* match h1 width */
    max-width: 700px; /* optional max width to prevent it from stretching too much */
    height: auto;
    display: block;
    margin: 0 auto 4rem auto; /* center and add bottom margin */
}

/* ===== Wave Animation ===== */
.line1 {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    stroke: white;
    stroke-width: 0.02;  /* thinner line */
    fill: none;
    animation: animateLine1 90s linear forwards; /* slower */
}

.line2 {
    stroke-dasharray: 700;
    stroke-width: 0.025;  /* thinner line */
    stroke: #1f77b4;
    fill: none;
    opacity: 0;
    animation: animateLine2 3s linear forwards;  /* slower fade in */
    animation-delay: 0.01s;
}

.drops1, .drops2, .drops3 {
    opacity: 0;
    fill: none;
    stroke: white;
    stroke-width: 0.02;  /* smaller drops */
    animation: dropsopacity 2s linear forwards; /* slower */
}

.drops2 { animation-delay: 0.5s; }
.drops3 { animation-delay: 1s; }

/* Keyframes for wave drawing */
@keyframes animateLine1 {
    0% { stroke-dashoffset: 700; }
    100% { stroke-dashoffset: 0; } /* line fully drawn */
}

@keyframes animateLine2 {
    0% { opacity: 0; }
    40% { opacity: 0.4; }
    60% { opacity: 0.7; }
    100% { opacity: 0.99; }
}

@keyframes dropsopacity {
    0% { opacity: 0; }
    35% { opacity: 0.35; }
    100% { opacity: 0.99; }
}





.common-content-container {
    display: flex;
    justify-content: center;      /* center horizontally */
    padding: 2rem 1rem;           /* vertical and horizontal padding */
}

.common-content {
    max-width: 850px;             /* limit width for readability */
    width: 100%;                  /* allow responsiveness */
    text-align: center;           /* center text */
    font-family: 'Work Sans', sans-serif;
    color: var(--mywhite);
    line-height: 1.5;
    margin: 0 auto;
}

.common-content h1 {
    font-weight: 10;
    font-size: 60px;
    line-height: 1.2;
    margin-top: 150px;
}

.common-content h2 {
    font-weight: 100;
    font-size: 25px;
    line-height: 1.3;
}

.common-content p {
    font-weight: 100;
    font-size: 20px;
    line-height: 1.5;
    text-align: justify;  
}

.common-content hr {
    border: var(--mywhite);              /* remove default border */
    height: 2px;                   /* thickness of the line */
    background-color: var(--mywhite); /* color of the line */
    width: 100%;                   /* line width */
    margin: 1.5rem auto;           /* spacing above/below and center */
    margin-top: 100px;
}






/* Footer styling */
footer {
    color: #d3d3d3; /* light gray */
    font-size: 1.1rem; /* slightly smaller than body text */
    text-align: center;
    padding: .35rem 0;
}












/*MEDIA*/
/*h1*/
@media (max-width: 576px) { /* smartphones in portrait */
  h1 {
    font-size: 14vw; /* scales with viewport width */
  }
  .lead {
    font-size: 19px;   /* smaller, more readable */
  }
   footer {
    font-size: 0.6rem; /* slightly smaller on phones */
  } 
}

/* Default: desktop */
.desktop-line { display: inline; }
.mobile-line { display: none; }

/* On smartphone portrait */
@media (max-width: 576px) {
  .desktop-line { display: none; }
  .mobile-line { display: inline; }
}



/* Smartphone-specific adjustments */
@media (max-width: 576px) {
    /* Navbar container: ensure single line and full width */
    .nav-masthead {
        display: flex;           /* flex container */
        flex-wrap: nowrap;       /* no wrapping */
        justify-content: space-between; /* spread links evenly */
        width: 100%;
        gap: 0.25rem;            /* small gap between links */
    }

    /* Navbar links: scale to fit and prevent wrapping */
    .nav-masthead .nav-link {
        flex: 1 1 auto;          /* shrink and grow proportionally */
        text-align: center;      /* center text */
        font-size: 3.5vw;        /* scale font with viewport width */
        padding: 0.25rem 0;      /* reduce vertical padding */
        white-space: nowrap;     /* prevent text wrapping */
        margin-left: 0;          /* remove extra left margin to fit */
    }
}