/* =========================
   1. GLOBAL STYLES
========================= */
@font-face {
  font-family: 'MomoTrustDisplay-Regular';
  src: url('fonts/MomoTrustDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MomoTrustDisplay-Regular', sans-serif;
  
  background-color: #4169e1;
  color: black;
  
  
  background-image: url("secret-place.png");
  background-size: cover;       /* makes it fill the screen */
  background-repeat: no-repeat; /* prevents tiling */
  background-position: center;  /* centers the image */
  background-attachment: fixed; /* keeps it still when scrolling (optional) */
}



/* =========================
   2. LAYOUT CONTAINERS
========================= */
.container {  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* delete this if the site break */
  position: relative;
  z-index: 2;
}

/* =========================
         MAIN GRID
========================= */

#main-grid {
  display: grid;
  
  /* grid-template-rows: repeat(14, 100px);
  grid-template-columns: repeat(14, 100px); */
  
  grid-template-rows: repeat(14, minmax(30px, 7vh));
  grid-template-columns: repeat(14, minmax(30px, 7vw));
  margin: 0 auto;
  overflow: visible; /* ⬅️ key addition */
}



/* =========================
   3. GRID ITEMS / COMPONENTS
========================= */
.container-item {
  border: 5px solid #4a4a4a;    
  background: /*url("cutcube.png") repeat,*/ linear-gradient(to bottom right, #906652, #6e5347);
  image-rendering: pixelated;
  border-radius: 10px 50px;
  box-shadow: -10px 10px;
}

/* Title box */
#title {
  grid-column: 6 / 10;
  grid-row: 12 / 14;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,221,138, 0.80);
  margin-top: 10%;
  padding-top: 10%;
  clip-path: polygon(0px 100%, 100% 100%, 100.75% 35.50%, 61% 34.5%, 49.71% -2px, 37.25% 33.5%, -3px 34%);
}


/* Portrait */
#portrait {
  grid-row: 3 / 5;
  grid-column: 2 / 4;
  border-radius: 10px 50px;
  border-color: #4a4a4a;
  }

/* Main content box */ 

#main {
  grid-row: 5 / 11;
  grid-column: 4 / 12;
  width: 500px;
  height: 500px;
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 10;
  
  background: linear-gradient(135deg, #c50d2b, #8f192c);
  border: 5px solid #4a4a4a;
  box-shadow: -10px 10px;
  
  /* Diamond shape trick */
  transform: rotate(45deg);
  border-radius: 20%;
  overflow: hidden;
}

.main-content {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Media Player */
#media-player {
  display: flex;
  grid-row:  11 / 13;
  grid-column: 12 / 14;
  z-index: 2;
  }

/* Support Link */
#support-link {
  display: flex;
  grid-row: 11 / 13;
  grid-column: 2 / 4;
  border-radius: 50px 10px;
  justify-content: center;
  align-items: center;
  z-index: 2;
  }
  
  #support-link img {
  /* width: 80%; */
  height: auto;
  display: block;
  object-fit: contain;
}

/* FREE SPACE */
#extra {
  display: flex;
  grid-row: 3 / 5;
  grid-column: 12 / 14;
  border-radius: 50px 10px;
  justify-content: center;
  align-items: center;
  }

  
  /* TABS */
  .navigation-tabs {
    font-family: 'MomoTrustDisplay-Regular', sans-serif;
    
    background-color: #c99157;
    border-color: #4a4a4a;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    margin-top: 50%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 20%;
    box-shadow: -10px 10px;
  
    transition: transform 0.2s ease, background 0.2s ease;
    
    }
    
    .navigation-tabs:hover {transform: translateY(-8px); background-color: #ffec9e;} 
  
  /* LINKS */
  #about {grid-row: 5 / 6; grid-column: 4 / 5;}
  #art {grid-row: 6 / 7; grid-column: 4 / 5;}
  #writings {grid-row: 5 / 6; grid-column: 5 / 6;}
  /* #shrines {grid-row: 1 / 2; grid-column: 6/7;} */


/* =========================
   4. SPECIAL ELEMENTS
========================= */
#RSS-Dog {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
}

#RSS-Dog iframe {
  width: 100%;
  height: 400px; /* default for desktop */
  margin-top: 0%;
  overflow: hidden;
  /* border: none; */ /* Uncomment if RSS feed border isn't wanted */
}

/* =========================
   5. RESPONSIVE DESIGN
========================= */
@media (max-width: 600px) {
  body {
    padding: 0;
  }

  .container {
    flex-direction: column;
    padding: 20px;
  }

  #main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .container-item {
    border-radius: 20px;
    margin-bottom: 20px;
  }

  #title,
  #main,
  #toolbar {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #RSS-Dog iframe {
    height: 300px; /* adjust for phones */
  }
}

/* =========================
   6. SVG BRANCHES
========================= */

#branch-box {
  position: absolute; /* or fixed if you want it to stick to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* optional so it doesn’t block clicks */
  z-index: 1;
}


/* --- ABOUT PAGE -- */



/* =========================
        ABOUT FLEX
========================= */

#about-flex {
  
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  margin: 10%;
  padding: 10%;
  }
  
  /* ABOUT GRID */
  #about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: repeat(2, auto);   /* 2 rows (height adjusts automatically) */
    width: 100vw; /* full width of the viewport */
    height: auto; /* adjust height to content (or set to 100vh if you want full screen) */
    }
    
