/* Base layout & typography */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f5f8fa;
    color: #334E68;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0452ad;
    color: #fff;
    padding: 0 1.5rem;
    height: 56px;
    border-bottom: 1px solid #0567d6;
}
.topbar .logo {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.topbar .logo img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}
.topbar a {
    font-family: "Fraunces", serif;
    color: #fff;
    text-decoration: none;
}
.topbar a:hover,
.topbar a.active {
    color: #fff;
    text-decoration: none;
}

/* Container for sidebar + main */
.container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

aside {
    width: 220px;
    background: #fff;
    border-right: 1px solid #dfe3e8;
    padding: 2rem 1rem;
    overflow-y: auto;
}
aside nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
aside nav a {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    color: #334E68;
    transition: background 0.2s;
    cursor: pointer;
}
aside nav a:hover,
aside nav a.active {
    background: #E5F1FF;
    color: #0F62FE;
}

aside .md {
    width: 20px;
    height: 20px;
    margin: 2px 2px -4px 0;
}

a {
    color: #0F62FE;
    cursor: pointer;
}

a:hover,
a.active {
    color: #3c7ffc;
}

main {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}
.hero {
    background: #0554ae;
    color: #fff;
    padding: 2rem;
    text-align: center;
    border-radius: 2px;
    margin-bottom: 2rem;
}
#about .hero {
    background: #0151b0;
}
#alarm .hero {
    background: #0054b6;
}
#countdown .hero {
    background: #0053b9;
}
#faq .hero {
    background: #0152ae;
}
#pomodoro .hero {
    background: #0152ae;
}
#stopwatch .hero {
    background: #0056bb;
}
#timezone .hero {
    background: #0051b4;
}
.hero h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
}
.hero img {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
.hero p{
    text-align: left;
}
.hero .home {
    text-align: center;
}
h2 {
    font-size: 1.75rem;
    margin-top: 0;
    color: #00154d; 
    text-align: left;
}
section {
    display: none;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    border: 1px solid #dfe3e8;
}
section.active {
    display: block;
}
input[list] {
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 200px; /* you can adjust */
    }
.tz-time {
      font-size: 1.25rem;
      text-align: center;
      margin: 0.5rem 0;
    }
.sound-icon {
    font-size: 2.5rem;
}

.contact {
    display: block;
    position: absolute;
    bottom: 15px;
}

.footer {
    text-align: left;
    font-size: 0.875rem;
    color: #8a959e;
    width: 100%;
}

/* Display styles */
#clock-display,
.countdown-display,
.stopwatch-display,
.pomodoro-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    text-align: center;
    margin: 1rem 0;
    color: #00154d;
}

.tz-time {
    font-size: 1.6rem;
    text-align: center;
    margin: 1rem 0;
    color: #00154d;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.controls input,
.controls select {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ad-space ins.adsbygoogle {
    display: block;
    min-width: 200px;
    min-height: 100px;
}

.adsbygoogle {
    display:block;
    width:100%;
    height:200px;
    width: 200px;
}

.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: #0F62FE;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: fadeInOut 3s ease-in-out;
}
@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translateY(10px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
}


/* dark mode enabled when <body data-theme="dark"> */
body.dark {
  background: #121417;
  color: #E0E0E0;
}

body.dark .topbar {
  background: #0452ad;
}

body.dark aside {
  background: #1C1E21;
  border-right-color: #333;
}

body.dark aside nav a {
  color: #ccc;
}
body.dark aside nav a:hover,
body.dark aside nav a.active {
  background: #2A2D33;
  color: #fff;
}

body.dark .hero {
  background: #0554ae;
}

body.dark section {
  background: #1E2125;
  border-color: #333;
  box-shadow: none;
}

body.dark h2 {
    font-size: 1.75rem;
    margin-top: 0;
    color: #55C7FF; 
}

body.dark a {
    color: #55C7FF;
}

body.dark a:hover,
body.dark a.active {
    color: #3c7ffc;
}

body.dark .topbar a {
    color: #fff;
    text-decoration: none;
}

body.dark .topbar a:hover,
body.dark .topbar a.active {
    color: #fff;
    text-decoration: none;
}

/* Keep the “Orbitron” clocks bright */
body.dark #clock-display,
body.dark .countdown-display,
body.dark .stopwatch-display,
body.dark .tz-time,
body.dark .pomodoro-display {
  color: #55C7FF;
}

body.dark .toast {
  background: #0F62FE;
}

/* 1) Base styles for the burger button (hidden above 1160px) */
.burger-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}


