html,
body {
  /* Font */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; background-color: white;
  /* Layout */ margin: 0; padding: 1rem;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2rem); }
p { font-size: clamp(1rem, 2vw, 1.5rem); line-height: 2rem; }

.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }

o li,
li,
li p { font-size: clamp(1rem, 2vw, 1.5rem); }

ul { font-size: clamp(1rem, 2vw, 1.5rem); line-height: 2rem; }

.accordion p { font-size: 1rem; }

p a {
  /* Text */ color: #7cbfc8; text-decoration: none;
  /* Visuals */ cursor: pointer; transition: all 0.5s ease;
}
p a:hover { color: #00a0a4; }

.footer p { color: #ccc; }
.footer p i{ margin-right: 0.5rem; }

/* Logo styling */
.logo a {
  /* Text */ font-size: clamp(1rem, 2.5vw, 1.5rem); letter-spacing: 0.02rem; color: #00a0a4; text-decoration: none;
  /* Layout */ margin: 0; padding: 0;
}

/* Directory styling */
.directory { /* Text */ font-size: clamp(1rem, 2vw, 1.2rem); color: #aaa; }
.directory .row { /* Display */ display: flex; align-items: center; gap: 0.5rem; }
.directory a { 
  /* Text */ text-decoration: none; color: #ccc;
  /* Visuals */ transition: all 0.5s ease;
}
.directory a:hover { color: #00a0a4; }

/* === LOADER OVERLAY === */
/* Full-page overlay */
#loader {
  /* Background */ background: white;
  /* Layout */ width: 100%; height: 100%;
  /* Position */ display: flex; position: fixed; top: 0; left: 0; ; justify-content: center; align-items: center; z-index: 9999; /* stays above everything */
}

/* Circular spinner */
.spinner {
  /* Layout */ width: 3.75rem; height: 3.75rem; border: 6px solid #e0f2f1; border-top: 6px solid teal; border-radius: 50%;
  /* Visuals */ animation: spin 1s linear infinite;
}

/* Animation */
  /* Spinning animation */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Fade-out effect */
  .fade-out {
    animation: fadeOut 0.5s ease forwards;
  }

  @keyframes fadeOut {
    to {
      opacity: 0; visibility: hidden;
    }
  }
/**/

/* === NAVIGATION AND ACCORDION HEADER === */

.tos-nav {
  /* Layout */ width: 280px; padding: 1rem; border: 1px solid #ccc; border-radius: 1rem;
  /* Background */ background-color: #fafafa;
  /* Display */ overflow-y: auto; flex: 0 0 20rem; /* fixed width on desktop */ position: sticky; top: 2rem; height: max-content;
}
.tos-container {
  /* Layout */ align-items: flex-start;
  /* Display */ display: flex; gap: 2rem;
}
.tos-content section section {
  /* Layout */ margin-left: 1rem; border-left: 3px solid #eee; padding-left: 1rem;
}

.accordion-header {
  /* Text */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size: 0.95rem; font-weight: 600;
  /* Layout */ width: 100%; padding: 0.5rem 0; text-align: left; border: none;
  /* Background */ background: none;
  /* Visuals */ cursor: pointer; transition: color 0.2s;
}
.accordion-header:hover { color: #7cbfc8; }
.accordion-content {
  /* Display */ display: block; /* keep block so transition can work */ list-style: none; padding-left: 1rem; margin: 0; overflow: hidden; max-height: 0;
  /* Visuals */ transition: max-height 0.5s ease;
}
.accordion-section.open { max-height: 31.25rem; /* temporary max height - can also be set dynamically via JS) */ }
.accordion-content a {
  /* Font */ font-size: 0.9rem; text-decoration: none;color: #555;
  /* Layout */ padding: 0.3rem 0;
  /* Display */ display: block;
}
.accordion-content a:hover { color: #7cbfc8; }
.accordion-content.active { display: block;}


#back-to-top {
  /* Text */ color: white; font-size: 1rem;
  /* Background */ background-color: #00a0a4;
  /* Layout */ width: 2rem; height: 2rem; bottom: 2rem; right: 2rem; border: none; border-radius: 50%;
  /* Display */ display: flex; position: fixed; align-items: center; justify-content: center; z-index: 1000;
  /* Visuals */ cursor: pointer; transition: all 0.3s ease;
}
#back-to-top:hover { background-color: #009688; transform: translateY(-4px); }

/* Target only ordered lists with type="i" */
ol[type="i"],
ol[type="1"] { margin-left: 1.5rem; padding-left: 0; line-height: 1.8; }

ol[type="i"] li,
ol[type="1"] li { margin-bottom: 0.5rem; }

/* Term buttons */
.term-btn,
.doc-link {
  /* Text */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); color: #7cbfc8;
  /* Background */ background-color: white;
  /* Layout */ border: none;
  /* Visuals */ cursor: pointer; transition: all 0.5s ease;
}
.term-btn:hover, .doc-link:hover { color: #00a0a4; }
.term-button i, .doc-link i, p i, li i { margin-left: 0.3rem; }

.doc-link { text-decoration: none;}

/* Definition card */
.definition-card {
  /* Text */
  /* Layout */ padding: 2rem; box-sizing: border-box;
  /* Background */ background-color: white; /* slightly transparent if you like */ 
  /* Display */ position: fixed; top: 0; left: 0; /* hidden off-screen initially */ width: 100%; height: 100%; box-shadow: none; /* full-screen, so shadow not needed */ overflow-y: auto; overflow-x: hidden; word-wrap: break-word;
  /* Visuals */  transition: all 0.5s ease; transform: translateX(100%); z-index: 1000;
}
.definition-card.open { transform: translateX(0); }
.definition-close {
  /* Font */ font-size: 2rem;
  /* Background */ background: none;
  /* Layout */ position: absolute; top: 1rem; right: 1rem; border: none;
  /* Display */ cursor: pointer;
}
.link-icon {
  /* Text */ color: #7cbfc8; text-decoration: none;
  /* Visuals */ transition: all 0.5s ease;
}
.link-icon:hover { color: #00a0a4; }
.link-icon i { display: inline-block; transform: rotate(-45deg); margin-left: 0.3rem; }


/* Responsive behavior */
@media (max-width: 768px) {
  .tos-container {
    flex-direction: column;
  }

  .tos-nav {
    position: relative;
    top: 0;
    width: 100%;
  }
}