/*
Theme Name:     eagp
Theme URI:      https://earthstage.pw
Description:    GeneratePress child theme for Earthstage.
Author:         Neil Zusman
Author URI:     https://mixplex.com
Template:       generatepress
Version:        0.1.0
*/

/* ======================================================
   EARTHSTAGE / EARTHHALL
   Prototype stylesheet evolved via iterative exploration.
   Re-ordered for semantic clarity. No behavioral changes.
   ====================================================== */

 /* Table of Contents */

/* =====================================================
   1. THEME METADATA & FONTS
   ===================================================== */
/* =====================================================
   2. BASE FIXES & GLOBAL OVERRIDES
   ===================================================== */
 /* =====================================================
   3. LAYOUT & STRUCTURAL SYSTEMS
   ===================================================== */
/* =====================================================
   4. NAVIGATION SYSTEMS
   ===================================================== */
/* =====================================================
   5. PAGE CONTEXT SYSTEMS (archive, search, taxonomy)
   ===================================================== */
/* =====================================================
   6. COMPONENT SYSTEMS
   ===================================================== */
/* =====================================================
   7. VISUAL / EXPERIMENTAL SYSTEMS
   ===================================================== */

/* -------------------------------------------------------------------------------*/

/* =====================================================
   1. THEME METADATA & FONTS
   ===================================================== */

/* Fonts */


@font-face {
    font-family: 'TrumpGothicEastBold';
    src: url('fonts/trumpgothiceast-bold/trumpgothiceastbold-webfont.eot');
    src: url('fonts/trumpgothiceast-bold/trumpgothiceastbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/trumpgothiceast-bold/trumpgothiceastbold-webfont.woff') format('woff'),
         url('fonts/trumpgothiceast-bold/trumpgothiceastbold-webfont.ttf') format('truetype'),
         url('fonts/trumpgothiceast-bold/trumpgothiceastbold-webfont.svg#TrumpGothicEastBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BigNoodleTitlingOblique';
    src: url('fonts/bignoodletitling-oblique/bignoodletitling-oblique-webfont.eot');
    src: url('fonts/bignoodletitling-oblique/bignoodletitling-oblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bignoodletitling-oblique/bignoodletitling-oblique-webfont.woff') format('woff'),
         url('fonts/bignoodletitling-oblique/bignoodletitling-oblique-webfont.ttf') format('truetype'),
         url('fonts/bignoodletitling-oblique/bignoodletitling-oblique-webfont.svg#BigNoodleTitlingOblique') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'oswaldregular';
    src: url('fonts/oswald_regular/oswald-webfont.eot');
    src: url('fonts/oswald_regular/oswald-webfont?#iefix') format('embedded-opentype'),
         url('fonts/oswald_regular/oswald-webfont.woff') format('woff'),
         url('fonts/oswald_regular/oswald-webfont.ttf') format('truetype'),
         url('fonts/oswald_regular/oswald-webfont.svg#oswald-webfont') format('svg');
   font-weight: normal;
   font-style: normal; 
}

@media (max-width: 768px) {
h1.entry-title  {
    font-size: 24px !important;
 }
}

.wp-block-quote {
    font-style:  normal;
    font-size: .95em !important;
}

/* =====================================================
   2. BASE FIXES & GLOBAL OVERRIDES
   ===================================================== */

   /* -----------------------------------------------------
   LEGACY / IMPORTED CONTENT UTILITIES
   ----------------------------------------------------- */

   /*importing classes*/
.rteindent1 {
    padding-left:  30px;
    font-size: .9em;
}


/* -----------------------------------------------------
   GLOBAL BLOCK / CONTENT NORMALIZATION
   ----------------------------------------------------- */

.wp-element-caption {
    font-size: .8em;
    font-weight: 200;
    margin-bottom: 1em;
    text-align:  center;
}

/* -----------------------------------------------------
   BLOCK-SPECIFIC OVERRIDES (Gutenberg)
   ----------------------------------------------------- */

.wp-block-image {
    margin:  1em;
}

@media (max-width: 960px) {
.wp-block-image.alignleft > figcaption,
.wp-block-image.alignright > figcaption,
.wp-block-image.aligncenter > figcaption,
.wp-block-image .alignleft > figcaption,
.wp-block-image .alignright > figcaption,
.wp-block-image .aligncenter > figcaption {
    display: block;
 }
}

/* conditional rules - other styling */

.entry-content img {
    margin:  1em 1em;
}

.single-fracking_type .inside-article .featured-image {
        display: none
}

.wp-block-table td, .wp-block-table th {
    border: 1px solid lightblue;
    padding: .5em;
}

 .top-thumb {
  margin: 10px  /* breathing room */
}

/* 📰 Images & Captions */
.wp-block-image img, .post-image img, .top-thumb img, .gb-block-image img {
  background: white;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 960px) {

  .wp-block-image.alignleft,
  .wp-block-image .alignleft, .wp-block-image.alignright,
  .wp-block-image .alignright {
    float: none;
    display: block;
    text-align:  center;
    width:  100%;
  }

}

.is-left-sidebar .gb-container h2.gb-headline, .is-left-sidebar  h3.gb-headline, .is-left-sidebar p.earthstage-sidebar-note   {
    margin-top:  15px;
    text-align:  center;
}

.earthstage-sidebar-note {
    font-size: 0.8rem;
    opacity: 0.7;
}

.is-left-sidebar .gb-container figure  {
    margin:  auto !important;
}

.is-left-sidebar .earthstage-frack-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.3;
    text-align:  center;
}

.is-left-sidebar .earthstage-frack-meta {
    font-size: 0.6rem;
    text-align:  right;
}

/* Sidebar frack links */

.is-left-sidebar .earthstage-frack-item a {
    color: #cc0000;
    text-decoration: none;
}

.is-left-sidebar .earthstage-frack-item a:hover {
    color: #1e73be;
}

.is-left-sidebar .earthstage-frack-item .earthstage-frack-thumb {
    text-align:  center;
}

.is-left-sidebar .earthstage-card-link {
    color: #cc0000;
    font-weight: 100;
}

.is-left-sidebar .earthstage-card-link:hover {
    color: #1e73be;
    font-weight: 100;
}

/* single fracking top — WRAP long URLs nicely */

.singlefracktop {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    column-gap: 1em;
    row-gap: 1em;
}


.authorterms {
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

/* label + url wrapper */
.single-frack-top-url {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5em;
    align-items: baseline;
}

.single-frack-top-url a {
    white-space: normal;   /* allow wrapping */
    overflow-wrap: anywhere;
    word-break: break-word; /* fallback */
    display: block;
}

/* Block style: Indented Content (frontend) */
@media (min-width: 769px) {
  .is-style-indented-content {
    margin-left: 25px;
  }

/* Headings inside indented block stay flush */
  .is-style-indented-content h1,
  .is-style-indented-content h2,
  .is-style-indented-content h3,
  .is-style-indented-content h4,
  .is-style-indented-content h5,
  .is-style-indented-content h6 {
    margin-left: 0;
    padding-left: 0;
  }
}

/* =====================================================
   3. LAYOUT & STRUCTURAL SYSTEMS
   ===================================================== */

html, body {
    height: 100%;
}

/* --------------------------------
   BIBLIO — CANVAS LAYOUT MODE
-------------------------------- */

body.page-template-page-biblio .site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.page-template-page-biblio .site-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.page-template-page-biblio .inside-site-content,
body.page-template-page-biblio .content-area,
body.page-template-page-biblio .site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Spinner container */
body.page-template-page-biblio .gb-container-frackspinner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.page-template-page-biblio .gb-container-frackspinner iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
}

   /* better borders */

@media (min-width: 769px) {
    .borders {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        border-width: 50px; /* Uniform border thickness */
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        box-sizing: border-box; /* Include borders in the size calculation */
        pointer-events: none; /* Optional: prevent interaction with borders */
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .borders {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        border-width: 20px; /* Uniform border thickness */
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        box-sizing: border-box; /* Include borders in the size calculation */
        pointer-events: none; /* Optional: prevent interaction with borders */
        overflow: hidden;
    }
}

/* fit the content on my dev page to the borders */

.home .featured-image, .home .site-logo {
    display: none;
}

.page-template-page-frack .featured-image, .page-template-page-about .featured-image {
    display: none;
}

@media (min-width: 769px) {
    .home #content {
        position: relative; /* Ensures it's positioned within its parent */
        width: calc(100% - 100px); /* Adjust width to account for borders (50px each side) */
        height: calc(100% - 100px); /* Adjust height to account for borders (50px each side) */
        margin: 50px auto; /* Centers the content inside the borders */
        padding: 20px; /* Add internal spacing for the content */
        box-sizing: border-box; /* Include padding in the element's dimensions */
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .home #content {
        position: relative; /* Ensures it's positioned within its parent */
        width: calc(100% - 40px); /* Adjust width to account for borders (20px each side) */
        height: calc(100% - 40px); /* Adjust height to account for borders (20px each side) */
        margin: 20px auto; /* Centers the content inside the borders */
        padding: 10px; /* Add internal spacing for the content */
        box-sizing: border-box; /* Include padding in the element's dimensions */
        overflow: hidden;
    }
}

