/* 1. UNIFIED VARIABLES */
:root {
  --default-font:
    "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --heading-font: sans-serif, "Kanit";
  --text-font: Verdana;
}

:root {
  /* this color for light mode theme */
  --bg: #ffffff;
  --text: #303030;
  --text-reverse: #d1d1d1;
  --text-button-reverse: #3b3b3b;
  --border: #898989;
  --accent: #5f5e5e;
  --secondary: #5b5a5a;
  --shadow: #262626;

}

/* 2. THEME OVERRIDES - Apply to BOTH html and body to be safe */
html.dark-theme,
body.dark-theme {
  --bg: #15202b;
  --text: #d0d0d0;
  --text-reverse: #c0c0c0;
  --text-button-reverse: #d4d4d4;
  --border: #424547;
  --accent: #0b91e4;
  --secondary: #22303c;
  --light-blue: #8899a6;
  --shadow: #1DA1F1;
}


:root {
  accent-color: auto;
  /* Or set it to your specific theme color */

}


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
html,
body {
  height: auto;
  margin: auto;
  background-color: var(--bg);

  border-radius: 15px;
  border: 2px solid color #0b91e4;
  /* background-color: #09649d; */
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* --------------- blog landing page ------------ */
#blog-page {
  /* display: flex;
  flex-direction: column; */
  margin: auto;
  width: 100%;
  /* justify-content: center;
  align-items: center; */
  max-width: 1000px;
  color: var(--text);
  background-color: var(--bg);
  /* background-color: #09649d; */


}

/* -- tooltip -- */
.tooltip {
  position: relative;
  display: flex;
  margin-left: 30px;
  /* border-bottom: 1px dotted rgb(2, 17, 52); */
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: var(--accent);
  color: var(--text);
  text-align: center;
  border-radius: 6px;
  padding: 2px 0;
  position: absolute;
  opacity: 0;
  transition: opacity 2s;
  z-index: 1;
  top: 5px;
  left: 120%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--accent) transparent transparent;
}

/* -------- Top bar {theme switcher} {back arrow} {header} -------- */
#top-bar {
  /* background-color: var(--bg) !important; */
  padding-top: 20px;
  width: 100%;
  color: var(--text);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.controls {
  display: flex;
  margin: 0px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px 0px 20px;
  /* background-color: #8899a6; */
}

#go-home {
  margin-left: 0%;
}

#go-home .button.fa-solid {
  font-size: 30px;
  text-decoration: none;
  display: inline-block;
}

.dark-theme #go-home .button.fa-solid {
  color: var(--accent);
  text-decoration: none;
}

.button.fa-solid {
  color: var(--accent)
}

/* -------------------- Theme mode switcher icon -------------------- */
.theme-switch-wrapper {
  .theme-switch-wrapper {
    display: flex;
    align-items: center;
  }

  .theme-switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 55px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hide the actual checkbox */
  .theme-switch input {
    display: none;
  }

  /* The Slider Track when light mode on */
  .slider {
    background-color: var(--secondary);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s;
    border-radius: 34px;
  }

  /* Track color when Dark Mode is active */
  input:checked+.slider {
    background-color: var(--border);
  }

  /* The Sliding Knob (The white circle) */
  .slider:before {
    background-color: var(--light-blue);
    bottom: 3px;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    position: absolute;
    transition: 0.4s;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(110, 109, 109, 0.2);
  }

  /* Move knob to the right when checked */
  input:checked+.slider:before {
    transform: translateX(26px);
  }

  .sun,
  .moon {
    position: absolute;
    top: 3px;
    /* Centers them vertically */
    transition: 0.3s;
    z-index: 3;
    /* Sits on top of the white knob */
    pointer-events: none;
    /* Clicks pass through to the slider */
  }

  .sun {
    left: 3px;
    color: rgb(255, 255, 255);
  }

  .moon {
    right: 5px;
    color: rgb(42, 41, 41);
    opacity: 0;
    /* Hidden by default in light mode */
  }

  /* When in Light Mode (Not Checked) */
  input:not(:checked)+.slider .sun {
    opacity: 1;
  }

  input:not(:checked)+.slider .moon {
    opacity: 0;
  }

  /* When in Dark Mode (Checked) */
  input:checked+.slider .sun {
    opacity: 0;
  }

  input:checked+.slider .moon {
    opacity: 1;
  }
}

