/* ========================================= */
/* HYPHAE HOLDINGS - PAPERMOD THEME         */
/* ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=Inter:wght@300;400&display=swap');

/* ---------------------------------- */
/* THEME VARIABLES                    */
/* ---------------------------------- */

:root {
  --bg-primary: #FBF8F3;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #78716C;
  --accent: #2E4037;
  --accent-hover: #1F3D2B;
  --border: #A8A29E;
}

[data-theme="dark"] {
  --bg-primary: #2C2C2C;
  --text-primary: #ECECEC;
  --text-secondary: #B4B4B4;
  --text-muted: #8E8E8E;
  --accent: #5B8A72;
  --accent-hover: #6FA883;
  --border: #5A5A5A;
}

/* ---------------------------------- */
/* BASE STYLES                        */
/* ---------------------------------- */

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
}

/* ---------------------------------- */
/* LAYOUT                             */
/* ---------------------------------- */

/* Align header nav with main content */
.nav {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.logo a {
  display: inline-block !important;
  vertical-align: middle !important;
}

.logo-switches {
  position: fixed !important;
  right: 2rem !important;
  top: 2rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  z-index: 99 !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s ease !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  height: 32px !important;
}

.logo-switches:hover {
  opacity: 1 !important;
}

.main, main.main {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 1.5rem 2rem 3rem !important;
}

.main::before, main.main::before {
  content: '';
  display: block;
  width: 70ch;
  height: 1px;
  background: var(--border);
  margin: 0 auto 2.5rem auto;
  opacity: 0.7; /* Increased from 0.5 for better visibility */
}

/* ---------------------------------- */
/* TYPOGRAPHY                         */
/* ---------------------------------- */

.post-title, h1, .main h1, main.main h1, article h1,
.logo, .logo a, #logo, #logo a {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 2.25rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
  margin: 2rem auto 1.25rem auto !important;
  max-width: 70ch !important;
  text-align: left !important;
  text-decoration: none !important;
} 

/* Prevent drop cap on titles */
.logo::first-letter, .logo *::first-letter,
#logo::first-letter, #logo *::first-letter,
.post-title::first-letter, h1::first-letter {
  font-size: inherit !important;
  line-height: inherit !important;
  float: none !important;
  margin: 0 !important;
  font-weight: inherit !important;
}

/* ---------------------------------- */
/* BODY CONTENT                       */
/* ---------------------------------- */

.post-content, .post-single .post-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.post-content p {
  margin-bottom: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.8;
  max-width: 70ch;
  text-align: left;
}

.post-content p:last-of-type {
  margin-bottom: 1.25rem;
}

.post-content strong {
  font-weight: 400;
  color: var(--text-primary);
}

/* ---------------------------------- */
/* LINKS - FIX COLORS                 */
/* ---------------------------------- */

.post-content a {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-bottom-color 0.2s ease, color 0.2s ease !important;
}

.post-content a:hover {
  color: var(--accent-hover) !important;
  border-bottom-color: var(--accent-hover) !important;
}

.post-content a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  color: var(--accent-hover) !important;
}

/* Email link - special styling */
.post-content p:last-of-type strong a {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 1.125rem !important;
  letter-spacing: 0.01em !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}

.post-content p:last-of-type strong a:hover {
  color: var(--accent-hover) !important; /* Green on hover */
  border-bottom-color: var(--accent-hover) !important;
}

/* ---------------------------------- */
/* THEME TOGGLE - PAPERMOD            */
/* ---------------------------------- */

#theme-toggle {
  opacity: 0.9 !important;
  transition: opacity 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#theme-toggle:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.04) !important;
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
}

#theme-toggle svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transform: translateY(6px) !important;
}

[data-theme='dark'] #sun {
  display: none !important;
}

[data-theme='light'] #moon {
  display: none !important;
}

/* ---------------------------------- */
/* LANGUAGE MENU - PAPERMOD SPECIFIC  */
/* ---------------------------------- */

ul.lang-switch,
#menu ul.lang-switch {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  line-height: 32px !important;
  vertical-align: middle !important;
}

ul.lang-switch li,
#menu ul.lang-switch li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.lang-switch li:first-child,
#menu ul.lang-switch li:first-child {
  display: none !important;
}

ul.lang-switch li a,
#menu ul.lang-switch li a {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 0.5rem !important;
  border-radius: 6px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

ul.lang-switch li a:hover,
#menu ul.lang-switch li a:hover {
  color: var(--accent) !important;
  background: rgba(0,0,0,0.04) !important;
}

ul.lang-switch li a:focus-visible,
#menu ul.lang-switch li a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  background: rgba(0,0,0,0.06) !important;
}

/* ---------------------------------- */
/* SCROLL TO TOP BUTTON               */
/* ---------------------------------- */

.top-link {
  position: fixed !important;
  bottom: 3rem !important;
  right: 2rem !important;
  z-index: 98 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  cursor: pointer !important;
  color: var(--accent) !important;
  font-size: 18px !important;
}

.top-link.show {
  opacity: 0.6 !important;
  visibility: visible !important;
}

.top-link:hover {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

.top-link:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
}

/* ---------------------------------- */
/* FOOTER                             */
/* ---------------------------------- */

footer, footer.footer {
  margin-top: 2.5rem !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: var(--text-muted) !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

footer::before, footer.footer::before {
  content: '';
  display: block;
  width: 70ch;
  height: 1px;
  background: var(--border);
  opacity: 0.7; /* Increased from 0.35 for better visibility */
  margin: 0 auto 2rem auto;
}

footer *, footer.footer * {
  display: inline !important;
  color: var(--text-muted) !important;
}

footer a[href*="gohugo"], footer a[href*="hugo"],
footer span.footer-separator:last-of-type {
  display: none !important;
}

/* ---------------------------------- */
/* HIDE UNNECESSARY ELEMENTS          */
/* ---------------------------------- */

.post-meta, .post-tags, .share-buttons, .paginav, .post-footer,
.breadcrumbs, nav#TableOfContents, header.page-header, .page-header {
  display: none !important;
}

.list .main, .home-info {
  text-align: left !important;
}

/* ---------------------------------- */
/* MOBILE                             */
/* ---------------------------------- */

@media (max-width: 768px) {
  .main, main.main {
    padding: 1.25rem 1.5rem 4rem !important;
  }
  
  .nav {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  .logo-switches {
    right: 1.5rem !important;
    top: 1.5rem !important;
  }
  
  .post-title, h1, .logo, .logo a {
    font-size: 1.875rem !important;
  }
  
  .post-content p {
    max-width: 100% !important;
  }
  
  footer, footer.footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}