#shade {
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.65)),color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000',endColorstr='#00000000',GradientType=1);
    z-index: -2;
}

.frackingtax {
    margin:  2em 1em 0em 1em;
}

.details {
    display:  block;
}


/* color animation layer */

#supersized {
   position: fixed;
   left: 0;
   display: block;
   top: 0;
   overflow: visible;
   z-index: -2;
   height: 100%;
   width: 100%;
}

@keyframes color-cycle {
  0% { background-color: #5C70E4; }
  10% { background-color: #EA9E2B; }
  20% { background-color: #9C6A1B; }
  30% { background-color: #5D6DE4; }
  40% { background-color: #839F2B; }
  50% { background-color: #5C70E4; }
  60% { background-color: #5D6D1D; }
  70% { background-color: #5C6EE4; }
  80% { background-color: #239F2C; }
  90% { background-color: #0C3A15; }
  100% { background-color: #839F2B; }
}

.element {
  animation: color-cycle 25s infinite;
}


/* GP Background Video - Add styles */

.background-video {
    position: fixed;
    top: 0;
    /*right: 0;*/
    /*bottom: 0;*/
    left: 0;
    opacity: 0.5;
    z-index: -1; /* Puts the video in the background */
    width:  100%;
    height: 100%;
}

video[poster] {
    object-fit: cover; /* Ensures the video covers the entire viewport */
    width: 100%;
    height: 100%;
}


/* Fade-in animation for #frontpageVideoWrapper */
#frontpageVideoWrapper {
    position: fixed; /* Fix the wrapper to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling */
    z-index: -1; /* Place it behind other content */
    opacity: 0; /* Start fully transparent */
    animation: fade-in-to-half 6s ease-in-out forwards; /* Fade in to semi-transparent */
}

/* Ensure the video covers the entire viewport */
#frontpageVideo {
    position: absolute; /* Absolute positioning for control */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    object-fit: cover; /* Maintain aspect ratio and fill the container */
    transform: translate(-50%, -50%); /* Perfect centering */
}

/* Keyframes for fade-in ending at 0.5 opacity */
@keyframes fade-in-to-half {
    0% {
        opacity: 0; /* Fully transparent */
    }
    100% {
        opacity: 0.5; /* Semi-transparent */
    }
}

/* Keyframes for fade-in (if used for other elements) */
@keyframes fade-in {
    0% {
        opacity: 0; /* Fully transparent */
    }
    100% {
        opacity: 1; /* Fully visible */
    }
}

/* =====================================================
   4. NAVIGATION SYSTEMS
   ===================================================== */

/* new header stuff */ /* Experimental / deferred header adjustments */


/* off-canvas menu */

div.slideout-overlay {
    left: 264px;
}

#generate-slideout-menu.main-navigation {
    background-color: transparent;
}

.slideout-navigation {
    height: auto;
    min-height: 100%;
    padding-top: 40px;
}

#generate-slideout-menu:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    height:  1300px;
}

.home #generate-slideout-menu:before {
    height:  1200px;
}

@media (max-width: 1010px) {
    .home #generate-slideout-menu:before {
    height:  1100px;
 }
}

.slideout-navigation .main-nav, .slideout-navigation .slideout-widget:not(:last-child) {
    margin-bottom: 5px !important;
}

.main-navigation.slideout-navigation .main-nav > ul > li > a {
    font-size: 1em;
    color: #cc0000;
}

.main-navigation.slideout-navigation .main-nav > ul > li > a:hover {
    color: #1e73be;
}

/* Sets height of area for smaller logo and hamburger menu */
@media (max-width: 1010px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 70px;
    }
    .menu-toggle, .main-navigation .mobile-bar-items a {
        line-height: 70px;
    }
}

    @media (max-width: 400px) {
  .navigation-branding .main-title, .mobile-header-navigation .site-logo  {
    margin-right: 5px !important;
    margin-left: 0px !important;
  }
}

@media (max-width: 400px) {
  .mobile-header-navigation .site-logo {
    flex-shrink: 1;
  }
}

@media (min-width: 768px) {
.main-navigation .site-logo img {
    height: 100px !important;
    width: auto;
 }
}

/* Move the off-canvas panel down */

.slideout-navigation .inside-navigation {
    margin-top: 0px;
}

/* ------------------------------
   PAGE FADE-IN CURTAIN (Earthstage)
   ------------------------------ */
body.page-template-front-page #earthstageIntroFade {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  animation: earthstageCurtainFadeOut 2.5s ease-out forwards;
}

@keyframes earthstageCurtainFadeOut {
  to { opacity: 0; }
}



/* =====================================================
   5. PAGE CONTEXT SYSTEMS (archive, search, taxonomy)
   ===================================================== */


/* -----------------------------------------------------
   BREADCRUMBS
   ----------------------------------------------------- */

/* --- breadcrumbs --- */
.breadcrumbs {
    font-size: 14px;
    margin-bottom:  1em;
    padding:  10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    white-space: wrap;
}

/* Tablets and up (≥ 768px) */
@media (min-width: 768px) {
    .breadcrumbs {
        bottom: 20px;
    }
}

.breadcrumbs a {
    color: #cc0000;
}

.breadcrumbs a:hover {
    color: #1e73be;
}

   /* -----------------------------------------------------
   HEADER BACKGROUNDS — FRACK / ARCHIVE / SEARCH / 404
   ----------------------------------------------------- */



/*.single-fracking_type .site-header,
.post-type-archive-fracking_type .site-header,
.archive .site-header,
.search .site-header,
.error404 .site-header,
.page-template-page-frack .site-header,
.single-post .site-header*/

.single-fracking_type .main-navigation,
.post-type-archive-fracking_type .main-navigation,
.archive .main-navigation,
.search .main-navigation,
.error404 .main-navigation,
.page-template-page-frack .main-navigation,
.single-post .main-navigation, .single-product .main-navigation, .page-template-page-about .main-navigation, .woocommerce-cart .main-navigation, .woocommerce-checkout .main-navigation, .page-template-page-collection .main-navigation, .page-id-24939 .main-navigation{
  background-image: url('/app/uploads/frack_files/hole6.jpeg'); 
  background-color: #cccccc;  
  /*height: 115px; */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: relative;
  background-size: cover;
}
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {

  body:not(.home):not(.page-template-page-biblio) .main-navigation {
    border-bottom: 1px solid #F60A53;
  }

}

@media (max-width: 768px) {
    .single-fracking_type #mobile-header, .archive #mobile-header, .search #mobile-header, .page-template-page-frack #mobile-header {
        background-image: url('/app/uploads/frack_files/hole6.jpeg'); 
      background-color: #cccccc;  
      height: 70px; 
      background-repeat: no-repeat;
      background-position: right center;
      background-attachment: relative;
      background-size: cover;
    }
}

.search-results .page-title {
    display:  none;
}


/* i need to wonder why this override is needed for archive and search results */
/*
.separate-containers .site-main  >  *:last-child {
    margin-bottom: 4em !important;
}
*/

.search .pagination,
.search .nav-links {
    display: none;
}


/* 404 */

.gp-404-heading {
    text-align: center;
    width: 100%;
    margin: 50px auto 25px;
    font-size: 1.8rem;
    line-height: 1.3;
}

/* Fullscreen 404 background */
.gp-404-wrapper {
    min-height: 100vh;    
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #e6edf3;
    background:
        radial-gradient(circle at center,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.7) 30%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        url('images/peabody-sherman.jpg') no-repeat center fixed;
    background-position: center center;
    background-size: cover;
    padding: 60px 20px;
    position:  relative;
}

body.error404 .gp-404-breadcrumbs {
    text-align: left;
    margin-bottom: 10px;
    color: #fff;
}

/* Top overlay (heading + search) */
.gp-404-top {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;

    text-align: center;
    z-index: 10;

    padding: 0 20px;
}

.gp-404-container {
    max-width: 600px;
}

.gp-404-container h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5em;
    color: #58a6ff;
}

.gp-404-container p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.gp-404-note {
    margin-top: 1em;
    font-size: 0.95rem;
    color: #c9d1d9;
}

.gp-404-note a {
    color: #FF0000;
}

.gp-404-note a:hover {
    color: #1D73BE;
}


.gp-404-footer {
    margin-top: 3em;
    font-size: 0.8rem;
    color: #8b949e;
    font-style: italic;
}

/* --------------------------------
   404: REMOVE GP VERTICAL GAPS
-------------------------------- */


/* fallback background so no white bleed */
body.error404 {
    background: #000;
}


/* --------------------------------
   404: REMOVE GP SITE-MAIN MARGIN
-------------------------------- */

body.error404.separate-containers .site-main {
    margin: 0;
}


/* -----------------------------------------------------
   PAGE-SPECIFIC OVERRIDES / EXPERIMENTS
   ----------------------------------------------------- */

.page-template-page-biblio  #main.site-main {
    margin-top: 0px !important;
}



