/**
 * Theme Name: Islands vLAIE
 * Template:   twentytwentyfive
 * Description: Liberatory AI theme
 * Authors: Bianchi Dy, Nikko Stevens, Alicia Delgado
 */

 /* this is where the styles will go for the site */

 /** proof it works **/

 /** template styles **/

 @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

 :root {
    --primary-color: #d3df4e;
    --secondary-color: #4b6aaf;
    --visited-color: #839444;
    --hover-text-color: #9e1f63;
    --hover-color-1: rgb(188, 196, 234);
    --hover-color-2: #f7bbca;
    --hover-color-3: #d3df4e;
    --hover-color-4: #be9ac7;
    --text-shadow-color: #be9ac76b;
    --background-color: rgba(188, 196, 234, 0.5);
    --text-color: #58595B;
    --subtitle-color: #58595B;
    --base-color: #ffffff;
  }

 /** Styles are ordered by alphabet **/

 a {
    position: relative;
    display: inline-block; /* Ensures background fits text */
    transition: background 0.5s ease-in-out, color 0.3s ease; /* Smooth transition for background and text */
    color: inherit; /* Keeps original text color */
    text-decoration: none; /* Removes underline */
  }
  
  a:hover {
    color: var(--hover-text-color) !important; /* Changes text color when hovering */
  }

  /* take the shadow off small links but add it to the header */
  p.wp-block-site-title > a {
    text-shadow: 
    -2px 0px var(--hover-color-4) Extra shadow
  }

  blockquote {

  }

 body { 
    color: var(--text-color);
    font-family: 'Libre Franklin', sans-serif;
    /** background-color: var(--background-color);**/
    background-color: var(--background-color); /* Base background color */
    background-image: url('images/felt-large.png'); /* Texture overlay */
    background-size: cover; /* Adjust texture scaling */
    background-repeat: repeat-y; /* Ensure texture repeats */
    background-blend-mode: overlay; /* Blend texture with color */
    /* Apply different styles based on screen width */
}

.caption {
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  color: var(--base-color);
  font-size: 14pt;
}

.grit {
    -webkit-mask-image: url("grit.png");
    mask-image: url("grit.png");
  }

.ffblock-block-frontend {
  font-family: 'Libre Franklin', sans-serif;
  color: var(--hover-text-color) !important;
  font-weight: 600;
}

.ff-el-form-control {
  background-color: var(--hover-color-4) !important;
  font-weight: 600;
  color: #ffffff !important;
}

/* Target the placeholder text as well */
.ff-el-form-control::placeholder {
  color: var(--hover-text-color) !important;
}

.ff-el-group button {
  text-transform: lowercase;
  background-color: var(--hover-color-4) !important;
  font-weight: 600 !important;
  color: var(--hover-text-color) !important;
  font-size: 22pt !important;
  border-radius: 50px !important;
}

 h1 {
    font-size: 36pt;
    line-height: 32pt;
    color: var(--secondary-color); 
}

h2 {
  color: var(--hover-text-color);

 }

 h3{ 
  color: var(--hover-text-color);
  margin-bottom: 21px;
  text-shadow: 
    -2px 0px var(--hover-color-4) /* Extra shadow */
 }

 hr.wp-block-separator.has-alpha-channel-opacity {
  size: 24px;
  background-color: var(--hover-text-color);
  border: 0 none;
  height: 6px;
  width: 10%;
  max-width: 800px; 
  margin-left:0;
 }

 .has-small-font-size {
    font-size: 14pt !important;
    line-height: 21.8pt;
 }

 html, body {
  max-width: 100%;
  overflow-x: hidden;
}

 main {
    width: 100% !important; /* Default to full width */
    /* max-width: 60vw !important; /* Maximum width is half of viewport width */ 
    margin-left: auto !important; /* Aligns it to the left with auto expansion */
    margin-right: auto !important; /* Keeps it centered */
    padding: 1rem !important; /* Some internal spacing */
  }
  
  /* On small screens (below tablets, e.g., less than 768px), make it full width */
  @media (max-width: 768px) {
    main {
      max-width: 100% !important;/* Make it full width on small screens */
      margin-left: 0 !important; /* Align fully to the left */
      margin-right: 0 !important; /* No extra right margin */
    }
  }  

wp-block-group {
  max-width: 100% !important; /* Ensures it spans the full width */
}

 /* On small screens (below tablets, e.g., less than 768px), make it full width */
@media (max-width: 768px) {
  main.wp-block-group {
    max-width: 100% !important;/* Make it full width on small screens */
    margin-left: 0 !important; /* Align fully to the left */
    margin-right: 0 !important; /* No extra right margin */
    text-align: left !important; /* Aligns text/content to the left */
  }
}  

 p {
    font-size: 16pt;
    line-height: 20pt;
 }

 /***** _> we don't have a SIDEBAR.
 .sidebar {
    position: absolute;
    top: 0; /* We'll override this with JS or CSS positioning 
    left: 0;
    max-width: 250px;
    /* border-width: 1px;
    border: lightblue; 
    border-style: dotted; 
    padding: 20px;
}

.sidebar h2.sidebar-title{
  font-weight: 800 !important;
  font-size: 18pt;
}

.sidebar p{
  font-weight: 600;
  font-style:italic;
  font-size: 11pt;
  line-height: 14pt;
}

.sidebar p span{
  background-color: var(--hover-color-4);
} */


