/* ========================================
   BASE STYLES
   Typography-first design using CSS
   custom properties for theming
   ======================================== */

/* ========== RESET ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ========== GLOBAL TYPE SCALE ========== */
html {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 48em) {
html { font-size: 16px; }
}

@media (max-width: 32em) {
html { font-size: 15px; }
}

/* ========== BODY ========== */
body {
font-family: var(--font-base);
color: var(--text-primary);
line-height: var(--line-height-base);
letter-spacing: 0.01em;
}

/* ========== WRAPPER ========== */
#wrapper {
position: relative;
max-width: var(--content-max-width);
background: var(--wrapper-bg);
border-radius: var(--wrapper-radius);
box-shadow: var(--wrapper-shadow);
margin: 0 auto;
padding: 1.5em 1.75em 1em 1.5em;
}

@media (max-width: 48em) {
#wrapper {
padding: 1.25em 1.5em;
}
}

@media (max-width: 32em) {
#wrapper {
border-radius: 0.8em;
padding: 1em 1.25em;
}
}

/* ============  PINNED COFFEE/DINNER LINK ==== */
#pinned_channel_link {
font-size: 0.95rem;
font-style: italic;
color: var(--pinned-text);
background: var(--pinned-bg);
border-radius: 0.5em;
transition: all 0.2s ease;
margin: 0.25em 0 1em 0;
padding: 0.25em 1em;
}

#pinned_channel_link:hover {
background: var(--pinned-hover-bg);
color: var(--pinned-hover-text);
}

#pinned_channel_link p {
margin: 0;
}

#pinned_channel_link a {
font-weight: 600;
color: var(--pinned-link);
text-decoration: none;
transition: color 0.2s ease;
}

#pinned_channel_link a:hover {
color: var(--link-hover);
text-decoration: underline;
}

/* ============  BACK TO INDEX LINK (CLASS) ==== */
.back_to_index {
font-size: 0.9rem;
color: var(--text-muted);
background: transparent;
border-radius: 0.5em;
transition: all 0.2s ease;
margin: 0 0 1.5em 0;
padding: 0.5em 1em;
}

.back_to_index:hover {
background: var(--gil-bg);
}

.back_to_index p {
margin: 0;
}

.back_to_index a {
font-weight: 600;
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease;
}

.back_to_index a:hover {
color: var(--link-hover);
text-decoration: underline;
}

/* ========== TIMESTAMP ========== */
#timestamp {
font-family: var(--font-secondary);
font-size: 0.85rem;
font-weight: 400;
color: var(--timestamp-color);
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 0.5em 0;
}


/* ========== HEADINGS ========== */
h1 {
font-size: 2rem;
font-weight: 600;
color: var(--heading-color);
text-align: center;
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
margin: 0;
}

h2 {
font-size: 1.25rem;
font-weight: 400;
color: var(--text-secondary);
text-align: center;
font-style: italic;
line-height: var(--line-height-base);
margin: 0;
}

h3 {
font-size: 1.15rem;
font-weight: 600;
color: var(--heading-color);
line-height: var(--line-height-tight);
letter-spacing: -0.01em;
margin: 2.5em 0 1em 0;
}

h2.archive_subtitle {
font-size: 1.1rem;
color: var(--text-muted);
margin: 0;
}

/* ========== SPEAKER BLOCKS ========== */
.gil,
.zeke,
.guestspeaker,
.aside{
border-radius: var(--speaker-radius);
border-left: 3px solid transparent;
margin: 1.5em 0;
padding: 1em 1.5em;
}

.gil {
font-family: var(--font-gil);
background: var(--gil-bg);
border-left-color: var(--gil-border);
}

.zeke {
font-family: var(--font-zeke);
background: var(--zeke-bg);
border-left-color: var(--zeke-border);
}

.guestspeaker {
font-family: var(--font-guest);
background: var(--guest-bg);
border-left-color: var(--guest-border);
}

.gil p,
.zeke p,
.guestspeaker p {
font-size: 1.05rem;
color: inherit;
line-height: var(--line-height-relaxed);
}

.gil p + p,
.zeke p + p,
.guestspeaker p + p {
margin-top: 0.85em;
}

.gil::before {
display: block;
font-family: var(--font-secondary);
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
content: "Gil";
margin-bottom: 0.5em;
}

.zeke::before {
display: block;
font-family: var(--font-secondary);
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
content: "Z3k3";
margin-bottom: 0.5em;
}

.guestspeaker::before {
display: block;
font-family: var(--font-secondary);
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
content: "Guest";
margin-bottom: 0.5em;
}

/* ========== NARRATOR / ITALIC UTILITY ========== */
.italic_font {
font-family: var(--font-base);
font-style: italic;
}

.poem_blk {
border-left: 0.125em solid var(--text-muted);
border-radius: var(--speaker-radius);
margin: 0.5em 0 0.5em 0;
padding: 0.5em;
}
/* Or nuclear option */
.poem_blk p {
font-family: Georgia, 'Times New Roman', serif;
font-size: 0.95em; /* slightly smaller often helps */
line-height: 1.6;

}
/* ========== LINKS ========== */
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease;
}

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

/* ========== TOP NAV / HAMBURGER ========== */
#topnav_menu {
position: fixed;
width: fit-content;
z-index: 100;
margin: 0;
padding: 0;
}

#menu_button {
width: 2.5em;
height: 2.5em;
background: var(--menu-button-bg);
background-image: url('../imgs/common/menu_btn.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: 1.5em;
border: 1.5px solid var(--nav-border);
border-radius: 0.5em;
backdrop-filter: blur(8px);
cursor: pointer;
transition: all 0.2s ease;
margin: 0;
padding: 0.4em;
}