/* Full-bleed layout for Biblio page only */
.page-template-page-biblio .site-content,
.page-template-page-biblio .content-area,
.page-template-page-biblio .site-main,
.page-template-page-biblio .grid-container,
.page-template-page-biblio .inside-article {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin:  0 !important;
}

.page-template-page-biblio iframe {
    display: block;
}

#audio-files {
    display: none;
}

/* Ensure viewport background stays black on Biblio */
.page-template-page-biblio html {
    background-color: #000;
}

.page-template-page-biblio body {
    background-color: #000;
}

.page-template-page-biblio .site-info {
    background-color: #000;
    color:  #ffffff;
}


.biblio-toolbar {
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 20px;

    pointer-events:none;   /* toolbar itself ignores clicks */
}

.biblio-toolbar a,
.biblio-toolbar button,
.biblio-toolbar nav {
    pointer-events:auto;   /* interactive items still clickable */
}

.gb-container-frackspinner {
    position:relative;
}

/* --------------------------------
   Biblio mobile logo controls
-------------------------------- */

@media (max-width: 768px) {

    .biblio-toolbar {
        position: absolute;
        top: 125px;
        left: 0;
        width: 100%;
        z-index: 1000;

        padding: 10px 14px;
    }

    .biblio-logo img {
        max-height: 120px;
        width: auto;
    }

}

.biblio-logo img {
        max-height: 120px;
        width: auto;
    }

/* Frackspinner experiment — suppress featured image on single page */
 .page-template-page-biblio .featured-image {
    display:  none !important;
}

/* frackspinner page */

.gb-container-frackspinner {
    position: relative;
    width: 100%;
    background-color: black;
    min-height: 300px;
}
/*
.page-template-page-biblio #infoframe {
  height: 100svh !important;
}
*/
@media (min-width: 500px) {
.page-template-page-biblio .gb-container-frackspinner {
    padding-top: 2rem;
    padding-bottom: 0em;
 }
}

@media (max-width: 499px) {
.page-template-page-biblio .gb-container-frackspinner {
    padding-top: 2rem;
    padding-bottom: 20em;
 }
}

#canvas {
    display: block;
    margin: 0 auto;
}

.spinner-canvas-stage {
  position: relative;
}

/* Wide-screen notice */
#dreamspinner-wide-notice {
  display: none;
  position: absolute;
  top: 140px;
  left: 12px;
  z-index: 10;
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.75);
  color: #eee;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 6px;
  pointer-events: none; /* spinner stays interactive */
}

/* Only show on ultra-wide screens */
@media (min-width: 1600px) {
  #dreamspinner-wide-notice {
    display: block;
  }
}


/* --------------------------------------------------
   Sound Button — fade-in from black
-------------------------------------------------- */


#soundButton {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;

    width: 68px;
    height: 68px;
    border-radius: 50%;

    /* 🚫 NOTHING paints initially */
    background: none;
    border: none;
    box-shadow: none;

    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease-in-out;

    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    z-index: 20;
}


/* 🔒 Kill glow + border BEFORE reveal */
#soundButton:not(.sound-visible) {
    box-shadow: none !important;
    background: none !important;
}

#soundButton.sound-visible {
    opacity: 1;
    visibility: visible;
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
    #soundButton {
        transition: none;
        opacity: 1;
    }
}


/* --------------------------------------------------
   Sound Button – Base
-------------------------------------------------- */

#soundButton {
    background: rgba(0, 0, 0, 0.45);
    box-shadow: none;
}

/* Icon base — DEFAULT = OFF */
#soundButton .sound-icon {
    width: 26px;
    height: 26px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0;
    transition: opacity 400ms ease-in-out;

    /* 🔇 DEFAULT ICON */
    background-image: url('/app/plugins/dreamspinner/assets/icon-sound-off.svg');
}


/* --------------------------------------------------
   🔇 OFF — attention glow (invitation, not action)
-------------------------------------------------- */

#soundButton.sound-off {
    opacity: 0.85;
    animation: soundInvitePulse 3.2s ease-in-out infinite;
}

/* --------------------------------------------------
   🔊 ON — strong confirmation glow
-------------------------------------------------- */

#soundButton.sound-on {
    opacity: 1;
    animation: none;

    background:
        radial-gradient(
            circle at center,
            rgba(253, 233, 74, 0.9) 0%,
            rgba(253, 233, 74, 0.55) 45%,
            rgba(0, 0, 0, 0.35) 70%
        );

    box-shadow:
        0 0 18px rgba(253, 233, 74, 0.9),
        0 0 42px rgba(253, 233, 74, 0.55),
        inset 0 0 6px rgba(255, 255, 255, 0.25);
}

#soundButton.sound-on .sound-icon {
    background-image: url('/app/plugins/dreamspinner/assets/icon-sound-on.svg');
}

#soundButton.sound-visible .sound-icon {
    opacity: 1;
}

/* --------------------------------------------------
   🔇 OFF — enhanced CTA invitation glow
-------------------------------------------------- */

/* --------------------------------------------------
   🔇 OFF — baseline CTA presence (always on)
-------------------------------------------------- */

#soundButton.sound-visible.sound-off {
    opacity: 0.95;

    /* Persistent warm halo */
    box-shadow:
        0 0 14px rgba(253, 233, 74, 0.35),
        0 0 32px rgba(253, 233, 74, 0.22);

    /* Slow breathing pulse layered on top */
    animation: soundInvitePulse 3.2s ease-in-out infinite;
}


/* --------------------------------------------------
   🔊 ON — confirmation glow (only when visible)
-------------------------------------------------- */

#soundButton.sound-visible.sound-on {
    opacity: 1;
    animation: none;

    background:
        radial-gradient(
            circle at center,
            rgba(253, 233, 74, 0.9) 0%,
            rgba(253, 233, 74, 0.55) 45%,
            rgba(0, 0, 0, 0.35) 70%
        );

    box-shadow:
        0 0 18px rgba(253, 233, 74, 0.9),
        0 0 42px rgba(253, 233, 74, 0.55),
        inset 0 0 6px rgba(255, 255, 255, 0.25);
}


/* --------------------------------------------------
   OFF pulse animation (neutral, slow)
-------------------------------------------------- */

@keyframes soundInvitePulse {
    0% {
        box-shadow:
            0 0 14px rgba(253, 233, 74, 0.35),
            0 0 32px rgba(253, 233, 74, 0.22);
    }

    45% {
        box-shadow:
            0 0 22px rgba(253, 233, 74, 0.55),
            0 0 54px rgba(253, 233, 74, 0.38);
    }

    70% {
        box-shadow:
            0 0 28px rgba(253, 233, 74, 0.7),
            0 0 72px rgba(253, 233, 74, 0.45);
    }

    100% {
        box-shadow:
            0 0 14px rgba(253, 233, 74, 0.35),
            0 0 32px rgba(253, 233, 74, 0.22);
    }
}



/* --------------------------------------------------
   Accessibility: reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #soundButton.sound-off {
        animation: none;
        box-shadow:
            0 0 8px rgba(253, 233, 74, 0.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    #soundButton {
        opacity: 1;
    }

    #soundButton:not(.sound-visible) {
        box-shadow: none !important;
        background: none !important;
    }
}




/* --------------------------------------------------
   Biblio iframe: responsive viewport
-------------------------------------------------- */

.page-template-page-biblio #infoframe {
    width: 100%;
    height: clamp(360px, 55vh, 720px);