/* Responsive: Stack on smaller screens */
@media (max-width: 600px) {
  .sidebar {
    position: static;
    width: 100%;
    margin-top: 10px;
  }
}

 ul.wp-block-page-list{
  text-transform: lowercase;
 }

 .wp-block-group {
  color: var(--text-color) !important;
 }

 p img {
  width: 100% !important;
  height: 100% !important;
 }





/* Special styles for block posts when the are H1s, or H2s, and also for all H2s.  */

 h1.wp-block-post-title, h2.wp-block-post-title, h1 {
  font-weight: 800;
  color: var(--hover-text-color);
  text-shadow: 
    -6px 3px var(--text-shadow-color) /* Extra shadow */
 }

 /** using some of these same styles for links to other posts  on the single-post page**/


 .wp-block-template-part {
  font-weight: 700;
  font-size: 36pt;
  --x: 30%;
  --y: 30%;
 /* background: radial-gradient(circle at var(--x) var(--y), #be9ac7, #d3df4e, #ef6237, #8e99cd); */
   background: radial-gradient(circle at var(--x) var(--y), #be9ac7, #8e99cd); 

  transition: background 1s ease;
  color: var(--hover-text-color);
  max-width: 100% !important;
 }

 @media (max-width: 768px) {
  .wp-block-template-part {
    background: linear-gradient(-45deg, #aca6d1, #ef6237, #cccb31);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    transition: background 0.5s ease;
  }
}  

 .wp-block-post-content.special-main {
  color: var(--hover-text-color) !important;
 }



 .wp-block-template-part p.wp-block-site-title{
  color: var(--hover-text-color);
 }

 .wp-block-template-part a:hover{
  color: var(--hover-text-color);
  text-decoration: none;
 }

 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--primary-color);

 }

 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--hover-text-color);
  text-decoration: none;
 }

 /* .wp-block-template-part:hover {
  background: linear-gradient(-45deg, #aca6d1, #ef6237, #cccb31);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  color: var(--hover-text-color);
} */

/* AUTHOR TAGS */
.wp-block-group.has-accent-4-color.has-text-color.has-link-color.has-small-font-size.is-layout-flex.wp-container-core-group-is-layout-5.wp-block-group-is-layout-flex {
  display: flex;
  flex-direction: column;     /* Stack items vertically */
  align-items: flex-start;    /* Align items to the left */
}

.wp-block-group.has-accent-4-color.has-text-color.has-link-color.has-small-font-size.is-layout-flex.wp-container-core-group-is-layout-5.wp-block-group-is-layout-flex p
 {
  font-weight: 800;
  font-size: 14pt;
  color: var(--hover-text-color);
  margin-bottom: 24px;
 }

 .wp-block-group.has-accent-4-color.has-text-color.has-link-color.has-small-font-size.is-layout-flex.wp-container-core-group-is-layout-5.wp-block-group-is-layout-flex 
 .wp-block-post-author-name {
   /* styles for the author name go here */
  font-weight: 600 !important;
  color: var(--subtitle-color);
 }

 .wp-block-group.has-accent-4-color.has-text-color.has-link-color.has-small-font-size.is-layout-flex.wp-container-core-group-is-layout-5.wp-block-group-is-layout-flex 
 .taxonomy-category {
   /* styles for the categories */
  color: var(--subtitle-color);
  font-weight: 600 !important;
  font-size: 14pt;
 }




 /** targets links in posts and 'read more' links on archive pages **/

 .wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained p a,
 .wp-block-post-excerpt__more-link {
  font-weight: 500 !important;
  padding: 2px;
  background-color: var(--text-shadow-color);
 }


 /** also targets the taxonomy pills to remove the shaky hover **/
 .taxonomy-post_tag a {
  font-weight: 500 !important;
  padding: 2px;
  background-color: var(--text-shadow-color);
  border-radius: 7px;
  border-width: 0.5px;
  line-height: 1.5;
 }

 .taxonomy-post_tag a:hover {
  text-decoration: none;
  text-shadow: none;
 }

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/** contributor list **/




.contrib-description .avatar  {
  float: left;
  margin: 0 1em 1em 0; /* Top, Right, Bottom, Left */
  max-width: 200px; /* Adjust as needed */
  height: auto;
}

.author-block::after {
  content: "";
  display: table;
  clear: both;
}


/*** Addition of A and I words in header and footer **/
.wp-block-site-tagline {
  opacity: 1;
  transition: opacity 0.5s;
}
.hide {
  opacity: 0 !important;
}