@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&display=swap');

/* Applies the IM Fell DW Pica font to all standard text across the entire page */

.Intro {  margin-bottom: 40px; 
  color: #3d1a04;            /* High-contrast pale yellow text */
  border: 2px solid #f5ae07 ; 
  border-radius: 20px;
  padding: 1px;
  text-align: center;
  background: #de8921;
  box-shadow: 0 0 0 9px #d14900; }
  
body, p, span, li, a {
  font-family: 'IM Fell DW Pica', serif;
  font-weight: 400;
  font-style: normal;
}

/* Applies the Fascinate font to all heading levels */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fascinate', cursive;
}

.im-fell-dw-pica-regular {
  font-family: "IM Fell DW Pica", serif;
  font-weight: 400;
  font-style: normal;
}

.im-fell-dw-pica-regular-italic {
  font-family: "IM Fell DW Pica", serif;
  font-weight: 400;
  font-style: italic;
}

.fascinate-regular {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.15em;
}

/* Grid layout wrapper */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 5fr;
  gap: 10px;
  background-color: #ffa928; /* This keeps the gaps between elements orange */
  padding: 10px;
}

/* Base style fallback for primary grid layout columns to prevent default white box overrides */
.container > .menu, 
.container > .content, 
.container > .footer {
  padding: 9px;
}

/* Specific styling and text alignment for the header block */
.container .header {
  grid-area: header;
  text-align: center;
  background-size: 920px;
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
  padding: 9px;
}

/* 1. Menu block colors */
.container .menu {
  grid-area: menu;
  width: 150px; 
  flex-shrink: 0; 
  background-color: #fffca8;
  border: 4px solid #f5ae07; 
  border-radius: 16px;
  box-shadow: 0 0 0 4px #de8921, 0 0 0 8px #d14900; 
  padding: 10px; 
}

.container div.menu-text {
  padding: 0;                
  width: 140px;              
  height: 45px;              
  background-color: #d14900; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffca8;     
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em; 
  text-shadow: 2px 1px 0px #3d1a04;
  border: 2px solid #de8921; 
  box-shadow: 0 0 0 4px  #3d1a04;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.container div.menu-text a {
  text-decoration: none; 
  color: inherit;        
  display: flex;         
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;        
}

.container div.menu-text span {
  font-size: 19px;          
  line-height: 1;              
  white-space: nowrap;  
}

.container div.menu-text:hover {
  background-color: #de8921;   
  border-color: #b85c14;     
  cursor: pointer;    
}
  
/* 2. Content block borders updated to match the orange theme */
.container .content {
  grid-area: content;
  background-color: #fffca8;
  border: 4px solid #f5ae07; 
  border-radius: 16px;
  box-shadow: 0 0 0 4px #de8921, 0 0 0 8px #d14900; 
  padding: 20px; 
}
  
.container .posts-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffa8;
  border-radius: 16px;
}
 
/* 3. Post blocks cleaned up and updated to match the orange theme */
.post { 
  margin-bottom: 40px; 
  background-color: #3d1a04; 
  color: #fffca8;            
  border: 4px solid #f5ae07; 
  border-radius: 16px;
  box-shadow: 0 0 0 4px #de8921, 0 0 0 8px #d14900; 
  padding: 20px;
}

/* Fixes the date text inside the brown cards */
.post .post-meta {
  color: #ff9d24; 
}

.post:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.container .footer {
  grid-area: footer;
  padding: 10px;
  text-align: center;  
}

/* 1. Prepares the box to anchor the absolute-positioned image */
.welcome-box {
  position: relative;
  margin-top: 5px;    
  padding-top: 95px;   
}

/* 2. Locks the image perfectly in the middle of the top border line */
.welcome-badge {
  position: absolute;
  top: 87px;              
  left: 7%;           
  transform: translate(-5%, -5%); 
  width: 250px;         
  height: auto;
  z-index: 10;         
}

.read-more-btn {
  background-color: #d14900;
  color: white;
  border: 2px solid #de8921;
  box-shadow: 2px 2px 0px #3d1a04;
  padding: 6px 12px;
  font-family: inherit;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

.read-more-btn:hover {
  background-color: #de8921;
}