/*height: 100vh;*/
    display: block;
    border: 0;
}

/* Portrait-mode rotate notice for Dreamspinner */


.rotate-notice {
  display: none;              /* hidden by default */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.4;
  color: #eee;
  padding: 1rem;
}

@media (max-width: 520px) {
  .rotate-notice {
    display: block;
  }
}

   /* -----------------------------------------------------
   PAGE HERO / HEADER CONTEXT
   ----------------------------------------------------- */

.page-hero .inside-page-hero h1 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.page-hero {
    padding-bottom:  0px;
}

   /* =====================================================
   ARCHIVE DATE GROUPING (year / month)
   ===================================================== */

/* Archive Year Header */
.archive-year-header {
    font-size: 3rem;
    color: #333;
    margin: 2rem .3rem 1rem .3rem;
    font-weight: bold;
    text-transform: uppercase;
    border-left: 5px solid #333;
    padding-left: 1em;
    border-radius: 20px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
}
/*
.term-background .archive-year-header { border-bottom-color: #B9D2E5; }
.term-companies .archive-year-header { border-bottom-color: #D0BFB6; }
.term-experts .archive-year-header { border-bottom-color: #F89932; }
.term-government .archive-year-header { border-bottom-color: #EBE8E7; }
.term-legal .archive-year-header { border-bottom-color: #B91D02; }
.term-opinion .archive-year-header { border-bottom-color: #151515; }
.term-press .archive-year-header { border-bottom-color: #ddfff9; }
*/

/* Archive Month Header */
.archive-month-header {
    font-size: 1.8rem;
    color: #555;
    margin-left: 1.5em;
    margin-bottom: 1rem;
    border-bottom: 2px dashed red;
    padding-bottom: 0;
    line-height: 1.2;
    max-width: 250px;
    text-transform: capitalize;
    text-align: right;
}

/* Year inside month header */
.archive-month-header .archive-month-year {
    font-size: 0.8rem;
    color: #999;
    margin-left: 0.5em;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .archive-year-header {
        font-size: 2.5rem;
        margin-left: 1.5rem;
    }

    .archive-month-header {
        font-size: 1.4rem;
        max-width: 180px;
    }
}

/* taxonomy header style */
/* -----------------------------------------------------
   TAXONOMY — AUTHOR HEADER
   ----------------------------------------------------- */

.taxonomy-card {
    display: flex;
    align-items: flex-start;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    background-color: #f9f9f9;
    flex-direction: row; /* Default: image on left, text on right */
}

.taxonomy-card-image {
    flex: 0 0 150px; /* Image takes up a fixed width */
    margin-right: 20px;
}

.tax-author-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.taxonomy-card-content {
    flex: 1;
}

@media (max-width: 768px) {
.page-title {
    margin: 0 0 10px;
    font-size: 24px;
    }
}

.taxonomy-description p {
    margin: 0;
    font-size: 16px;
    color: #000000;
}

.taxonomy-source-link {
    margin-top: 15px;
    text-align: right; /* Optional: Center-aligns the link for a balanced look */
}

.taxonomy-source-link a {
    font-size: 16px;
    color: #f01504;
    text-decoration: none;
    border-bottom: 1px dashed #0073aa;
    transition: color 0.3s, border-bottom-color 0.3s;
}

.taxonomy-source-link a:hover {
    color: #0073aa;
    border-bottom-color: #005177;
}


/* taxonomy header Mobile version */
@media (max-width: 768px) {
    .taxonomy-card {
        flex-direction: column; /* Stack the items vertically */
        align-items: center;
        text-align: center; /* Center-align the text for a more balanced look */
    }

    .taxonomy-card p {
        text-align: left; /* Center-align the text for a more balanced look */
        color:  #ffffff;
    }

    .taxonomy-card-image {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Add bottom margin for spacing */
        width: 100%; /* Make the image container full-width */
    }

    .tax-author-image {
        width: 100%; /* Make the image full-width */
        max-width: 400px; /* Optional: Limit the max-width for better visuals */
        height: auto;
    }
}

/* -----------------------------------------------------
   TAXONOMY — GENERAL ARCHIVE HEADER
   ----------------------------------------------------- */

/* General Taxonomy Header Styles */
.taxonomy-general-card {
    display: flex;
    align-items: flex-start;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    background-color: #f9f9f9;
    flex-direction: row; /* Image on the left, content on the right */
    margin-right: 10px;
}

.taxonomy-general-card-image {
    flex: 0 0 150px; /* Fixed width for the image container */
    margin-right: 20px;
}

.taxonomy-general-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.taxonomy-general-card-content {
    flex: 1;
}

.taxonomy-general-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 30px;
    line-height: 1.2;
    color: #333;
}

.taxonomy-general-description p {
    margin: 0;
    font-size: 16px;
    color: #000;
}



.taxonomy-general-link {
    margin-top: 15px;
    text-align: right;
}

.taxonomy-general-link a {
    font-size: 16px;
    color: #f01504;
    text-decoration: none;
    border-bottom: 1px dashed #0073aa;
    transition: color 0.3s, border-bottom-color 0.3s;
}

.taxonomy-general-link a:hover {
    color: #0073aa;
    border-bottom-color: #005177;
}

