/* FILE: CSS/darkmode2.css
   ALTERNATE DARK THEME - blue-grey/neutral, per the reference screenshot
   (Apple Weather's dark card look - a slate with a subtle blue undertone,
   not a flat neutral grey). Drop-in replacement for darkmode1.css: same
   .darkmode class, same selectors throughout, so swapping the <link>
   href in head.php from darkmode1.css to darkmode2.css is all that's
   needed to switch themes. Not currently wired into a toggle between the
   two - this file exists standalone for now.

   Because most of the site's dark styling already routes through the 6
   tokens below rather than hardcoded hex, most of contact-us.php,
   floating_panels.php, footer.php, stats.php, memos.php, carousel.php,
   and all of pdf_viewer.css re-theme automatically just by these tokens
   changing - no edits needed in those files. The exceptions - places
   where THIS file hardcodes a color instead of using a token - are
   marked individually below.

   DESIGN DECISIONS MADE HERE (flagging in case any should be reversed):
   - --accent-color stays blue (#0071ff), same as before. Treated as a
     separate "interactive/link" role from the surface colors that
     actually needed to go grey - buttons, links, and hover accents
     across every file still use this and stay blue.
   - .header-main / .header-main-navbar / the search submit button stay
     a DARKER blue than before, per your request.
   - footer background was NOT kept blue (it used to match the header
     intentionally) - it now follows the grey surface tone instead,
     since only the header was explicitly called out to stay blue. Easy
     to flip back to match the header if that was the intent.
*/
 
:root{
    --base-color: white;
    --base-variant: #e8e9ed;
    --text-color: #111528;
    --secondary-text: #232738;
    --primary-color: #3a435d;
    --accent-color: #0071ff;
}
 
.darkmode{
    --base-color: #1c1e28;
    --base-variant: #262838;
    --text-color: #f5f5f7;
    --secondary-text: #9a9bb0;
    --primary-color: #363850;
    --accent-color: #0071ff;
    --card-slate-light: #454760; /* grey-toned, used by includes/stats.php's card-theme-slate gradient */
}

/* --- FIXED BACKGROUND IMAGE SWITCH (moved from main.css) --- */
/* Standard (light mode) background lives in main.css on the base `body` rule.
   This ::before layer fades in the dark background image on top of it. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Set the dark mode background image */
  background-image: url("../Images/background_dark.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
  opacity: 0;

  /* Background image switch fade speed */
  transition: opacity .25s ease-in-out;
  z-index: -1;
}

.darkmode body::before {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  body::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../Images/background.png");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 1;
  }
}

/* --- HEADER, NAV & DROPDOWN DARK MODE (moved from main.css) ---
   Split into two distinct tones on purpose, mirroring the light-mode
   look: a solid banner color behind a visually separate, translucent
   floating navbar - rather than one flat navy for both. */
.darkmode a {
    color: #66aaff;
}