/* ABOUT BACK BUTTON */
     #about-back-button {
  position: fixed;  /* or absolute if you only want it inside its parent */
  bottom: 20px;
  right: 20px;
  background: #906652;
  border: 5px solid #4a4a4a;
  border-radius: 10px 50px;
  color: black;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  
  transition: 
    transform 0.2s ease,
    box-shadow 0.3s ease,
    background-color 0.2s ease;   
}

#about-back-button:hover {
  transform: translateY(-8px); /* raises up */
  background-color: #b17a60; /* lighter shade */
  /* box-shadow: 0 0 20px #fddb6d, 0 0 40px #fddb6d; /* glowing effect * */
}

/* MAIN LEAFLETS BACKGROUND */

/* RED WAVES */

  
  /* GOLDEN WHEEL */
  
 .container-item.main-leaflets {
  background-color: #ffec9e; /* base color */
  background-image:
    radial-gradient(circle at 100% 150%, #ffec9e 24%, #e1ad6d 24%, #e1ad6d 28%, #ffec9e 28%, #ffec9e 36%, #e1ad6d 36%, #e1ad6d 40%, transparent 40%, transparent),
    radial-gradient(circle at 0    150%, #ffec9e 24%, #e1ad6d 24%, #e1ad6d 28%, #ffec9e 28%, #ffec9e 36%, #e1ad6d 36%, #e1ad6d 40%, transparent 40%, transparent),
    radial-gradient(circle at 50%  100%, #e1ad6d 10%, #ffec9e 10%, #ffec9e 23%, #e1ad6d 23%, #e1ad6d 30%, #ffec9e 30%, #ffec9e 43%, #e1ad6d 43%, #e1ad6d 50%, #ffec9e 50%, #ffec9e 63%, #e1ad6d 63%, #e1ad6d 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, #e1ad6d 5%, #ffec9e 5%, #ffec9e 15%, #e1ad6d 15%, #e1ad6d 20%, #ffec9e 20%, #ffec9e 29%, #e1ad6d 29%, #e1ad6d 34%, #ffec9e 34%, #ffec9e 44%, #e1ad6d 44%, #e1ad6d 49%, transparent 49%, transparent),
    radial-gradient(circle at 0    50%, #e1ad6d 5%, #ffec9e 5%, #ffec9e 15%, #e1ad6d 15%, #e1ad6d 20%, #ffec9e 20%, #ffec9e 29%, #e1ad6d 29%, #e1ad6d 34%, #ffec9e 34%, #ffec9e 44%, #e1ad6d 44%, #e1ad6d 49%, transparent 49%, transparent);
  background-size: 100px 50px;
}





/* ART GALLERY */

.art-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  justify-content: center;
}

/* Create four equal columns that sits next to each other */
.art-column {
  flex: 25%;
  max-width: 25%;
  padding: 0 30px;
}

.art-column img {
  margin-top: 20px;
  vertical-align: middle;
  width: 100%;
}

.photo {
  
  border: 5px solid #4a4a4a;
  border-radius: 50px;
  box-shadow: -10px 10px;
  
  }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .art-column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .art-column {
    flex: 100%;
    max-width: 100%;
  }
}

.photo-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 50%;
  background: #ffec9e;
  }
  
  /* =========================
   7. ABOUT & BACK BUTTON
========================= */

/* --- About Page Layout --- */
#about-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 40px 20px;
  box-sizing: border-box;
}

#about-content {
  max-width: 900px;
  width: 90%;
  background: linear-gradient(to bottom right, #906652, #6e5347);
  border: 5px solid #4a4a4a;
  border-radius: 30px;
  box-shadow: -10px 10px;
  padding: 30px;
  margin-bottom: 60px;
  overflow-y: auto;
}

#about-content p {
  line-height: 1.6;
  text-align: justify;
}

/* --- Universal Fixed Back Button --- */
/* --- Universal Back Button (same as #about-back-button) --- */
#back-button {
  position: fixed;  /* or absolute if you only want it inside its parent */
  bottom: 20px;
  right: 20px;
  background: #906652;
  border: 5px solid #4a4a4a;
  border-radius: 10px 50px;
  box-shadow: -10px 10px;
  color: black;
  padding: 30px 20px;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  
  transition: 
    transform 0.2s ease,
    box-shadow 0.3s ease,
    background-color 0.2s ease;   
    
}




#back-button h1 {
  font-size: clamp(1.2rem, 4vw, 2rem);
  margin: 0;
}

#back-button:hover {
  transform: translateY(-8px);
  background-color: #b17a60;
}

/* --- Mobile Scaling --- */
@media (max-width: 600px) {
  #back-button {
    bottom: 15px;
    right: 15px;
    padding: 12px 20px;
    border-width: 4px;
  }

  #back-button h1 {
    font-size: clamp(1rem, 5vw, 1.4rem);
  }
}


/* --- Art Page Adjustments --- */
.art-row {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* --- Responsive tweaks for About & Back --- */
@media (max-width: 600px) {
  #about-content {
    width: 90%;
    padding: 20px;
    font-size: 0.9rem;
  }

  #about-back-button {
    width: 70%;
    padding: 12px 20px;
  }

  #about-back-button h1 {
    font-size: clamp(1rem, 5vw, 1.5rem);
  }
}