/* Mobile styles */
@media (max-width: 1200px) {
    .taxonomy-general-card {
        flex-direction: column;
        text-align: left;
        margin-left: 10px;
        margin-right: 20px;
    }

    .taxonomy-general-card-image {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        padding-right: 0;
        flex: none;
    }

    .taxonomy-general-link {
        text-align: left;
    }

    .taxonomy-general-image {
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .taxonomy-general-title {
        font-size: 24px;
        position: static;
        width: 100%;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .tax-archive-resonance .taxonomy-general-title {
        font-size: 24px;
        position: static;
        width: 100%;
        margin-top: 0;
        margin-bottom: 12px;
    }
}
/* -----------------------------------------------------
   Scroll link in taxonomy description
----------------------------------------------------- */

.taxonomy-general-description a[href="#resonance-research"] {
    color: #cc0000;
    text-decoration: none;
}

.taxonomy-general-description a[href="#resonance-research"]:hover {
    color: var(--accent);
    text-decoration: none;
}

/* -----------------------------------------------------
   RESONANCE FOOTER PANEL
   Uses existing taxonomy card styling
   ----------------------------------------------------- */

.resonance-footer-card {
    margin-top: 40px;
}

/* Optional: keep footer panel link left-aligned */
.resonance-footer-card .taxonomy-general-link {
    text-align: right;
}

/* -----------------------------------------------------
   ARCHIVE LISTING STYLES (alternating rows)
   ----------------------------------------------------- */

/* Display alternate shades in taxonomy and search results display */

.archive article:nth-of-type(even) .inside-article,
.search article:nth-of-type(even) .inside-article,
.author-search-results article:nth-of-type(even) .inside-article  {
    background-color: #f0f0f0 !important;
    padding-top: 1em;
    margin-bottom: 1em;
}

/* Remove extra top spacing on thumbnails in list views */
.archive .inside-article .post-image,
.search .inside-article .post-image,
.author-search-results .inside-article .post-image {
    margin-top: 0px !important;
}

@media (max-width: 768px) {

  /* -----------------------------------------------------
     ARCHIVE MOBILE THUMBNAILS
     Keep float on archive lists (override GP mobile reset)
     ----------------------------------------------------- */

  body.archive .inside-article .featured-image,
  body.archive .inside-article .post-image {
      float: left !important;          /* Override inherited float:none */
      width: 30%;
      max-width: 160px;
      margin: .5em 2em .5em .5em !important;
      padding-left: 0;
      text-align: left;
      display: block;
  }

  body.archive .inside-article .featured-image img,
  body.archive .inside-article .post-image img {
      width: 100%;
      height: auto;
      display: block;
  }

  /* Ensure text wraps beside floated image */
  body.archive .entry-summary,
  body.archive .entry-content {
      clear: none;
  }


  /* Contain float without breaking background shading */
  body.archive .inside-article::after {
      content: "";
      display: table;
      clear: both;
  }

}

/* -----------------------------------------------------
   SEARCH RESULTS STYLING
   ----------------------------------------------------- */

   /* search page */

@media (max-width: 768px) {

  body.search-results .search-result-image,
  body.archive .search-result-image {

      float: right !important;
      width: 30%;
      max-width: 160px;
      margin-left: 15px !important;
      margin-top: 0px !important;
      margin-bottom: 10px !important;

      background: radial-gradient(circle at 20% 20%, #ddd 50%, #aaa 100%);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

      position: relative;
      bottom: 10px;
  }

  body.search-results .search-result-image img,
  body.archive .search-result-image img {
      width: 100%;
      height: auto;
      display: block;
  }

}

.search-results-count  {
    padding:  0px 40px 5px 40px;
}

.search-result-image {
    float: right;
    margin-top: 10px !important;
    margin-bottom:  10px !important;
    margin-left:  2em;
    background: radial-gradient(circle at 20% 20%, #f3efe6 50%, #d8d2c5 100%);/* Add gradient background */
    /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
    
    position:  relative;
    bottom:  40px;
}

.search-result-image img {
    transform: rotate(5deg) scale(1);
    transition: 
        transform 0.5s ease,
        box-shadow 0.5s ease;
    display: block;

    background: radial-gradient(circle at 20% 20%, #ddd 50%, #aaa 100%);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

    

    will-change: transform;
}

@media (max-width: 768px) {
.search-result-image {
    float: right;
    margin-top: 0px !important;
    margin-bottom:  10px !important;
    margin-left:  2em;
    background: radial-gradient(circle at 20% 20%, #ddd 50%, #aaa 100%); /* Add gradient background */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
    transform: rotate(5deg); /* Slight rotation for a 3D effect */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Smooth transformations */
    position:  relative;
    bottom:  10px;
 }
}

.search-result-image img:hover{
    transform: rotate(0deg) scale(1.05); /* Straighten and slightly enlarge on hover */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */
}


/* Reduce top margin on archive and search result content */

/* Archive + search spacing adjustment */

.search .entry-summary:not(:first-child),
.archive .entry-summary:not(:first-child) {
    margin-top: 1em !important;
}

/* -----------------------------------------------------
   SEARCH FORM — LABELED INTERFACE
----------------------------------------------------- */

.search-page-search-form {
    margin: 1.5rem auto;
    max-width: 1000px;
    width: 100%;
}

/* Main form layout */

.search-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.2rem;

    background: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 0.75rem;
    align-items: center;
}

/* Box sizing */

.search-form *,
.search-form *::before,
.search-form *::after {
    box-sizing: border-box;
}


/* LABELS */

.search-form label {
    font-size: .55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #666;
    font-family: Helvetica;
}


/* Place labels on row 1 */

.search-form label[for="s"] {
    grid-column: 1;
}

.search-form label[for="about"] {
    grid-column: 2;
}

.search-form label[for="orderby"] {
    grid-column: 3;
}


/* CONTROLS */

.search-form input[type="search"] {
    grid-column: 1;
    grid-row: 2;
    padding: 0.5rem;
}

.search-form select#about {
    grid-column: 2;
    grid-row: 2;
}

.search-form select#orderby {
    grid-column: 3;
    grid-row: 2;
}


/* BUTTON */

.search-form .search-submit {
    grid-column: 4;
    grid-row: 2;

    background: #1e73be;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}


/* Inputs */

.search-form input,
.search-form select {
    font-size: .8rem;
    padding: 0.45rem 0.5rem;
}

/* mobile label row hidden by default */

.search-mobile-labels {
    display:none;
}

/* -----------------------------------------------------
   MOBILE — COMPACT SEARCH BAR
----------------------------------------------------- */

@media (max-width: 768px) {

    .search-page-search-form {
        max-width: 768px;
        margin: 0 auto;
        padding: 0 0.5rem;
    }

    .search-form {

        display:grid;
        grid-template-columns: 2fr 1fr 1fr;
        column-gap:.5rem;
    }

    /* hide labels on mobile */

    .search-form label {
        display: none;
    } 


    /* show mobile label row */

    .search-mobile-labels{

        display:grid;

        /* MATCH the form grid */

        grid-template-columns: 2fr 1fr 1fr;

        column-gap:.5rem;

        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
        font-size:.55rem;
        text-transform:uppercase;
        letter-spacing:.05em;
        opacity:.75;

        margin-bottom:.35rem;
    }

    /* reset previous grid forcing */

    .search-form input,
    .search-form select,
    .search-form button {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
    }

    /* keyword field wider */

    .search-form input[type="search"] {
        min-width: 0;
    }

    /* button full width */

    .search-form .search-submit{
        grid-column: 1 / -1 !important;
        width: 100%;
        margin-top: .35rem;
        max-width: none;
    }
}


/* -----------------------------------------------------
   Decorative bar
----------------------------------------------------- */

.search-form-container::after {
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    margin-top: .25rem;

    background: linear-gradient(
        90deg,
        #eb0a0a,
        #f7baba 20%,
        #EBF2FA
    );

    border-radius: 4px;
}

/* -----------------------------------------------------
   SEARCH MODULE — EDITORIAL ELEVATION
----------------------------------------------------- */

.search-form-container {
    margin: 1rem auto;
    padding: 1.25rem 1.25rem;
    max-width: 960px;

background: linear-gradient(
    180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(242,248,255,0.98) 35%,
    rgba(232,240,248,0.98) 100%
);

    border-radius: 16px;
    border: 1px solid rgba(255,60,60,0.25);
}


/* -----------------------------------------------------
   SEARCH TYPOGRAPHY REFINEMENT
----------------------------------------------------- */

/* Inputs and dropdowns — readable UI font */

.search-form input,
.search-form select,
.archive-control-form select  {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 4px;
    background: #ffffff;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

#search-context-title {
    margin-left: .5em;
}


@media (max-width: 768px) {
    #search-context-title  {
    font-size: 1.5em;
 }
}

/* Search button — slightly stronger command style */

.search-form .search-submit {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.search-form input:focus,
.search-form select:focus {
    outline: none;

    border-color: #2a5d84;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f8fd 40%,
        #f2f6fb 100%
    );

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.05),
        0 0 0 2px rgba(42,93,132,0.15);
}

.search-form input[type="search"]:focus {
    transform: translateY(-1px);
}

.search-form .search-submit {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
}

/* Dropdown typography tuning */

.search-form select {
    font-size: .75rem;
}


/* -----------------------------------------------------
   ARCHIVE CONTROL MODULE — COMPACT RESEARCH UI
----------------------------------------------------- */

.archive-control-container {

    margin: 1rem auto 1.5rem auto;
    padding: .65rem .85rem;
    max-width: 720px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.96) 0%,
        rgba(244,248,253,0.96) 100%
    );
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
}


/* --------------------------------
   Control layout
-------------------------------- */

.archive-control-form {

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.6rem;
    flex-wrap:nowrap;
    width: 100%;
}

/* --------------------------------
   Labels
-------------------------------- */

.archive-control-form label {

    font-size: .55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #666;
    font-family: Helvetica;
}

/* --------------------------------
   Dropdowns
-------------------------------- */

.archive-control-form select {

    font-size:.75rem;
    padding:.35rem .45rem;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --------------------------------
   Result count
-------------------------------- */

.archive-count {
    margin-left: auto;  /* THIS does the alignment magic */
    white-space: nowrap;
    font-size: .75rem;
    opacity: .7;

}

/* -----------------------------------------------------
   MOBILE — ALIGNED LABEL + INPUT GRID
----------------------------------------------------- */

@media (max-width:768px){

    .archive-control-container {
        max-width: 350px;
        padding: .75rem;
    }

    .archive-control-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .4rem .6rem;
        align-items: center;
    }

    /* 🔥 Force labels into SAME ROW */
    label[for="archive-topic"] {
        grid-column: 1;
        grid-row: 1;
    }

    label[for="archive-order"] {
        grid-column: 2;
        grid-row: 1;
    }

    /* 🔥 Force selects into SAME ROW */
    #archive-topic {
        grid-column: 1;
        grid-row: 2;
    }

    #archive-order {
        grid-column: 2;
        grid-row: 2;
    }

    /* Label styling */
    .archive-control-form label {
        font-size: .55rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #666;
        margin-bottom: .1rem;
    }

    /* Select styling */
    .archive-control-form select {
        width: 100%;
        font-size: .75rem;
        padding: .45rem;
    }

    /* RESET full row */
    #archive-reset {
        grid-column: 1 / span 2;
        grid-row: 3;
        width: 100%;
        text-align: center;
        font-size: .8rem;
        padding: .6rem;
        margin-top: .25rem;
    }

    /* Optional cleanup */
    .archive-count {
        display: none;
    }
}
/* --------------------------------
   RESET BUTTON — MATCH SEARCH COMMAND
-------------------------------- */

#archive-reset {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-weight: 400;
    
    
    font-size: .75rem;
    color: #222;
    padding: .35rem .55rem;

    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 4px;

    background: #ffffff;

    cursor: pointer;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);

    transition: all 0.15s ease;
}