.darkmode .header-main {
    background-color: #171822 !important; /*BANNER BG - matches the copyright bar's darker shade, replacing the earlier "keep this blue" decision*/
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.darkmode .header-main-navbar {
    /* Translucent + blurred, same relationship as the light-mode
       navbar's rgba(255,255,255,0.75) frosted look over its header */
    background-color: rgba(38, 40, 56, 0.75) !important; /* grey-toned (var(--base-variant) as rgba) - only .header-main (the banner) was meant to stay blue, not this navbar strip */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.darkmode .header-nav-buttons li a,
.darkmode .header-nav-buttons li a:visited {
    background-color: transparent;
    color: #fff !important;
}

.darkmode .header-nav-buttons li a:hover,
.darkmode .dropdown-content li a:hover {
    background-color: var(--primary-color) !important;
    color: #66aaff !important;
}

.darkmode .dropdown-content {
    background-color: var(--primary-color) !important;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}

.darkmode .dropdown-content li a {
    color: #fff !important;
}

.darkmode .dropdown-content li a:hover {
    background: #0071ff !important;
    color: #fff !important;
}

/* .darkmode .header-nav-buttons,
.darkmode .header-nav-buttons.active {
    /* Mobile hamburger dropdown - lightened, and kept one step lighter
       than .header-main so it still reads as its own distinct layer 
    background: #1c3f6e !important;
} */

/* --- CAROUSEL DARK MODE (moved from main.css) --- */
.darkmode .navigation label:hover,
.darkmode #slide1:checked ~ .navigation label[for="slide1"],
.darkmode #slide2:checked ~ .navigation label[for="slide2"],
.darkmode #slide3:checked ~ .navigation label[for="slide3"],
.darkmode #slide4:checked ~ .navigation label[for="slide4"],
.darkmode #slide5:checked ~ .navigation label[for="slide5"],
.darkmode #slide6:checked ~ .navigation label[for="slide6"],
.darkmode #slide7:checked ~ .navigation label[for="slide7"],
.darkmode #slide8:checked ~ .navigation label[for="slide8"],
.darkmode #slide9:checked ~ .navigation label[for="slide9"],
.darkmode #slide10:checked ~ .navigation label[for="slide10"] {
    background: #0071ff !important;
    opacity: 1;
}

.darkmode .arrow {
    background-color: none;
    color: #fff;
}

.darkmode .arrow:hover {
    background-color: #0071ff;
    color: #fff;
}

/* --- HOMEPAGE PANELS DARK MODE (moved from main.css) ---
   NOTE: these target the OLDER homepage markup (.memo-list, .regional-memos, etc).
   If the live site has since moved to the newer .memo-wrapper/.memo-box markup
   (see the rules further down this file), these selectors may be dead weight —
   worth a quick check against the actual homepage HTML. Left in for now since
   unused CSS selectors are harmless. */
.darkmode .regional-memos,
.darkmode .memo-list li,
.darkmode .see-more-link a,
.darkmode .vision-mission,
.darkmode .contact-us {
    background-color: rgba(38, 40, 56, 0.75) !important; /*SIDE PANELS - grey-toned, was blue rgba(9,37,72,0.75)*/
    color: #fff !important;
}

/* --- GLASS / FROSTED PANEL PATTERN ---
   .left-panel and .right-panel (in includes/floating_panels.php) already
   have backdrop-filter: blur(10px) set unconditionally (not mode-specific).
   That blur needs something TRANSLUCENT to blur through - a solid
   background defeats it entirely, which is what was happening here before.
   So instead of var(--base-variant) (solid), these get an rgba version of
   the same color at 0.65 alpha, matching the light-mode panels' own
   rgba(255,255,255,0.65). Same pattern used for .header-main-navbar above.

   REUSE THIS PATTERN for any future frosted/glass panel: translucent
   rgba(color, ~0.65) background + backdrop-filter: blur(10px) on the base
   (non-dark) rule, then just swap the rgba color per mode - never swap to
   a solid color, or the glass effect disappears. */
.darkmode .left-panel,
.darkmode .right-panel {
    background-color: rgba(38, 40, 56, 0.75); /* SIDE PANEL - grey-toned, was blue rgba(22,56,98,0.75) */
    color: #fff !important;
}

.darkmode .left-panel,
.darkmode .right-panel {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Correctly override specific dark mode styles for both elements */
.darkmode .regional-memos,
.darkmode .contact-us {
    background-color: transparent !important;
    box-shadow: none !important;
}

.darkmode .memo-list li {
    border: 1px solid var(--primary-color);
}

.darkmode .see-more-link a {
    color: #66aaff;
}

.darkmode .see-more-link a:hover {
    color: #0071ff;
}

.darkmode .see-more-link a:hover:after {
    color: #0071ff;
}

.darkmode .contact-us h2,
.darkmode .regional-memos h2 {
    color: #66aaff;
}

.darkmode .left-panel::-webkit-scrollbar,
.darkmode .right-panel::-webkit-scrollbar {
    background: var(--primary-color);
}

.darkmode .memo-list a {
    color: #66aaff;
}

.darkmode .memo-list a:hover {
    color: #0071ff;
}

.darkmode .calendar-widget::after,
.darkmode .clock-widget::before {
    color: #66aaff;
}

.darkmode .quote-box {
    background: var(--primary-color);
    color: #fff;
}

.darkmode .right-panel img {
    border-radius: 10px;
}

*{
    margin: 0;
    padding: 0;
}

html{
    font-family: 'Nunito', Arial, Helvetica, sans-serif;
}

body{
    min-height: 100vh;
    background-color: var(--base-color);
    color: var(--text-color);
}

header, section{
    padding: 70px min(50px, 7%);
}

section{
    background-color: var(--base-variant);
}

p{
    margin: 10px 0 20px 0;
    color: var(--secondary-text);
}

/* General button styles - BUT exclude search buttons */
/* button:not(.floating-search-form button){
    border: none;
    padding: .8em 2em;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    font: inherit;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
} */

.cta-button{
    background-color: var(--accent-color);
}

/* Dark mode toggle button
   NOTE: main.css used to have a competing #theme-switch definition (50px button,
   different hover color) from an earlier pass. This file's version (37px,
   45px on mobile) is the one kept, since it's the more recently-touched one
   with the extra .darkmode #theme-switch !important fixes further down.
   Same reasoning applies to the .floating-search-form dark overrides below —
   main.css's alternate hardcoded-color version was dropped in favor of this
   var()-based one. Resize/recolor here if you preferred the other version. */
#theme-switch{
    height: 37px;
    width: 37px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--base-variant);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 70px; /* Position below search form */
    right: 18px;
    z-index: 10000; /* Lower than search form */
    transition: background-color 0.3s ease;
}

