/*
Theme Name: kristoftheme
Text Domain: kristoftheme
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Description: Lean block theme for text-first portfolios (ACF-ready)
Author: You
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*Width constraints*/

:root {
  /* --- Text Colors --- */
  --text-primary: #000000;      /* main text */
  --text-secondary: #9d9ea0;    /* accent / secondary text */
  --text-hover: #9d9ea0;        /* hover color (same as secondary) */
  --text-secondary-hover: #596259; /* darker secondary hover tone */
  --background-primary: #fafafa;	/*vary light etc */
  --background-secondary: #ddded0;	/*darker etc */
	  
}

/* Example usage */
body {
  color: var(--text-primary);
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover {
  color: var(--text-hover);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-secondary:hover {
  color: var(--text-secondary-hover);
}



@media (min-width: 640px) {
    .body-home .home-hero {
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

body {
	color: var(--text-primary);
	font-family: 'Neue Haas Grotesk Disp', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

}


section {
	width: 100%;
	padding: 48px 78px;
	box-sizing: border-box;
}

.site-hero{
  /* prefer dynamic/small viewport units; fall back to 100vh */

  min-height: 100vh;
	
	 width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* push bottom strip to the bottom */
  
	padding: 48px 78px;
	box-sizing: border-box;
	overflow: hidden;
}

.site-header{

	 width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* push bottom strip to the bottom */
  
	padding: 48px 78px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Center area: title + menu bar */
.hero-center{
  margin: 0 auto;
  width: 100%;
}

.hero-left{
  margin: 0;
  width: 100%;
}


h1,
.site-title {
  font-weight: 500;
  margin: 0;
}

.site-title a {
	color: inherit;
	text-decoration: n one;
}
.site-title a:hover,
.site-title a:focus {
	color:inherit;
}
/* >1200px */
@media (min-width: 1201px) {
  h1,
  .site-title {
    font-size: 72px;
    line-height: 78px;
    letter-spacing: -2.2px;
  }
}

/* Between 641px and 1200px */
@media (max-width: 1200px) and (min-width: 641px) {
  h1,
  .site-title {
    font-size: 40px;
    line-height: 45px;
    letter-spacing: -1.2px;
  }
}

/* <640px */
@media (max-width: 640px) {
  h1,
  .site-title {
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.8px;
  }
	
	.site-hero {
		padding: 20px 36px;
	}
}
.site-title {
	margin-bottom:50px;
}

/* Nav wrapper spans full viewport width */


.nav-wrapper {
  width: 100%; /* fill the .site-hero container, not entire viewport */
  margin: 0;   
  padding-bottom: 0;
  border-top: 1px solid rgb(219,220,223);
  border-bottom: 1px solid rgb(219,220,223);
  box-sizing: border-box;
}

.nav-scroll-wrapper {
  width: 100%;
  margin:0;
	padding-bottom: 0px;
	border-top: 1px solid rgb(219,220,223);
}

/* Horizontal lines */
.nav-line {
  border-top: 1px solid #111;
  width: 100%;
}

/* Split nav container */
.site-nav{
  display: flex;
  flex-direction: row;           /* ensure horizontal layout */
  justify-content: space-between;/* left and right groups stay on same line */
  align-items: center;
  flex-wrap: nowrap;  
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}

/* Left + right zones */
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 60px;
  flex: 0 0 auto; /* don't expand to fill width */
}

.site-nav a, a.link  {
  text-decoration: none;
  color: #111;
  opacity: 0.8;
  position: relative;
  font-weight: 300;
  font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.5px;
  transition: color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}


/* Between 641px and 1200px */
@media (max-width: 1200px) {
  .site-nav a, a.link  {
    font-size: 18px;
    line-height: 22px;
  }
}


.site-nav a:hover {
  color: var(--text-hover);
  opacity: 1;
}

/* Current/active page — stays greyed */
.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--text-hover);
  opacity: 1;
  pointer-events: none; /* optional: disables click on current page */
}

/* Bottom strip: full-bleed line + left-aligned note within 1400px */
.hero-bottom{ margin-top: 2rem; }
.hero-line{ border-top: 1px solid #111; width: 100vw; margin-left: calc(50% - 50vw); }
.hero-note{
  text-align: left;
  font-weight: 500;
  font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem); /* 18px → 24px */
  letter-spacing: 0.05em;
  
}
.hero-note span{ color:var(--text-hover); } /* active link grey for “Scroll down” */



.read-more {
	margin-top:30px;
	display:flex;
	width:100%;
	padding: 20px 0;
}

/* remove default margins that can push content */
.site-title { margin: 0 0 24px; }
.hero-note { margin: 0; padding: 0; }
.hero-note p { margin: 0; padding: 0; line-height: 1.2; }


/* Desktop pill filters */
.writings-pills, .lectures-pills, .podcasts-pills{
  margin: 0 auto 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  border-top: 1px solid rgb(219,220,223);
  border-bottom: 1px solid rgb(219,220,223);
  padding-top: 12px;
  padding-bottom: 12px;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pill-label {
  font-size: .9rem;
  color: #666;
  margin-right: 6px;
}

.pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--text-hover);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-hover);;
	font-weight: 300;
	font-size:14px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.pill.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

.pill-clear {
  margin-left: auto;
  text-decoration: none;
  color: var(--text-secondary, #9deae0);
}
.pill-clear:hover { color: var(--text-secondary-hover, #596259); }

/* Hide mobile filters by default */
.writings-filter,
.podcasts-filter,
.lectures-filter {
  display: none;
}

/* Mobile view: use dropdowns instead of pills */
@media (max-width: 767px) {
  .writings-pills,
  .podcasts-pills,
  .lectures-pills {
    display: none;
  }

  .writings-filter,
  .podcasts-filter,
  .lectures-filter {
    display: block;
    max-width: 1400px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
  }

  .writings-filter .filter-row,
  .podcasts-filter .filter-row,
  .lectures-filter .filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: center;
    border-top: 1px solid rgb(219,220,223);
    border-bottom: 1px solid rgb(219,220,223);
    padding: 12px 0;
  }

  .writings-filter label,
  .podcasts-filter label,
  .lectures-filter label {
    grid-column: 1 / -1;
    font-size: .9rem;
    color: #666;
  }

  .writings-filter select,
  .podcasts-filter select,
  .lectures-filter select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: .95rem;
  }
}


/* Grid (same as before; included here for completeness) */
.writings-grid {
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}
.podcasts-grid, .lectures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin: 0 auto;
  box-sizing: border-box;
}
.podcast-card, .lecture-card  { 
	display: flex;
  flex-direction: column;
  border: 0;
  padding: 30px;
  background-color: var(--background-secondary);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.writing-type {
	font-size:14px;
	font-weight:100;
  	text-transform: none;
  	letter-spacing: 0;
  	color: var(--text-primary);
  margin: 0 0 12px 0;
}
.writing-body{
	display: flex;
  gap: 18px;
  align-items: flex-start;
}
.writing-card:hover, .podcast-card:hover, .lecture-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.writing-image img, .podcast-image img, .lecture-image img { 
  width: 150px;
  max-width: 150px;
  height: auto;
  display: block;
  object-fit: cover;
}
.writing-content, .podcast-content, .lecture-content {
	flex: 1 1 auto;
  padding: 0;
}
.writing-title, .podcast-title, .lecture-title { font-size: 32px; line-height: 30px; font-weight: 500; margin: 0 0 .5rem; }
.writing-sub, .podcast-sub, .lecture-place { font-style: italic; color: #666; margin-bottom: .5rem; }
.writing-meta, .podcast-meta, .lecture-meta { font-size: 14px; line-height:14px; color: #333; margin-bottom: .8rem; }
.writing-abstract {font-size:14px; line-height:16px; font-weight: 300; color: var(--text-primary);}
.writing-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.writing-link, .podcast-link, .lecture-link { color: #000; text-decoration: none; }
.writing-link:hover,.podcast-link:hover, .lecture-link:hover { var(--text-secondary-hover, #596259) }
.writing-topics { font-size: 14px; color: var(--text-secondary);}
.no-results { max-width: 1400px; margin: 1rem auto 2rem; padding: 0 1rem; color: #666; }


.writing-card {
  display: block;
  border: 0;
  padding: 30px;
  background-color: var(--background-secondary);
  overflow: hidden;
  transition: box-shadow .2s ease;
  margin-bottom: 30px;
}

.writing-other {
	margin-top: 30px;
}
.w-row {
  width: 100%;
}

.w-row-top {
  margin-bottom: 12px;
}

.w-row-main {
  display: flex;
  gap: 24px;
  align-items:end;
}

.w-col-media {
  width: 160px;
  flex: 0 0 160px;
}


.writing-primary-link {
  margin-top: 10px;
	font-size:14px;
	font-weight:100;
}

.w-col-content {
  flex: 1 1 auto;
  min-width: 0;
}


.writing-toggle {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  color:  var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 100;
}

.w-row-extra {
  margin-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.03);
  padding-top: 14px;
}



.writing-quotes .writing-quote {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid #eee;
  font-style: italic;
  color: #444;
}

@media (max-width: 700px) {
  .w-row-main {
    flex-direction: column;
  }
  .w-col-media {
    width: 100%;
    flex: none;
  }

}



/* Mobile layout: stack everything vertically */
@media (max-width: 640px) {
	
	
	.site-hero {
		min-height: calc(100vh - 100px);
	}
	.nav-wrapper {
		border:0;
	}
	.site-title {
    margin-bottom: 50px;
	}
	
		
  .site-nav {
    flex-direction: column;
    align-items: stretch;        /* make each link fill full width */
    gap: 0px;
	  padding: 10px 0;
  }

  .site-nav a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 0;
    border-top: 1px solid rgb(219,220,223); /* divider above each link */
    font-size: 1.1rem;
  }

	.read-more {
		margin-top:0px;
		padding: 0 0;
	}

  .nav-left,
  .nav-right {
    flex-direction: column;        /* stack links within each group */
    align-items: flex-start;
    gap: 0px;
  }

/* Mobile tidy */
@media (max-width: 640px) {
  .site-header { padding: 20px 14px 10px; }

}