/* Hover = subtle lift like inputs */

#archive-reset:hover {

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f8fd 40%,
        #f2f6fb 100%
    );

    border-color: #2a5d84;
}

/* Focus = match input focus behavior */

#archive-reset:focus {

    outline: none;

    border-color: #2a5d84;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.05),
        0 0 0 2px rgba(42,93,132,0.15);
}

/* =====================================================
   6. COMPONENT SYSTEMS
   ===================================================== */

/* WooCommerce */

/* Contribute page — force single centered product */
.post-type-archive-product ul.products li.product {
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto 2rem !important;
    float: none !important;
}

/* -----------------------------------------------------
   CONTRIBUTE PAGE CLEANUP
   ----------------------------------------------------- */

/* Hide sorting dropdown */
.post-type-archive-product .woocommerce-ordering {
    display: none !important;
}

/* Hide result count (optional but recommended) */
.post-type-archive-product .woocommerce-result-count {
    display: none !important;
}

/* Center WooCommerce archive (shop) title */
.post-type-archive-product .woocommerce-products-header__title {
    text-align: center;
}

/* Center the product list */
.post-type-archive-product ul.products {
    display: block !important;
    margin: 0 auto;
    padding: 0;
}

/* Center the single product */
.post-type-archive-product ul.products li.product {
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto 2rem !important;
    float: none !important;
}

/* Optional: make the card feel more like a feature panel */
.woocommerce ul.products.columns-1 li.product .woocommerce-loop-product__title {
    font-size: 2rem;
}

.woocommerce ul.products.columns-1 li.product img {
    width: 100%;
    height: auto;
}

/* Featured image caption on single product pages */
.woocommerce-product-image-caption {
    margin-top: 0px;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.85;
    text-align:  center;
}

/* Make single embedded product feel like a feature section */
.woocommerce div.product {
    max-width: 900px;
    margin: 2rem auto;
}

.woocommerce div.product .summary {
    text-align: left;
}


/* Disable hover zoom / drift on embedded Woo product blocks */

.wc-block-components-product-image img,
.wc-block-grid__product-image img {
    transform: none !important;
    transition: none !important;
}

/* Prevent hover interaction entirely */
.wc-block-components-product-image a,
.wc-block-grid__product-image a {
    pointer-events: none;
    cursor: default;
}

.wc-block-components-button__text {
        color: #ffffff;
}

.wc-block-cart__submit .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button__text:hover {
        color: red;
}



/* -----------------------------------------------------
   AUTHOR GRID
   ----------------------------------------------------- */

   /* frack page authors grid */

.frack-section-heading {
    font-size: 1.5rem;
    margin: 20px 20px 20px;
    text-align: right;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.8;
    font-family:  Helvetica;

}

.frackmix {
    font-style: italic;
    text-align: right;
    opacity: .7;
    margin-right: 1em;
}

.author-grid-wrapper {
    padding: 0rem 2rem;
}
.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .5rem;
}

/* Desktop view: 4 items per row */
@media (min-width: 1024px) {
    .author-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    }
}

/* Mobile view: 2 items per row */
@media (max-width: 768px) {
    .author-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    }
}

.author-item {
    text-align: center;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 5px;
}
.author-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}
.author-name {
    margin-top: .1rem;
    font-size: 1rem;
    font-weight: bold;
    font-family:  Helvetica;
}

@media (max-width: 768px) {
    .author-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------
   FRACK ARCHIVE ROWS (LIST VIEW WITH THUMBNAILS)
   -----------------------------------------------------
   Used on the /frack page for the randomized archive
   section ("From the Archive").

   Layout:
   - Flex-based row layout
   - Thumbnail on the left (fixed size)
   - Title + excerpt on the right (fluid)

   Design Goals:
   - Match search/archive result UX
   - High scanability (not card-based)
   - Provide visual contrast to author/figure grids
   - Keep density light while supporting 10+ items

   Mobile:
   - Stacks vertically
   - Thumbnail expands to full width

   Notes:
   - Uses featured image (post thumbnail)
   - Safe fallback: no image = no break
   - Intentionally minimal styling for reuse across sections
----------------------------------------------------- */

.frack-row-inner {
    display: flex;
    gap: 1rem;
    align-items: center;}

.frack-row-item:nth-child(odd) {
    background-color: #f7f7f7;
    border-bottom: 1px solid #F60A53;
}

.frack-row-item:nth-child(even) {
    background-color: #ffffff;
    border-bottom: 1px solid #F60A53;
}

.frack-row-thumb img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    background: white;
    padding: 1px;
    border-radius: 8px;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    position:  relative;
    left:  10px;
    margin: 0px;
}

.frack-row-content {
    flex: 1;
}

.frack-row-title {
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
    padding-top:  10px;
}

.frack-row-title a {
    color: #cc0000;
}

.frack-row-title a:hover {
    color: #1e73be;
}

.frack-row-excerpt p {
    font-size: .8rem;
}

.frack-row-meta {
    margin-top: 0.4rem;
    font-size: 0.65rem;
    opacity: 0.75;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.source-inline {
    margin: 0px 0px 10px 10px;
    font-style: italic;
}

.source-inline a:hover {
    color: #1e73be;
}

a.myreadmore-inline  {
    text-decoration: none;
    color: #cc0000 !important;
    font-style: italic;
    padding-bottom:  10px;
    padding-right:  10px;
}


a.myreadmore-inline:hover  {
    color: #1e73be !important;
}

.page-template-page-frack .inside-article {
    padding-top: 0;
    padding-bottom: 0;
}

.page-template-page-frack .entry-content {
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* Mobile view */

@media (max-width: 768px) {

    .frack-row-inner {
        display: flex;
        gap: 0.6rem;
        align-items: flex-start;
    }

    .frack-row-thumb {
        flex: 0 0 60px; /* fixed column width */
    }

    .frack-row-thumb img {
        width: 100%;
        height: 60px; /* controlled height */
        object-fit: cover;
        position:  relative;
        left:  10px;
        top:  13px;
        border-radius:  0px;
        padding: 0px;
        border-radius: 0px;
     }

    .frack-row-content {
        flex: 1;
    }

    .frack-row-title {
        font-size: 0.75rem;
        line-height: 1.25;
        margin-left:  10px;
    }

    .frack-row-excerpt {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-left:  10px;
    }

    .frack-row-excerpt p {
    font-size: .6rem;
    }

    .frack-row-meta {
        font-size: 0.55rem;
    }
}

/* --------------------------------
   MOBILE FRACK HEADER BLOCK
-------------------------------- */

.earthstage-frack-excerpt p {
    text-align:  left !important;
    font-size: .85em;
}

.earthstage-frack-title a {
    font-size:  1.3em;
    margin: 10px;
    font-weight:  100;
    color: #cc0000 !important;
}

.earthstage-frack-title a:hover {
    color: #1e73be !important;
}

.earthstage-mobile-frack-wrapper {
    padding: 0px 16px 20px 0px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 12px;
}


.earthstage-mobile-frack-wrapper .earthstage-frack-thumb {
  /*aspect-ratio: 3 / 2; /* 🔥 or 4/3, 3/2 — tune this */
  overflow: hidden;
  position: relative;
}


.earthstage-mobile-frack-wrapper .earthstage-frack-thumb a img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 275px;  /* ceiling */
  min-height: 140px;  /* floor */
  object-fit: cover; /* 🔥 key */

  background-color: #fff;
  border: 5px solid #000;

  filter:
    brightness(0.96)
    contrast(1.08)
    sepia(0.06)
    saturate(0.85)
    drop-shadow(0 0 4px rgba(0,0,0,0.5));

  /* 🎞️ Ragged SVG mask (CS-aligned, mobile-tuned) */
  -webkit-mask-image: url('/app/themes/eagp/images/ragged-mask.svg');
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;

  mask-image: url('/app/themes/eagp/images/ragged-mask.svg');
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}

/* Heading */
.mobile-frack-heading {
    text-transform: none;
    letter-spacing: 0.02em;
    font-style: italic;
}

h4.mobile-frack-heading  {
    margin-bottom: 0px !important;
}

/* Subheading */
.mobile-frack-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0 0 14px;
    opacity: 0.6;
}

/* Optional: subtle divider below intro */
.mobile-frack-sub::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-top: 10px;
    background: rgba(255,255,255,0.15);
}

/* Navigation base */

.main-navigation {
    background-color: transparent;
        z-index: 9999 !important;
    position: relative;}