#menu_button:hover {
border-color: var(--link-color);
transform: translateY(-1px);
}

#topnav_menu ul {
position: absolute;
top: 3.2em;
left: 0;
display: none;
min-width: 12em;
background: var(--nav-bg);
border: 1.5px solid var(--nav-border);
border-radius: 0.6em;
backdrop-filter: blur(12px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
list-style: none;
padding: 0.5em;
}

#topnav_menu ul.visible {
display: block;
}

#topnav_menu ul li a {
display: block;
font-size: 0.95rem;
color: var(--nav-text);
text-decoration: none;
border-radius: 0.4em;
transition: background 0.2s ease;
padding: 0.6em 1em;
}

#topnav_menu ul li a:hover {
background: var(--nav-hover);
text-decoration: none;
}


/* ============== LANDING PAGE STYLES  ============  */



/* Add to base.css */

.channel-nav {
  margin: 2em 0;
}

.channel {
  background: var(--gil-bg);
  border-left: 3px solid var(--gil-border);
  border-radius: 0.8em;
  margin: 0 0 1.5em 0;
  padding: 1.25em 1.5em;
  transition: all 0.2s ease;
}

.channel:hover {
background: var(--zeke-bg);
border-left-color: var(--link-color);
}

.channel a {
display: block;
text-decoration: none;
color: inherit;
}
.channel a:hover{
text-decoration: underline;
}

.channel h3 {
color: var(--heading-color);
  font-size: 1.5rem;
margin: 0 0 0.5em 0;
}

.channel p {
color: var(--text-secondary);
margin: 0;
}

.channel:hover h3 {
color: var(--link-color);
}

.archive_anchor_link{  /* homepage links to year/month indices */
margin: -1.25em 0 1.5em 2em;
}

.archive_anchor{  /*monthly, entries page links to year/month indices */
margin: 0.85em 0 0.75em 0.75em;
}
.archive_anchor a{
  margin: 0 0 0 0.5em;
}

/* ========== ARCHIVE NAV LIST ==========  */


#archive_nav ul {
list-style: none;
margin: 0;
padding: 0;
}

#archive_nav ul li {
display: block;
width: 85%;
color: var(--link-color);
text-decoration: none;
background-repeat: no-repeat;
background-position: 0.5em center;
background-size: 5% auto;
border-style: dotted;
border-color: var(--list-border-light) var(--list-border-light) var(--list-border-dark) var(--list-border-light);
border-width: 0 0 0.065em 0.065em;
cursor: pointer;
transition: background-color 0.2s ease;
margin: 0.2em 0;
padding: 6px 0 4px 48px;
}

#archive_nav ul li.dir {
background-image: url("../imgs/common/folder_closed.png");
}

#archive_nav ul li.dir:hover {
background-image: url("../imgs/common/folder_open.png");
background-color: var(--list-hover-bg);
color: var(--list-hover-color);
text-decoration: underline;
}

#archive_nav ul li.file {
background-image: url("../imgs/common/file_closed.png");
}

#archive_nav ul li.file:hover {
background-image: url("../imgs/common/file_open.png");
background-color: var(--list-hover-bg);
color: var(--list-hover-color);
text-decoration: underline;
}


/* ========== POST INDEX LIST ========== */
#post_index_list {
list-style: none;
margin: 1em 0;
padding: 0;
}

#post_index_list li {
background: var(--gil-bg);
border-left: 3px solid var(--gil-border);
border-radius: 0.5em;
transition: all 0.2s ease;
background-image: url('../imgs/common/lft_curly_brace.svg');
background-repeat: no-repeat;
background-position: 0.25em center;
background-size: 2em;


margin: 0 0 0.75em 0;
padding: 0.65em 1.25em;
}

#post_index_list li:hover {
background: var(--zeke-bg);
background-image: url('../imgs/common/lft_curly_brace.svg');
background-repeat: no-repeat;
background-position: 0.25em center;
background-size: 2em;
border-left-color: var(--link-color);
}

#post_index_list li a {
display: block;
font-size:1.2em;

color: var(--text-primary);
text-decoration: none;
margin: 0 0 0 .75em;
}

#post_index_list li a:hover {
text-decoration: underline;
}

.post_date {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
margin: 0 0 0 .5em;
}


/* ========== FOOTER ========== */
#ftr {
text-align: center;
color: var(--footer-text);
border-top: 2px solid var(--footer-border);
margin: 0;
padding: 0.75em 0 0 0;
}

#ftr a {
color: var(--footer-link);
text-decoration: none;
transition: all 0.2s ease;
}

#ftr a:hover {
color: var(--link-hover);
text-decoration: underline;
}

.sister_sites {
list-style: none;
margin: 0 0 0.25em 0;
padding: 0;
}

.sister_sites li {
display: inline;
font-size: 0.9rem;
}

.sister_sites li + li::before {
color: var(--text-muted);
content: " • ";
padding: 0 0.5em;
}

.copyright {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}

.copyright strong {
font-weight: 600;
color: var(--text-secondary);
}


/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 48em) {
h1 {
font-size: 1.75rem;
}

h2 {
font-size: 1.15rem;
}

.gil, .zeke, .guestspeaker {
padding: 0.85em 1.15em;
}

#topnav_menu {
top: 0.75em;
left: 0.75em;
}
}

@media (max-width: 32em) {
h1 {
font-size: 1.5rem;
}

h2 {
font-size: 1rem;
}

.gil, .zeke, .guestspeaker {
margin: 1.25em 0;
padding: 0.75em 1em;
}

#post_index_list li {
padding: 0.75em 1em;
}
}