/*
 Theme Name: EcoSocialist (TT3 Child)
 Template: twentytwentythree
 Version: 1.0.0
*/

/* =========================================================
   HEADER — MOBILE (≤782px)
   ========================================================= */
@media (max-width: 782px) {

  /* HEADER: layout & spacing */
  .header-main {
    display: flex;
    flex-direction: column;     /* stack rows */
    align-items: center;        /* center everything by default */
    gap: 1rem;                  /* space between blocks */
    padding: .75rem 1rem;       /* breathing room inside header */
  }

  /* Logo: hug the left edge slightly */
  .header-main .wp-block-site-logo {
    align-self: flex-start;     /* push logo to left */
    margin-left: .25rem;        /* tiny left offset */
    margin-bottom: .25rem;
  }

  /* Title: centered on its own line, a bit larger on mobile */
  .header-main .wp-block-site-title {
    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: 92%;
    font-size: 1.6rem;          /* ↑ mobile title size */
    line-height: 1.2;
    font-weight: 700;
  }

  /* Tagline: keep hidden on mobile if present */
  header .wp-block-site-tagline { display: none !important; }

  /* Navigation (hamburger trigger + items) centered */
  .header-main .wp-block-navigation,
  .header-main .wp-block-navigation__container {
    align-items: center;
    justify-content: center;
  }
  .header-main .wp-block-navigation__responsive-container-open {
    margin: .25rem 0;
  }

  /* Protest button (centered pill) */
  .protest-cta { text-align: center; width: 100%; }
  .protest-cta .wp-element-button {
    display: inline-block;
    padding: .6rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    margin-top: .25rem;
  }

  /* Search button (icon-only recommended) */
  .search-cta { text-align: center; width: 100%; }
  .search-cta .wp-element-button {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: .6rem;
    margin-top: .25rem;
    /* if your button still has “Search” text, hide it on mobile: */
    text-indent: -9999px; 
    overflow: hidden;
  }
  .search-cta .wp-element-button::before {
    content: "🔍";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem;
    text-indent: 0;
  }
}

/* =========================================================
   HEADER — DESKTOP TOUCH-UPS (≥783px)
   Keep this light; mobile is our main change
   ========================================================= */
@media (min-width: 783px) {

  /* Keep your main row breathing on desktop too */
  .header-main { gap: 1rem; }

  /* Logo ↔ title gap (desktop) */
  header .wp-block-site-logo { margin-right: .6rem; }

  /* Tagline spacing on desktop (visible there) */
  header .wp-block-site-tagline { margin-top: .3rem; }
}

/* =========================================================
   OPTIONAL — UTILS (safe to keep)
   ========================================================= */

/* Makes sure buttons keep their nice pill shape if themes override */
.protest-cta .wp-element-button,
.search-cta .wp-element-button { border: none; }

/*
 Theme Name: EcoSocialist (TT3 Child)
 Template: twentytwentythree
 Version: 1.0.0
*/

/* =========================================================
   HEADER — MOBILE (≤782px) : precise control with stack classes
   ========================================================= */
@media (max-width: 782px) {

  /* Main row: vertical flow + global spacing */
  .header-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: .75rem 1rem !important;
  }

  /* ----- Branding (logo + title + tagline) ----- */
  .header-main .branding-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;   /* let children set their own alignment */
    gap: .4rem !important;
  }

  /* Logo left, slight inset from edge */
  .branding-stack .wp-block-site-logo {
    align-self: flex-start !important;
    margin-left: .25rem !important;
  }

  /* Title centered and a bit larger */
  .branding-stack .wp-block-site-title {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 92% !important;
    font-size: 1.7rem !important;   /* bump size per your request */
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  /* Hide tagline on mobile */
  header .wp-block-site-tagline { display: none !important; }

  /* ----- Nav / buttons stack ----- */
  .header-main .nav-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* center all children */
    gap: .5rem !important;
  }

  /* Center the hamburger trigger */
  .nav-stack .wp-block-navigation__responsive-container-open {
    display: block !important;
    margin: .25rem auto !important;
  }

  /* Protest button */
  .protest-cta { text-align: center !important; }
  .protest-cta .wp-element-button {
    display: inline-block !important;
    padding: .6rem 1.15rem !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    border: none !important;
  }

  /* Search icon-only button */
  .search-cta { text-align: center !important; }
  .search-cta .wp-element-button {
    position: relative !important;
    display: inline-block !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    border-radius: .6rem !important;
    border: none !important;
    text-indent: -9999px !important; 
    overflow: hidden !important;
  }
  .search-cta .wp-element-button::before {
    content: "🔍";
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem;
    text-indent: 0;
  }
}

/* --- Mobile: branding left + larger title --- */
@media (max-width: 782px){
  /* Branding stack = the Stack that holds logo + title (+ tagline) */
  .branding-stack{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;   /* <-- left-align the stack */
    gap:.4rem !important;
    padding-left:.25rem;                  /* tiny inset from edge */
  }

  /* Logo stays near the edge */
  .branding-stack .wp-block-site-logo{
    margin:0 0 .2rem 0 !important;
  }

  /* Title larger + left */
  .branding-stack .wp-block-site-title{
    font-size:1.9rem !important;         /* bump size */
    line-height:1.2 !important;
    font-weight:700 !important;
    text-align:left !important;
    margin:0 !important;
    max-width:95% !important;
  }
}

/* --- Search overlay defaults --- */
.search-overlay {
  display: none;              /* hidden by default */
  position: fixed; inset: 0;
  z-index: 9999;
}

/* Show overlay only when it's the target of #site-search */
.search-overlay:target {
  display: block;
}