/* theme.css — the NAMTES colour system for light and dark mode.
   The pages are styled with Tailwind utility classes. Instead of rewriting
   every class, this file maps the neutral greys Tailwind uses onto the NAMTES
   palette (ivory page, white cards, dark-green text, muted green-grey) and,
   when <html> has the "dark" class (js/theme.js), onto deep greens.
   Selectors start with "html" so they win over Tailwind's CDN styles, which
   are injected after this file. */

/* =========================================================
   LIGHT  — ivory background, white surfaces, dark green text
   ========================================================= */
html body                         { background-color: #F5F7F3; color: #1C2E27; }
html .bg-slate-100                { background-color: #EEF2EC; }
html body.bg-slate-100            { background-color: #F5F7F3; }
html .bg-slate-50                 { background-color: #F8FAF6; }
html .bg-slate-200                { background-color: #E3E9E2; }
html .border-slate-100            { border-color: #EDF1EB; }
html .border-slate-200,
html .border-slate-200\/60,
html .border-slate-200\/70,
html .border-slate-200\/80        { border-color: #E3E8E2; }
html .border-slate-300            { border-color: #D3DCD4; }
html .text-slate-900              { color: #10231C; }
html .text-slate-800              { color: #1C2E27; }
html .text-slate-700              { color: #33463E; }
html .text-slate-600              { color: #55665E; }
html .text-slate-500              { color: #75847D; }
html .text-slate-400              { color: #95A39C; }
html .text-slate-300              { color: #BCC7C0; }
html .bg-emerald-50,
html .bg-metsaGreen-50            { background-color: #EEF4F0; }
html .text-emerald-700            { color: #0F6B52; }
html .shadow-sm                   { --tw-shadow: 0 1px 2px rgba(6, 59, 47, .05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

/* =========================================================
   DARK  — deep green background, lighter green surfaces
   ========================================================= */
html.dark { color-scheme: dark; }
html.dark body                    { background-color: #04211A; color: #DCE7E1; }

/* ---- surfaces ---- */
html.dark .bg-white               { background-color: #0B3429; }
html.dark .bg-white\/90           { background-color: rgba(11, 52, 41, .92); }
html.dark .bg-white\/50           { background-color: rgba(11, 52, 41, .5); }
html.dark .bg-slate-50            { background-color: #082C23; }
html.dark .bg-slate-100           { background-color: #072820; }
html.dark body.bg-slate-100       { background-color: #04211A; }
html.dark .bg-slate-200           { background-color: #124437; }
html.dark .bg-slate-300           { background-color: #1A5243; }
html.dark img.bg-white            { background-color: #fff; }   /* logos keep their white tile */

/* ---- borders ---- */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/80   { border-color: #1A4A3D; }
html.dark .border-slate-300       { border-color: #23584A; }
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .border-emerald-200\/60 { border-color: rgba(110, 231, 183, .2); }
html.dark .border-amber-200       { border-color: rgba(242, 190, 24, .3); }
html.dark .border-red-100,
html.dark .border-red-200         { border-color: rgba(248, 113, 113, .3); }

/* ---- text ---- */
html.dark .text-slate-900,
html.dark .text-slate-800         { color: #EAF2EE; }
html.dark .text-slate-700         { color: #C9D8D0; }
html.dark .text-slate-600         { color: #AFC2B8; }
html.dark .text-slate-500         { color: #94ABA0; }
html.dark .text-slate-400         { color: #7A9388; }
html.dark .text-slate-300         { color: #557066; }
html.dark .text-metsaGreen-700,
html.dark .text-metsaGreen-800,
html.dark .text-metsaGreen-900,
html.dark .text-emerald-700,
html.dark .text-emerald-800       { color: #7FDDB5; }
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-metsaGold-700     { color: #F7CF4A; }
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800           { color: #FCA5A5; }
html.dark .text-sky-700           { color: #7DD3FC; }
html.dark .text-indigo-700        { color: #A5B4FC; }
html.dark .text-fuchsia-700       { color: #F0ABFC; }
html.dark .text-teal-700          { color: #5EEAD4; }
/* dark green text sitting on a gold button stays dark */
html.dark .bg-metsaGold-400.text-metsaGreen-900,
html.dark .bg-metsaGold-500.text-metsaGreen-900,
html.dark .gold-gradient.text-metsaGreen-900 { color: #063B2F; }

/* ---- tinted chips and banners ---- */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/60,
html.dark .bg-metsaGreen-50       { background-color: rgba(46, 139, 106, .18); }
html.dark .bg-emerald-100         { background-color: rgba(46, 139, 106, .28); }
html.dark .bg-amber-50            { background-color: rgba(242, 190, 24, .1); }
html.dark .bg-amber-100,
html.dark .bg-metsaGold-100       { background-color: rgba(242, 190, 24, .16); }
html.dark .bg-red-50              { background-color: rgba(239, 68, 68, .12); }
html.dark .bg-sky-50              { background-color: rgba(14, 165, 233, .12); }
html.dark .bg-indigo-50           { background-color: rgba(99, 102, 241, .14); }
html.dark .bg-fuchsia-50          { background-color: rgba(217, 70, 239, .12); }
html.dark .bg-teal-50             { background-color: rgba(20, 184, 166, .12); }

/* ---- hover states ---- */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover { background-color: #0F3D31; }
html.dark .hover\:bg-slate-200:hover { background-color: #154838; }
html.dark .hover\:bg-emerald-50:hover { background-color: rgba(46, 139, 106, .24); }
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-red-100:hover   { background-color: rgba(239, 68, 68, .18); }
html.dark .hover\:text-slate-600:hover,
html.dark .hover\:text-slate-900:hover { color: #EAF2EE; }
html.dark .hover\:border-slate-200:hover { border-color: #23584A; }
html.dark .focus\:bg-white:focus { background-color: #082C23; }

/* ---- form fields without their own background ---- */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.bg-transparent),
html.dark select:not(.bg-transparent),
html.dark textarea:not(.bg-transparent) { background-color: #082C23; color: #EAF2EE; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6E887D; }
html.dark input[type=file] { color: #AFC2B8; }

/* ---- softer shadows on a dark page ---- */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, .45); }

html.dark ::-webkit-scrollbar-track { background: #04211A; }

/* smooth switch, but never on first paint */
html.theme-anim, html.theme-anim * { transition: background-color .25s ease, border-color .25s ease, color .25s ease !important; }

/* ---- install banner (js/pwa.js) ---- */
#install-banner { animation: metsa-slide-up .3s ease-out; }
@keyframes metsa-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* today's column in the week timetable */
html.dark .bg-metsaGold-100\/40 { background-color: rgba(242, 190, 24, .06); }

/* ---- shared page header (main pages) ---- */
.page-head { position: relative; overflow: hidden; color: #fff; background: #063B2F; }
.page-head img.page-head-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,40,31,.94) 0%, rgba(6,59,47,.82) 55%, rgba(6,59,47,.55) 100%); }
.page-head > .page-head-inner { position: relative; z-index: 1; }

/* keep the footer at the bottom on short pages */
body:has(> #site-footer) { display: flex; flex-direction: column; }
body:has(> #site-footer) > #site-footer { margin-top: auto; }
body:has(> #site-footer) > main,
body:has(> #site-footer) > header { width: 100%; }

/* ---- redesign v2: shared pieces ---- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* segmented tabs (people, gallery, admin) */
.u-tabs { display: flex; gap: .2rem; padding: .25rem; max-width: 100%; width: fit-content; overflow-x: auto; background: #E8EEE9; border-radius: 14px; }
html.dark .u-tabs { background: #072820; }
.u-tab { flex-shrink: 0; padding: .5rem .85rem; border-radius: 10px; font-size: 13px; font-weight: 600; color: #55665E; white-space: nowrap; transition: background-color .15s, color .15s; }
.u-tab:hover { color: #10231C; }
.u-tab .u-count { font-size: 11px; font-weight: 700; opacity: .55; margin-left: .35rem; }
.u-tab[aria-selected="true"] { background: #063B2F; color: #fff; box-shadow: 0 1px 3px rgba(6,59,47,.25); }
.u-tab[aria-selected="true"] .u-count { color: #F2BE18; opacity: 1; }
html.dark .u-tab { color: #94ABA0; }
html.dark .u-tab:hover { color: #EAF2EE; }
html.dark .u-tab[aria-selected="true"] { background: #F2BE18; color: #063B2F; }
html.dark .u-tab[aria-selected="true"] .u-count { color: #063B2F; }

/* all tabs on one row (people page) */
.u-tabs.fit { width: 100%; gap: 0; flex-wrap: nowrap; }
.u-tabs.fit .u-tab { flex: 1 0 auto; padding: .55rem .28rem; font-size: 10.5px; letter-spacing: -.01em; text-align: center; }
.u-tabs.fit .u-count { display: none; }
@media (min-width: 640px) { .u-tabs.fit .u-tab { font-size: 13px; padding: .55rem .9rem; } }

/* people rows */
.person-row { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .7rem .8rem; border-radius: 16px; background: #fff; border: 1px solid #E3E8E2; transition: border-color .15s, transform .15s; }
.person-row:hover { border-color: #F2BE18; }
.person-row:active { transform: scale(.99); }
html.dark .person-row { background: #0B3429; border-color: #1A4A3D; }

/* bio: small text, three lines until opened */
.bio-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* quick links */
.quick-tile { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border-radius: 16px; background: #fff; border: 1px solid #E3E8E2; font-size: 13px; font-weight: 700; color: #10231C; }
.quick-tile .qi { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #063B2F; color: #F2BE18; font-size: 14px; flex-shrink: 0; }
.quick-tile:hover { border-color: #F2BE18; }
html.dark .quick-tile { background: #0B3429; border-color: #1A4A3D; color: #EAF2EE; }
html.dark .quick-tile .qi { background: #F2BE18; color: #063B2F; }

/* profile dialog: whole card scrolls, no inner scrollbars */
.profile-dialog { max-height: 86vh; overflow-y: auto; scrollbar-width: none; }
.profile-dialog::-webkit-scrollbar { display: none; }

/* tabs that wrap instead of scrolling, so every group is visible */
.u-tabs.u-wrap { flex-wrap: wrap; overflow: visible; }
.u-tabs.u-wrap .u-tab { padding: .45rem .75rem; }

/* ---- full-width layout: no big empty margins when zoomed out ---- */
html .max-w-6xl, html .max-w-7xl { max-width: none; padding-left: clamp(.75rem, 1.4vw, 1.25rem); padding-right: clamp(.75rem, 1.4vw, 1.25rem); }
html .max-w-6xl.px-0 { padding-left: 0; padding-right: 0; }

/* ---- study materials (Class Hub) ---- */
.sm-card { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 16px; background: #fff; border: 1px solid #E3E8E2; transition: border-color .15s; }
.sm-card:hover { border-color: #F2BE18; }
html.dark .sm-card { background: #0B3429; border-color: #1A4A3D; }
.sm-ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #063B2F; color: #F2BE18; flex-shrink: 0; }
html.dark .sm-ico { background: #F2BE18; color: #063B2F; }
.chip { flex-shrink: 0; padding: .45rem .85rem; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid #D3DCD4; color: #55665E; background: transparent; white-space: nowrap; }
.chip[aria-pressed="true"] { background: #063B2F; border-color: #063B2F; color: #fff; }
html.dark .chip { border-color: #23584A; color: #AFC2B8; }
html.dark .chip[aria-pressed="true"] { background: #F2BE18; border-color: #F2BE18; color: #063B2F; }

.quick-tile { padding: .85rem 1rem; font-size: 14px; }
@media (min-width: 768px) { .quick-tile { padding: 1.05rem 1.25rem; font-size: 15px; } .quick-tile .qi { width: 2.5rem; height: 2.5rem; font-size: 16px; } }

/* ---- homepage v3: mechatronics hero, story, floating news ---- */
.mx-hero { position: relative; overflow: hidden; background: #04281F; background-image: radial-gradient(circle at 1px 1px, rgba(247,207,74,.13) 1px, transparent 0); background-size: 22px 22px; }
.mx-hero::before { content: ""; position: absolute; width: 38rem; height: 38rem; right: -12rem; top: -14rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,139,106,.35), transparent); pointer-events: none; }
.mx-title { font-size: clamp(2.7rem, 12.5vw, 6.6rem); line-height: .95; font-weight: 800; letter-spacing: -.035em; background: linear-gradient(180deg, #fff 30%, #BFE3D2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-def { border-left: 3px solid #F2BE18; padding-left: 1rem; max-width: 38rem; }
.mx-pill { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .75rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.mx-pill i { color: #F2BE18; font-size: 11px; }
.mx-frame { position: relative; overflow: hidden; background: #063B2F; border-radius: 1.5rem; aspect-ratio: 16/10; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
@media (min-width: 1024px) { .mx-frame { aspect-ratio: 4/5; border-radius: 2rem 2rem 2rem 6rem; } }
.loop-card { position: relative; padding: 1.1rem 1.1rem 1.2rem 1.1rem; border-radius: 20px; background: #fff; border: 1px solid #E3E8E2; }
.loop-card h3 { font-weight: 800; font-size: 17px; color: #10231C; margin-top: .6rem; }
.loop-card p { font-size: 13.5px; line-height: 1.6; color: #55665E; margin-top: .3rem; }
.loop-n { display: inline-flex; width: 1.7rem; height: 1.7rem; align-items: center; justify-content: center; border-radius: 50%; background: #063B2F; color: #F2BE18; font-weight: 800; font-size: 13px; }
html.dark .loop-card { background: #0B3429; border-color: #1A4A3D; }
html.dark .loop-card h3 { color: #EAF2EE; } html.dark .loop-card p { color: #AFC2B8; }
html.dark .loop-n { background: #F2BE18; color: #063B2F; }
.chapter .ch-n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #8A6905; }
.chapter h3 { font-size: clamp(1.25rem, 4.2vw, 1.75rem); line-height: 1.2; font-weight: 800; color: #10231C; margin-top: .25rem; letter-spacing: -.015em; }
.chapter p { font-size: 15.5px; line-height: 1.8; color: #44564E; margin-top: .85rem; }
.chapter:first-child p:first-of-type::first-letter { float: left; font-size: 3.3rem; line-height: .85; font-weight: 800; color: #063B2F; padding: .3rem .5rem 0 0; }
html.dark .chapter .ch-n { color: #F7CF4A; } html.dark .chapter h3 { color: #EAF2EE; } html.dark .chapter p { color: #B9CBC1; }
html.dark .chapter:first-child p:first-of-type::first-letter { color: #F2BE18; }
.story-link { display: flex; gap: .7rem; align-items: baseline; padding: .45rem .6rem; border-radius: 10px; color: #75847D; font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.story-link span { font-size: 13px; letter-spacing: 0; font-weight: 600; line-height: 1.3; }
.story-link:hover, .story-link.on { color: #063B2F; background: #E8EEE9; }
html.dark .story-link:hover, html.dark .story-link.on { color: #F2BE18; background: #0B3429; }
.news-bar { background: #063B2F; color: #fff; box-shadow: 0 12px 30px -10px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.1); }
html.dark .news-bar { background: #0D5140; }

/* ---- homepage hero v4: light, tile launcher ---- */
.hx { background: #F5F7F3; }
html.dark .hx { background: #04211A; }
.hx-kicker { display: flex; align-items: center; gap: .6rem; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8A6905; }
.hx-kicker span { width: 1.6rem; height: 3px; border-radius: 3px; background: #F2BE18; }
html.dark .hx-kicker { color: #F7CF4A; }
.hx-title { font-size: clamp(2rem, 7vw, 3.9rem); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; color: #063B2F; margin-top: .8rem; max-width: 40rem; }
.hx-title em { font-style: normal; color: #0F6B52; background: linear-gradient(transparent 62%, rgba(242,190,24,.45) 62%); }
html.dark .hx-title { color: #EAF2EE; } html.dark .hx-title em { color: #7FDDB5; background: linear-gradient(transparent 62%, rgba(242,190,24,.28) 62%); }
.hx-sub { font-size: 16px; line-height: 1.6; color: #55665E; margin-top: 1rem; max-width: 30rem; }
html.dark .hx-sub { color: #AFC2B8; }
.hx-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.9rem; padding: 0 1.3rem; border-radius: 14px; font-weight: 700; font-size: 14px; }
.hx-btn-gold { background: #F2BE18; color: #063B2F; } .hx-btn-gold:hover { background: #F7CF4A; }
.hx-btn-line { border: 1.5px solid #063B2F; color: #063B2F; } .hx-btn-line:hover { background: #063B2F; color: #fff; }
html.dark .hx-btn-line { border-color: #3B6B5C; color: #EAF2EE; } html.dark .hx-btn-line:hover { background: #0D5140; }
.hx-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 6.4rem; padding: .95rem 1rem; border-radius: 20px; background: #063B2F; color: #fff; overflow: hidden; transition: transform .15s; }
.hx-tile:active { transform: scale(.98); }
.hx-tile i { font-size: 20px; color: #F2BE18; }
.hx-tile span { font-weight: 800; font-size: 15px; margin-top: 1rem; }
.hx-tile b { position: absolute; right: .9rem; top: .95rem; font-size: 12px; color: rgba(255,255,255,.4); }
.hx-tile:hover b { color: #F2BE18; }
.hx-tile-gold { background: #F2BE18; color: #063B2F; } .hx-tile-gold i { color: #063B2F; } .hx-tile-gold b { color: rgba(6,59,47,.45); } .hx-tile-gold:hover b { color: #063B2F; }
html.dark .hx-tile { background: #0B3429; border: 1px solid #1A4A3D; } html.dark .hx-tile-gold { background: #F2BE18; border-color: #F2BE18; }
.hx-photo { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 16/9; background: #063B2F; margin-top: 1.5rem; }
@media (min-width: 640px) { .hx-photo { aspect-ratio: 21/8; border-radius: 28px; } }

.hx-bio { font-size: 14.5px; line-height: 1.75; color: #44564E; margin-top: 1.1rem; max-width: 33rem; padding-left: 1rem; border-left: 3px solid #F2BE18; }
html.dark .hx-bio { color: #B9CBC1; }