/*-------------------------------------
  RESPONSIVE LAYOUT breakpoints
-------------------------------------*/

/* 2) At max-width:1160px, show the burger, hide the sidebar */
@media (max-width: 1160px) {

  /* Shrink main so that when sidebar is hidden, it fills entire width */
  .container {
    margin-left: 0;       /* ensure main starts flush with left edge */
  }

  /* If sidebar is open, shift main content to the right */
  .sidebar-open main {
    margin-left: 220px;   /* same as aside width */
    transition: margin-left 0.3s ease-in-out;
  }

  /* Also adjust any ad‐space or section widths if needed */
  main,
  section {
    margin-left: 0 !important;
    padding: 1rem;
  }

} /* end media (max-width:1160px) */

@media (max-width: 768px) {
  /* Show hamburger icon in topbar */
  .burger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
  }

  /* Collapse the aside off‐canvas */
  aside {
    position: fixed;
    top: 56px;            /* same height as .topbar */
    left: -260px;         /* move sidebar off‐screen to the left (adjust to slightly bigger than its width) */
    width: 220px;         /* keep your sidebar width */
    height: calc(100% - 56px);
    background: var(--sl-color-neutral-0); /* or #fff */
    border-right: 1px solid #dfe3e8;
    padding: 2rem 1rem;
    transition: left 0.3s ease-in-out;
    z-index: 1000;        /* float above main content */
  }

  /* When the parent container has .sidebar-open, slide left to 0 */
  .sidebar-open aside {
    left: 0;
    width: 100%;
  }

  /* 1) Make the container stack vertically */
  .container {
    flex-direction: column;
  }

  /* 4) Move “contact” link below nav (already bottom‐fixed, but adjust) */
  .contact {
    position: static;     /* allow it to flow below sidebar nav */
    margin-top: 1.5rem;
    text-align: left;
  }

  /* 5) Main should also be full width, remove horizontal centering constraints */
  main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 6) Shrink hero image and text a bit */
  .hero {
    padding: 1.5rem;
  }
  .hero h1 {
    font-size: 2rem;
    text-align: center;  /* center on mobile */
  }
  .hero p {
    font-size: 1rem;
    text-align: left;
  }
  .hero img {
    max-width: 100%;
    margin: 0 auto 1rem;
  }

  /* 7) Make the clock and displays scale down */
  #clock-display,
  .countdown-display,
  .stopwatch-display,
  .pomodoro-display,
  .tz-time {
    font-size: 2rem;  /* shrink the large digital font */
  }

  /* 8) Adjust the “section” padding and margin */
  section {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  section.active {
    display: block;
  }

  .footer {
    padding: 10px 0;
  }

} /* end media (max-width: 768px) */


/*
  At viewport widths BELOW 480px:
  Additional tweaks (e.g. shrink fonts further, reduce margins).
*/
@media (max-width: 480px) {

  /* Further shrink the digital clock font */
  #clock-display,
  .countdown-display,
  .stopwatch-display,
  .pomodoro-display,
  .tz-time {
    font-size: 1.5rem;
  }

  /* Very tight padding */
  body {
    padding: 0;
  }
  .topbar {
    padding: 0 1rem;
  }
  .topbar .logo {
    font-size: 1rem;
  }

  /* Nav links: stacked in a tighter list */
  aside nav a {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
  }

  /* Section headings smaller */
  h2 {
    font-size: 1.5rem;
  }

  /* Reduce controls gap */
  .controls {
    gap: 0.5rem;
  }

} /* end media (max-width:480px) */