/* Navigation text colors */

.main-navigation .menu-bar-items a,
.main-navigation .menu-toggle,
.home .main-navigation .main-nav,
.main-navigation .menu-bar-items {
    color: #ffffff;
    font-family:  Helvetica;
}

.main-navigation .menu-bar-items a:hover,
.main-navigation button.menu-toggle:hover {
    color: #f90202;
}


.main-navigation .headerh1title a {
    font-size:  1em;
 }


/* Large desktops down to 1440px */
@media (max-width: 1440px) {
    .main-navigation .headerh1title a {
        font-size: 0.9em;
    }
}

/* Tablets / small laptops */
@media (max-width: 1060px) {
    .main-navigation .headerh1title a {
        font-size: 0.75em;
    }

    .shopping-cart {
        display: none;
    }

    .main-navigation .menu-bar-item > a {
        padding-left: 0px;
    }
}  

/* small Tablets */
@media (max-width: 960px) {
    .main-navigation .headerh1title a {
        font-size: 0.6em;
    }
}

@media (max-width: 860px) {
    .main-navigation .headerh1title a {
        font-size: 0.5em;
    }
}

@media (max-width: 780px) {
    .main-navigation .headerh1title a {
        font-size: 0.4em;
    }
}


/* Mobile adjustments */

@media (max-width: 768px) {

    .main-navigation.has-branding .inside-navigation.grid-container {
        padding: 0;
    }

    .home .mobile-header-navigation.has-menu-bar-items .mobile-header-logo img {
        display: none;
    }

    .mobile-menu {
        padding-right: 10px;
    }
}


@media (max-width: 768px) {
.is-left-sidebar.sidebar {
    width: 95%;
    order: initial;
    margin-left:  auto;
    margin-right:  auto;
    margin-bottom: 5em;
 }
}

@media (min-width: 768px) {
.is-left-sidebar.sidebar .wp-block-heading {
    margin-left: .25em;
 }
}

@media (min-width: 768px) {
.is-left-sidebar.sidebar .inside-left-sidebar {
    margin-left: .5em;
    margin-bottom: 5em;
 }
}

.home .inside-article {
    background-color: transparent !important;
}

.is-left-sidebar {
    width: 20%;
}

/* --------------------------------
   SITE FOOTER WRAPPER (TRUE FULL WIDTH)
-------------------------------- */

.site-footer {
    background-color: #000000;
    margin-top: 25px;
    text-align: center;

    /* Break out of container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /*background-image: url('/app/uploads/frack_files/eafooterbg-reduced.jpg'); 

  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;*/
  border-top:  10px red;
}

.footer-widgets  {
    background-color: transparent !important;
}

.copyright-bar a, .footer-widgets a {
    color: #eb0a0a;
}

.copyright-bar a:hover, .footer-widgets a:hover {
    color: #1e73be;
}

/* --------------------------------
   EARTHSTAGE FOOTER
-------------------------------- */

.footer-widgets .wp-block-image img {
    background: none !important;
    padding: 0 !important;
}

/* readmore */

.read-more-container a, .read-more-container a:visited  {
    background-color: #0584fc; /* Change this to your desired background color */
    color: #F1C40F; /* Change this to your desired text color */
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-family: helvetica;
    text-transform: uppercase;
}

.read-more-container a:hover, .read-more-container a:active {
    background-color: #E2B607; /* Change this to your desired hover background color */
    color: #0584fc; /* Change this to your desired hover text color */
}

.read-more-container {
    text-align: right;
}

/* tom usborne button */

button.ghost, 
html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost, 
a.button.ghost:visited, 
a.wp-block-button__link.ghost:not(.has-background) {
    background: #0584fc;
    color: #F1C40F;
    border-color: inherit;
    border-radius: 5px;
}

button.ghost:hover, 
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover, 
a.wp-block-button__link.ghost:not(.has-background):hover {
    background: #E2B607;
    color: #0584fc; 
}

.button.sun-flower,
.button.sun-flower:visited {
    background: #0584fc;
    color: #F1C40F;
    border-radius: 5px;
    float: left;
    text-transform:  uppercase;
    font-weight:  800;
    font-family: Helvetica;
    margin:  5px;
}
.button.sun-flower:hover,
.button.sun-flower:active {
    background: #E2B607;
    color: #0584fc;  
}



/* =====================================================
   7. VISUAL / EXPERIMENTAL SYSTEMS
   ===================================================== */

   /* =====================================================
   FRONT GRID (home visual grid)
   ===================================================== */

/* front-grid */

/* Ensure the grid container is perfectly centered */
.front-grid-container {
    position: fixed; /* Fix the container relative to the viewport */
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(3, 100px); /* 3 columns of 100px each */
    grid-template-rows: repeat(3, 100px); /* 3 rows of 100px each */
    gap: 20px; /* Space between grid items */
    place-items: center; /* Center items within the grid container */
    width: max-content; /* Shrink container to fit content */
    height: max-content; /* Shrink container to fit content */
    top: 50%; /* Center the grid vertically */
    left: 50%; /* Center the grid horizontally */
    transform: translate(-50%, -50%); /* Offset by 50% to perfectly center */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Include padding and border in width/height */
    z-index: 1; /* Ensure the grid appears above the background */
}

/* Style individual grid items (default size) */
.front-grid-item img {
    width: 100px; /* Default image width */
    height: 100px; /* Default image height */
    object-fit: cover; /* Ensure image maintains aspect ratio */
    border-radius: 50%; /* Make images circular */
    display: block; /* Prevent inline-block spacing issues */
}

/* Ensure grid links feel clickable */
.front-grid-item a {
    cursor: pointer;
}


/* Responsive adjustments for large screens */
@media (min-width: 1200px) {
    .front-grid-container {
        grid-template-columns: repeat(3, 150px); /* Increase column size */
        grid-template-rows: repeat(3, 150px); /* Increase row size */
        gap: 40px; /* Increase spacing between items */
    }
    .front-grid-item img {
        width: 150px; /* Increase image width */
        height: 150px; /* Increase image height */
    }
}

/* Responsive adjustments for medium screens */
@media (max-width: 1199px) and (min-width: 768px) {
    .front-grid-container {
        grid-template-columns: repeat(3, 120px); /* Medium column size */
        grid-template-rows: repeat(3, 120px); /* Medium row size */
        gap: 20px; /* Keep moderate spacing between items */
    }
    .front-grid-item img {
        width: 120px; /* Medium image width */
        height: 120px; /* Medium image height */
    }
}

/* Responsive adjustments for small screens */
@media (max-width: 400px) {
    .front-grid-container {
        grid-template-columns: repeat(3, 80px); /* Smaller columns */
        grid-template-rows: repeat(3, 80px); /* Smaller rows */
        gap: 20px; /* Reduce spacing for small screens */
    }
    .front-grid-item img {
        width: 80px; /* Smaller image width */
        height: 80px; /* Smaller image height */
    }
    .image-label {
        font-size: 24px; /* Reduce label font size on small screens */
    }
}


/* Add rotation effect to the center image */
.front-grid-item:nth-child(5) img {
    animation: rotate-center 20s linear infinite; /* Slow continuous rotation */
    transition: transform 0.3s ease-in-out; /* Smooth transformation on hover */
}

/* Resize and invert the spinning image on hover */
.front-grid-item:nth-child(5) img:hover {
    transform: scale(1.3); /* Enlarge the image on hover */
    filter: invert(1); /* Invert colors for a striking effect */
}

/* Define keyframes for rotation */
@keyframes rotate-center {
    0% {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* Complete a full rotation */
    }
}

/* Style for all img children except the center image */
.front-grid-item:not(:nth-child(5)) img {
    background: radial-gradient(circle at 20% 20%, #ddd 50%, #aaa 100%); /* Add gradient background */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
    transform: rotate(5deg); /* Slight rotation for a 3D effect */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Smooth transformations */
}

/* Hover effect for non-center images */
.front-grid-item:not(:nth-child(5)) img:hover {
    transform: rotate(0deg) scale(1.05); /* Straighten and slightly enlarge on hover */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */
}

/* Style the labels under the images */
.image-label {
    text-align: center;
    margin-top: 10px;
    font-size: clamp(14px, 2.5vw, 25px);
    font-weight: bold;
    color: #EC090B;
    text-transform: capitalize;
    overflow-wrap: break-word;
    font-family: 'BigNoodleTitlingOblique', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    z-index: 2;
    bottom: calc(100% + 10px);
    background: rgba(0, 0, 0, 0.6);
    padding: 0px 8px;
    border-radius: 5px;
    line-height: 1.5;
    max-width: 80%;
    display: inline-block;
}

/* Safari-specific adjustment for max-width */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .image-label {
        max-width: 95% !important;
    }
}