/* Ensure dark mode button doesn't interfere with search form */
#theme-switch:hover {
    background-color: #d3d7e3; /* lighter than var(--primary-color) */
}

/* SVG icon styles for theme switch */
#theme-switch > svg {
    fill: var(--primary-color);
}

#theme-switch svg:last-child{
    display: none;
}

.darkmode #theme-switch svg:first-child{
    display: none;
}

.darkmode #theme-switch svg:last-child{
    display: block;
}

/* Image icon styles for theme switch */
#theme-switch img {
    width: 24px;
    height: 24px;
}

#theme-switch .dark-icon {
    display: none;
}

.darkmode #theme-switch .light-icon {
    display: none;
}

.darkmode #theme-switch .dark-icon {
    display: block;
}

/* Dark mode styles for search form */
.darkmode .floating-search-form input[type="text"] {
    color: var(--text-color);
    background: var(--base-color);
    border-color: var(--primary-color);
}

.darkmode .floating-search-form input[type="text"]:hover,
.darkmode .floating-search-form:hover input[type="text"] {
    background: var(--base-color);
    border-color: var(--accent-color);
}

.darkmode .floating-search-form input[type="text"]::placeholder {
    color: var(--secondary-text);
}

/* Ensure search button keeps its original styling in dark mode */
.darkmode .floating-search-form button[type="submit"] {
    background-color: #171822; /* matches the header banner (and copyright bar), was #0d2847 when the header was still blue */
}

.darkmode .floating-search-form button[type="submit"]:hover {
    background-color: #0d0e14; /* darker still */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #theme-switch {
        top: 80px; /* Adjust for mobile search form position */
        right: 15px;
        height: 45px;
        width: 45px;
    }
    
    #theme-switch img {
        width: 20px;
        height: 20px;
    }
}

#theme-switch > img { /* Target the single image within the button */
    fill: var(--primary-color); /* This applies to SVG within an <img> if it's styled this way, otherwise not directly relevant */
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease; /* Smooth transition for the filter effect */
}

/* Mao ni para sa kung naa sa dark mode nga switch */
.darkmode #theme-switch {
    background-color: var(--base-variant) !important; /* grey-toned, was #2f364c */
}
.darkmode #theme-switch:hover {
    background-color: var(--primary-color) !important; /* grey-toned, was #5e6a8a */
}

/* --- DIRECTORY TABS DARK MODE FIX --- */
/* Removed tab-link dark mode overrides to allow manual control in directory.css */
 
/* RECENT MEMOS PANELS - Homepage */
/* Dark Mode Styles for res_RM.css */
/* .darkmode.home .memo-wrapper {
    background: #101425 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
} */
 
.darkmode .memo-title,
.darkmode .memo-wrapper h2 {
  color: var(--text-color);
}
 
.darkmode .memo-filters label {
  color: var(--accent-color);
}
 
.darkmode .memo-filters select {
  background: var(--base-variant);
  color: var(--text-color);
  border-color: var(--accent-color);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.06);
}
 
.darkmode .memo-filters select:hover {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 
.darkmode .memo-box {
  background-color: var(--base-color);
  border: 1px solid var(--primary-color);
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}
 
.darkmode .memo-box a {
  color: var(--text-color);
}
 
.darkmode .memo-box p {
  color: var(--secondary-text);
}
 
.darkmode .memo-table-wrapper {
  background: var(--base-variant); /* grey-toned, was hardcoded blue #182e52 in darkmode1.css */
  border-radius: 8px; /* Added to wrap the table with a rounded background */
}
 
.darkmode .memo-table {
  background: var(--base-variant); /* grey-toned, was hardcoded blue #182e52 in darkmode1.css */
}
 
.darkmode .memo-table th,
.darkmode .memo-table td {
  /* Translucent white overlay instead of a flat color - this way the
     border stays visible no matter what's behind it, including the
     row-hover state below (previously the border used var(--primary-color),
     the EXACT same color as the hover background, so it visually
     vanished on hover). */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-color);
}
 