/* ----------------- End of Theme mode switcher icon -------------- */

/* --------------- blog main page ------------ */
.header-top {
  display: flex;
  /* justify-content: center; */
  /* Centers horizontally */
  align-items: center;
  /* Centers vertically */
}


.header-top h1 {
  font-family: sans-serif;
  font-size: 44px;
  color: var(--text);
  padding-left: 80px;
  margin-top: 0px;
}

/* ------------------  middle section divs-----------------  */

#middle-section {

  display: flex;
  width: 100%;
  /* background-color: #d2e5f2; */
}

/* ----------------------------------------------------- */
/* --             left-wraper section              ---  */
/* --------------------------------------------------- */
#left-wraper {
  display: flex;
  margin: auto;
  width: 70%;
  /* padding to show the full card list */
  padding-bottom: 70px !important;
  border: 1px solid var(--border);
  border-radius: 15px;
}

/* -- article Cards (posts) --- */
.post-title {
  font-family: Verdana;
  font-size: 24px;
  margin-bottom: 5px;
  width: fit-content;
}

.meta-row {
  /* this is the data line on every card and article */
  width: 100%;
  font-size: 0.9rem;
  color: var(--text);
  /* display: flex; */
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

#posts-container {
  display: flex;
  flex-direction: column;
  /* background-color: var(--bg); */
  border-radius: 15px;
  /* border: 3px solid var(--border); */
  padding: 15px;
  width: 100%;
}

/* this section has 2 column,the img and text side by side */
.post-content-wrapper {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Image Column */
.post-image-side {
  flex: 0 0 200px;
  /* Adjust width as you like */
}

/* Image space */
.post-image-side img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Text Column */
.post-text-side {
  font-family: Verdana;
  font-size: medium;
  flex: 1;
}


article.post {
  position: relative;
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* background: var(--bg); */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  cursor: pointer;
  /* background-color: #007bff; */
  margin-bottom: 15px;
}

/* The Hover Effect */
article.post:hover {
  transform: translateY(-8px) scale(1.01);
  /* Subtle lift and grow */
  /* border-color: var(--accent); */
  box-shadow: 0 20px 40px var(--shadow);
  /* Deep, soft shadow */
}

/* Making the link "Active" when the whole card is hovered */
article.post:hover .read-more-link {
  transform: translateX(8px);
  color: var(--text);
}

.tags-row {
  padding-top: 4px;
  border-top: 2px solid var(--border);
}

.read-more-link {
  display: inline-block;
  margin-top: 10px;
}

.read-more-link {
  display: inline-block;
  margin-top: 15px;
  color: var(--accent);
  text-decoration: none;
  /* font-weight: bold; */
  font-size: 1rem;
  transition: 0.2s;
}

.read-more-link:hover {
  text-decoration: underline;
  transform: translateX(5px);
  /* Tiny movement effect */
}

/* ----------------------------------------------------- */
/* --            right-wraper section divs         ---  */
/* --------------------------------------------------- */
#right-wraper {
  /* background-color: var(--bg); */
  width: 30%;
}

.div-search-bar {
  margin-top: 0px;
  display: flex;
}

#search-bar {
  padding: 8px 35px 8px 15px;
  margin-left: 20px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--text-reverse);
  font-size: 14px;
  max-width: 200px;
}

#clear-btn {
  /* Hidden by default until user types */
  display: none;
  margin-left: 15px;
  font-size: 40px;
  background: none;
  border: none;
  font-size: 25px;
  color: var(--accent);
  cursor: pointer;
  line-height: 1;
}

#clear-btn:hover {
  color: red;
}

input:focus {
  outline: none;
  /* removes the default outline */
  border: 4px solid #f4f2f2;
  box-shadow: 0 0 15px var(--shadow);
}

#right-wraper h3 {
  font-family: sans-serif;
  font-size: 16px;
  margin-left: 15px;
}

/* -------------------Tag filter list on desktop --------------------- */

/* right side tag list  */
#tag-cloud {
  /* this is the continer */
  display: flex;
  width: fit-content;
  flex-direction: column;
  margin-left: 20px;
  gap: 8px;

}

