/* ======================================
   Ruth Academic Theme — TeXify3 overrides
   ====================================== */

/* =========================
   1) TOKENS (single source of truth)
   ========================= */

/* Light (default) */
:root{
  --paper:   #F3EAD8;
  --panel:   #F3EAD8;   /* keep flat; set slightly lighter if you want a “card” */
  --ink:     #3E3838;
  --rule:    #d7cec2;

  /* Body links */
  --bodylink:#664534;

  /* Nav colors */
  --nav-about:    #9E4730; /* terracotta */
  --nav-research: #187481; /* teal */
  --nav-teaching: #5555B0; /* indigo */
  --nav-cv:       #AB2B67; /* magenta */
  

  /* Toggle chip */
  --toggle-bg: var(--paper);
  --toggle-icon: var(--ink);
}


/* =========================
   2) GLOBAL BACKGROUND + TEXT
   ========================= */

html, body{
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Make every major wrapper obey the theme variables */
main, header, footer,
.container, .content, .page, .wrapper, .post, .single, .home,
article, section, .section, .main, .content-wrapper,
#content, #main, #page, #wrapper{
  background: var(--panel) !important;
}

/* Rules / dividers */
hr, header hr{
  border-color: var(--rule) !important;
}

/* =========================
   3) Global hygiene
   ========================= */

/* Hide Buy Me a Coffee junk */
.bmc-btn-container,
.bmc-float,
#bmc-wbtn,
.buymeacoffee,
a[href*="buymeacoffee.com"]{
  display: none !important;
}

/* Kill automatic heading numbering */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before{
  content: none !important;
}

/* Remove bullets in main content */
main ul, main ol{
  list-style: none;
  padding-left: 0;
}

/* =========================
   4) Typography + spacing
   ========================= */

main p{
  line-height: 1.55;
  margin-bottom: 1rem;
}

h2{ margin-bottom: 0.4rem; }
h3{ margin-bottom: 0.2rem; }
h4{ margin-bottom: 0.2rem; }

/* Tighten space between headings and the *next* block */
main h2, main h3, main h4{
  margin-bottom: 0.5rem !important;
}

main h2 + *, main h3 + *, main h4 + *{
  margin-top: 0 !important;
}

/* Most common offender: paragraph default top margin */
main h2 + p, main h3 + p, main h4 + p{
  margin-top: 0 !important;
}

li {
  margin-bottom: 7px; /* Adjust the value as needed */
}


/* =========================
   5) Page width + centering
   ========================= */

main, .container, .content, article{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

/* =========================
   6) Header cleanup
   ========================= */

/* Hover color for site title only */
header .logo a:hover,
header .site-title a:hover,
header h1 a:hover,
header .navbar-brand:hover{
  color: #5A6840 !important;
  /* uses your terracotta */
}

header{
  padding-top: 0.6rem;
  padding-bottom: 0.4rem;
}

/* Reduce site title size (TeXify3) */
header h1,
header .site-title,
header .logo{
  font-size: 2.1rem !important;
}


/* =========================
   7) Homepage layout
   ========================= */

h2{
  padding-left: 6rem;
}

.home-grid{
  display: grid;
  grid-template-columns: minmax(520px, 2fr) 280px;
  gap: 2rem;
  align-items: start;

  justify-content: center;
  margin-left: auto;
  margin-right: auto;

  padding-left: 6rem;
}

.home-text{ max-width: none; }

.home-photo{ height: 380px; }

.home-photo img{
  width: 70%;
  height: 70%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

/* Mobile */
@media (max-width: 900px){
  /* kill the left indent you already fixed */
  .home-grid{ padding-left: 0; }
  h2{ padding-left: 0; }

  /* IMPORTANT: force the grid to ONE column */
  .home-grid{
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  /* Let grid items shrink instead of forcing overflow */
  .home-text,
  .home-photo{
    min-width: 0;
  }

  /* Image should never exceed the screen */
  .home-photo{
    max-width: 100%;
    height: auto;
  }

  .home-photo img{
    width: 100% !important;
    height: auto !important;
    display: block;
    max-width: 100%;
  }

  /* If you still want text then photo (not necessary for overflow, just layout) */
  /* Optional: if you did the grid-template-areas approach, keep that instead */
}

/* =========================
   8) Links
   ========================= */

/* Default: body links are brown */
a{
  color: var(--bodylink) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 67, 36, 0.30);
}

a:hover{
  border-bottom-color: rgba(110, 67, 36, 0.65);
}

/* Site title should NOT look like a link
   (higher specificity than generic a{}) */
header .logo a,
header .site-title a,
header h1 a,
header .navbar-brand{
  color: var(--ink) !important;
  border-bottom: none !important;
  text-decoration: none !important;
}


/* Nav colors ALWAYS win */
nav a{
  border-bottom-color: transparent !important;
}

nav a[href*="about"],
nav a:first-child{
  color: var(--nav-about) !important;
}
nav a[href*="research"]{ color: var(--nav-research) !important; }
nav a[href*="teaching"]{ color: var(--nav-teaching) !important; }
nav a[href*="cv"]{       color: var(--nav-cv) !important; }

nav a:hover{ opacity: 0.85; }

/* =========================
   9) Remove theme toggle entirely
   ========================= */
#dark-mode-toggle,
.dark-mode-toggle{
  display: none !important;
}