.darkmode .memo-table th {
  background-color: var(--primary-color); /* grey-toned, was hardcoded blue #223e68 in darkmode1.css */
}
 
.darkmode .memo-table td a {
  color: var(--text-color);
}
 
.darkmode .memo-table td:nth-child(2) {
  color: var(--secondary-text);
}
 
/* --- DARK MODE: MEMO TABLE HOVER STATES ---
   These were the actual bug behind the washed-out white row in the
   screenshot: res_RM.css's tr:hover (#dbeafe) and the download-cell
   hover (#bfdbfe) never had a dark counterpart, so a light-blue
   highlight was landing on top of already-light dark-mode text. */
.darkmode .memo-table tbody tr:hover,
.darkmode .memo-table tr:hover {
  background-color: var(--primary-color);
}
 
.darkmode .memo-table td:nth-child(3):hover {
  background-color: #454760; /* grey-toned, one step lighter than --primary-color, matching the "deeper" hover the light-mode version has */
}
 
.darkmode .pagination a {
  background: var(--base-color);
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.06);
}
 
.darkmode .pagination a.active,
.darkmode .pagination a:hover {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
 
.darkmode .filter-btn {
  background: var(--base-color);
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}
 
.darkmode .filter-btn:focus,
.darkmode .filter-btn:hover {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/************************
 +         FOOTER        +
 ************************/
 
.darkmode footer {
  background-color: var(--base-variant); /* grey-toned - this used to match .header-main (both blue); only the header was asked to stay blue, so footer now follows the grey surfaces instead. Change to #0d2847 to match the header again if that was the intent. */
  border: 1px solid rgba(255, 255, 255, 0.1); 
}
 
.darkmode .footer-column h4 {
  color: #d1d1d1; /* Lighter color for headings */
}
 
.darkmode .footer-column p {
  color: #b0b0b0; /* Lighter color for paragraph text */
}
 
.darkmode .footer-column ul li a {
  color: #b0b0b0; /* Lighter color for links */
}
 
.darkmode .footer-column ul li a:hover {
  color: #ffffff; /* Bright white on hover to stand out */
}
 
.footer-seal.dark-seal {
  display: none;
}
 
.darkmode .footer-seal.light-seal {
  display: none;
}
 
.darkmode .footer-seal.dark-seal {
  display: block;        /* ensures it's treated as a block for margin auto centering */
  margin: 0 auto;        /* centers horizontally within its container */
  height: 150px;         /* increase as needed, e.g., 150px or more */
}

/* MEMO WRAPPER */
/* Dark Mode styles for .memo-wrapper */

/* Override the link color */
.contact-info-container p a {
    color: #e0e0e0;
}

/* Override the link hover color */
.contact-info-container p a:hover {
    color: #fff; /* Brighter white on hover */
}

/* NOTE: .memo-wrapper and .memo-wrapper h2 used to also be declared here
   WITHOUT a .darkmode prefix - an accidental typo that meant this dark
   styling (and a broken "semi-transparent" comment on an alpha:1, fully
   opaque background) could leak into light mode too, depending on
   stylesheet load order. Removed; the properly-scoped .darkmode
   .memo-wrapper rule below (and .darkmode .memo-wrapper h2 near the top
   of this file) are the real ones now. */
.darkmode .memo-wrapper {
    background-color: rgba(38, 40, 56, 0.35) !important; /* grey-toned var(--base-variant) as rgba, was blue rgba(9,37,72,0.35) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

/* Dark-mode counterpart of the title-only modifier defined in
   CSS/res_RM.css - see the comment there for why this exists.
   backdrop-filter needs !important here too - the light-mode version
   of this fix (in res_RM.css) only applies on pages that actually
   load that file, so any page relying solely on this dark-mode
   version (e.g. about_karl.php, which doesn't link res_RM.css) needs
   the blur removal to be self-contained right here. */
.darkmode .memo-wrapper.title-only {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}