.tag-btn {
  /* tis the button itself */
  flex: 0 0 auto;
  width: fit-content;
  white-space: nowrap;
  border-radius: 15px;
  border: none;
  font-size: 14px;
  transition: all 0.4s ease;
  text-align: left;
  margin-bottom: 5px;
  padding: 8px 35px 8px 15px;
  color: var(--text-button-reverse);
  cursor: pointer;
  background-color: transparent;
}

.light-theme .tag-btn:hover {

  box-shadow: 0 0 15px var(--shadow);
}

.tag-btn:hover {
  background-color: var(--accent);
  transform: translateX(5px);
  box-shadow: 0 0 15px var(--shadow)
}

.tag-btn.active {
  background: var(--accent);
  color: var(--text-reverse);

}


/* This dropdown olny show in mobile hide on desktop */
/*  ---- see its setting on mobile section at the buttom of this file */
.mobile-tag-filter {
  display: none;
}


/* --------------------------------------------------------------- */
/* --                        Main blog bag pagination          -- */
/* ------------------------------------------------------------- */

/* Pagination - Circles between Buttons */
/* 1. The Fixed Bar */
.pagination {
  position: fixed;
  /* Lock it to the screen */
  bottom: 0;
  /* Stick to the very bottom */
  left: 0;
  width: 100%;
  /* Stretch across the screen */
  height: 50px;
  /* Set a consistent height */

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;

  /* Styling to make it look like a bar */
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  /* Ensure it stays on top of posts */
}

#pagination-numbers {
  display: flex;
  gap: 8px;
}

.page-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--text-reverse);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.page-circle.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.nav-btn {
  padding: 8px 15px;
  border: 1px solid var(--border2);
  background: var(--secondary);
  color: var(--text-reverse);
  cursor: pointer;
  border-radius: 4px;
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}



/* -------------- # Scroll Top Button ------------ */

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 10px;

}

.scroll-top {
  position: fixed;
  visibility: visible;
  opacity: 1;
  right: 20px;
  z-index: 9999;
  /* background-color: var(--accent); */
  /* width: 40px;
  height: 40px; */
  border-radius: 40px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 32px;
  color: var(--accent);
  line-height: 0;
  z-index: 9999;
}

.scroll-top i:hover {
  color: #94bfea;
}






/* ============================================================
                      The article (HTML Details Page)
   =========================================================== */

body {

  padding-bottom: 40px;
}

body.article-page {
  max-width: 1000px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--bg) !important;
  color: var(--text);
  line-height: 1.6;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ---------------  Article page header ------------- */
#article-header {
  /* this is the top div above the main contant */
  /*  it has the article tital and the date & share buton and img */
  margin: auto;
}

#article-header h1 {
  font-size: 32px;
  margin-top: 0px;
  padding-left: 20px;

}

/* Atricle image wrapper */
.header-image-wrapper {
  display: flex;
  justify-content: center;
  /* Centers children horizontally */
  margin-top: 0px;
}

.header-image-wrapper img {
  width: 80%;
  margin: auto;
}

/* -------------- Article page  content  section ---------*/
#main-content {
  padding: 10px 20px 0px 60px;
  margin-bottom: 50px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;


}

/* -------------- Top row has Date & share button ------------------ */
.update-row {
  display: flex;
  justify-content: space-between;
  /* Pushes date left and button right */
  align-items: center;
  /* Keeps them vertically aligned */
  margin: 15px 0;
  padding-bottom: 0px;
  border-bottom: 1px solid var(--border);
}

.update-row span {
  /* post date */
  padding-left: 20px;
}

/*-------- share button ------------------ */
/* Show State */
.share-popup.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

.share-wrapper {
  /* Share button continer */
  position: relative;
  display: inline-block;
  margin-bottom: 5px;
}

#shareBtn {
  /* this is the button itself (light theme) */
  width: 90px;
  height: 30px;
  font-size: 14px;
  color: var(--text-reverse);
  font-weight: 400;
  padding: 5px 5px;
  background-color: var(--secondary);
  border: none;
  border-radius: 5px;
  margin-right: 20px;
}