/* Mobile-specific adjustments for labels */
@media (max-width: 767px) {
    .image-label {
        font-size: 14px;
        padding: 2px 5px;
        line-height: 1.2;
        max-width: 90%;
    }
}

/* Midsize screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .image-label {
        font-size: 20px;
        padding: 4px 8px;
        line-height: 1.3;
        max-width: 85%;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .image-label {
        font-size: 25px;
        padding: 5px 10px;
        line-height: 1.5;
        max-width: 80%;
    }
}

/* Hover effect for front grid labels */
.front-grid-item:hover .image-label {
    color: #ffffff;
    transition: color 0.3s ease;
    cursor: pointer;
}

/* front-page  */

.bottom-text {
    position: fixed; /* Change to fixed for viewport alignment */
    bottom: 45px; /* Position relative to the viewport */
    left: 65px; /* Ensure proper spacing from the left */
    z-index: 10; /* Keep it above other elements */
    width: auto; /* Prevent unnecessary stretching */
    box-sizing: border-box; /* Consistent box model */
}

.fracking-guide {
    font-family: 'BigNoodleTitlingOblique', 'Arial Narrow', Arial, sans-serif; /* Fallback font */
    font-size: 40px;
    line-height: 1.2; /* Consistent vertical spacing */
    letter-spacing: 1.7px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0; /* Remove any browser-specific margin */
    padding: 0;
    color: #ffffff;
    display: block; /* Ensure block-level consistency */
}

.earthstage {
    font-family: 'TrumpGothicEastBold', Arial, sans-serif; /* Fallback font */
    font-size: 95px;
    line-height: 1; /* Tight spacing to align with the bottom */
    text-transform: uppercase;
    margin: 0; /* Remove any browser-specific margin */
    padding: 0;
    color: #ec0b0b;
    display: block; /* Consistent block-level alignment */
}

@media (max-width: 768px) {
    .bottom-text {
        bottom: 20px; /* Adjust for smaller screens */
        left: 30px;
    }

    .fracking-guide {
        font-size: 27px;
    }

    .earthstage {
        font-size: 70px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .bottom-text {
        bottom: 10px;
        left: 20px;
    }

    .image-label{
        font-size: 14px;
        position: relative;
        bottom:  40px;
    }

    .fracking-guide {
        font-size: 20px;
    }

    .earthstage {
        font-size: 42px;
    }
}

/* Landscape devices with limited vertical space */
@media (orientation: landscape) and (max-height: 500px) {
    .front-grid-container {
        grid-template-columns: repeat(3, 80px);
        grid-template-rows: repeat(3, 80px);
        gap: 6px; /* small breathing room */
    }

    .front-grid-item img {
        width: 80px;
        height: 80px;
    }
}

/* video on posts */

.post-video-wrapper {
    margin-bottom: 2rem;
}

.post-video-wrapper video {
    border-radius: 6px;
    display: block;
}


/* =====================================================
   PALAU EDITION (front & archive variants)
   ===================================================== */

/* General Styles for Palau Edition */
.palau-edition {
    position: fixed;
    top: 10vh;
    left: 50%;
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    z-index: 10;
    opacity: 0;
    font-family: 'TrumpGothicEastBold', Arial, sans-serif;
    letter-spacing: 0.02em;
}

/* Link + inline logo/text layout */
.palau-edition a {
    color: #ffffff;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-flex;              /* Align logo + text */
    align-items: center;
    gap: 12px;
    justify-content: center;
    min-width: 520px; 
}

.palau-edition a:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #EC090B;
    cursor: pointer;
}

/* ---------------------------------------------
   Desktop fade + slide from left
   --------------------------------------------- */

@keyframes fade-in-left-desktop {
    from {
        opacity: 0;
        transform: translateX(-150%);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* Fade-in-left animation for front page */
.palau-edition.fade-in-left {
    will-change: transform, opacity;
    animation: fade-in-left-desktop
        5.5s
        cubic-bezier(0.2, 0.9, 0.35, 1)
        forwards;
}

/* ---------------------------------------------
   Mobile adjustments
   --------------------------------------------- */

@media (max-width: 767px) {

    .palau-edition {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);   /* true centering */
        font-size: 24px;
        padding: 6px 10px;
        letter-spacing: 0.02em;
        z-index: -1;
        text-align: center;
    }

    .palau-edition a {
        min-width: 0; 
        width: 90vw;
        max-width: 380px;
        justify-content: center;
    }

    /* ---------------------------------------------
       Mobile fade + slide from offscreen left
       (must end at translateX(-50%))
       --------------------------------------------- */

    @keyframes fade-in-left-mobile {
        from {
            opacity: 0;
            transform: translateX(-250vw); /* truly offscreen */
        }
        to {
            opacity: 1;
            transform: translateX(-50%);
        }
    }

    .palau-edition.fade-in-left {
        animation: fade-in-left-mobile
            5.5s
            cubic-bezier(0.390, 0.575, 0.565, 1.000)
            forwards;
    }
}

/* ---------------------------------------------
   Palau logo inline treatment
   --------------------------------------------- */

/* Logo sizing */
.palau-logo {
    height: 50px;                      /* Desktop default */
    width: auto;
    display: block;
}

/* Text wrapper (optional, but future-proof) */
.palau-text {
    line-height: 1;
}

/* Mobile logo sizing */
@media (max-width: 767px) {
    .palau-logo {
        height: 62px;
    }
}

@media (max-height: 873px) {
    .palau-edition,
    .under-grid-logo {
        display: none !important;
        animation: none !important;
    }
}



/* Term-specific background colors */
.term-background { --palau-bg: #B9D2E5; }
.term-companies  { --palau-bg: #D0BFB6; }
.term-experts    { --palau-bg: #F89932; }
.term-government { --palau-bg: #EBE8E7; }
.term-legal      { --palau-bg: #B91D02; }
.term-opinion    { --palau-bg: #151515; }
.term-press      { --palau-bg: #ddfff9; }

.archive .palau-edition a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.archive .palau-edition a:hover {
    color: #EC090B;
}

@media (max-width: 767px) {
    .archive .palau-edition {
        font-size: 26px;
        margin-top: 8px;
    }
}


/* ---------------------------------------------
   Fracking Guide link styling
   --------------------------------------------- */

.fracking-guide a {
    color: inherit;              /* keep current color */
    text-decoration: none;       /* no underline */
    cursor: pointer;
    transition: color 0.25s ease;
}

.fracking-guide a:hover {
    color: #ec0b0b;
}


/* ---------------------------------------------
   Logo beneath front grid (mobile first)
   --------------------------------------------- */

.under-grid-logo {
    position: fixed;
    top: calc(50% + 200px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0;                      /* start hidden */
}

/* Fade-in only (once) */
@keyframes logo-fade-in {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

/* Counter-clockwise rotation (continuous) */
@keyframes rotate-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@media (max-width: 1023px) {

    .under-grid-logo {
        animation: logo-fade-in 1.2s ease-out forwards;
        animation-delay: 4.8s;       /* sync to Palau slide-in */
    }

    .under-grid-logo img {
        width: 120px;                 /* adjust bigger if you want */
        height: auto;
        animation: rotate-counter 40s linear infinite;
        will-change: transform;
    }
}

@media (max-width: 400px) {
    .under-grid-logo {
    position: fixed;
    top: calc(50% + 135px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0;  
 }

     .under-grid-logo img {
        width: 75px;                 /* adjust bigger if you want */
        height: auto;
        animation: rotate-counter 40s linear infinite;
        will-change: transform;
    }

}

.under-grid-logo a,
.under-grid-logo img {
    cursor: pointer;
}

.under-grid-logo img {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.under-grid-logo a:hover img {
   transform: scale(1.3); /* Enlarge the image on hover */
    filter: invert(1); /* Invert colors for a striking effect */
}


@media (min-width: 1024px) {

    .under-grid-logo {
        position: fixed;
        top: calc(50% + 305px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        opacity: 0; /* start hidden */
        animation: logo-fade-in 3.2s ease-out forwards;
        animation-delay: 2.6s; /* match Palau desktop fly-in */
    }

    .under-grid-logo img {
        width: 100px;
        height: auto;
        animation: rotate-counter 40s linear infinite;
        will-change: transform;
    }
}