#shareBtn:hover,
#shareBtn:focus {
  /* the button itself when gets hover or focus */
  box-shadow: 0 0 15px var(--shadow);
}

.share-popup {
  /* this is dropdown */
  visibility: hidden;
  overflow: auto;
  opacity: 0;
  position: absolute;
  z-index: 1000;
  top: 50%;
  right: calc(100% + 20px);
  background: var(--secondary);
  color: var(--text-reverse);
  border-radius: 14px;
  box-shadow: 0 0 15px var(--shadow);
  padding: 5px 10px 5px 10px;
}

/* Dropdwon Menu Items */
.share-popup a,
.share-popup button {
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  padding: 10px 10px 20px 5px;
  background: var(--secondary);
  text-decoration: none;
  color: var(--text-reverse);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.1s;
}

.share-popup a:hover,
.share-popup button:hover {

  color: #0b91e4;
}

/* --------------------------------------------------------------- */
/* ----------------------  Article page footer ------------------ */
/* ------------------------------------------------------------- */
footer.article-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.article-footer .scroll-top {
  bottom: 7px;

}

.article-footer p {
  font-size: 14px;
  color: #09649d;
}

/* ============================================================
                      MOBILE RESPONSIVENESS
   =========================================================== */


@media (max-width: 768px) {

  #right-wraper h3 {
    display: none;
  }

  .post-content-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-direction: column;
    width: auto;

  }

  /* ------- this to fit all divs as column -------*/
  #middle-section {
    flex-direction: column;
    width: fit-content;
    margin: 10px;
    float: none;
  }

  #right-wraper {
    order: 1;
  }

  #left-wraper {
    order: 2;
    width: 100%;
  }

  /* ------------ Article page Top header  ----------- */
  .header-top {
    display: flex;
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
  }

  .header-top h1 {
    font-size: 24px;
    padding: 0%;
  }

  .post-title {
    font-size: 20px;
  }

  .pagination {
    /* pagination for the main blog page */
    gap: 10px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    bottom: 0;


  }

  .nav-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }



  /* Hide the vertical cloud buttons */
  #tag-cloud {
    display: none;
  }

  #clear-btn:hover {
    color: red;
  }


  /* ---------------------------------------------- */
  /* The "Filter by tag" button only shows in mobile */

  .mobile-tag-filter {
    /* outside the list */
    display: block !important;
    margin: 20px 0 20px 20px;
    width: fit-content;
    text-wrap: nowrap;
    font-weight: 600;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* margin-left: 25px; */

  }

  #mobile-tag-dropdown {
    display: block !important;
    visibility: visible !important;
    border-radius: 10px;
    padding: 5px 15px 5px 15px;
    border: 2px solid var(--accent);
    background-color: var(--secondary);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: right;

  }

  #mobile-tag-list.hidden {
    display: none !important;
  }

  #mobile-tag-list {
    position: absolute;
    width: fit-content;
    background-color: var(--secondary);
    list-style: none !important;
    z-index: 1000;
    margin: 10px;
    border-radius: 15px;
    box-shadow: 0 0 15px var(--shadow);
    padding: 10px 10px 0px 15px;

  }

  #mobile-tag-list li {
    /* inside the dropdown list */
    color: var(--text);
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;

  }

  #mobile-tag-list li:last-child {
    border-bottom: none;
    padding-bottom: 15px;

  }

  /* Highlight the tag when touched */
  #mobile-tag-list li:hover {
    /* background-color: var(--accent); */
    text-decoration: #09649d;

  }

  .scroll-top {
    visibility: visible;
    opacity: 1;
    bottom: 0px;
  }

  .scroll-top i {
    font-size: 28px;
    color: var(--accent);
    right: 20px !important;
    padding-bottom: 25px;
    z-index: 9999;
  }

  .article-footer .scroll-top {
    bottom: -1px;

  }



  /* The magic class that hides/shows the menu */
  /* .hidden {
  display: none !important;
} */

  /* -------------- The article (HTML Details Page) ---- */
  #article-header h1 {
    font-size: 20px;
    margin-top: 0px;
    padding-left: 20px;

  }

  .article-footer p {

    font-size: 12px;
    color: #09649d;

  }

  /* --------------------- End of Mobile ----------------------------- */

}