/*-----------------------------------------
 Theme Name:   TheBlocks Child
 Theme URI:    https://swingleftpeninsula.org/the-blocks-child
 Description:  Child theme for TheBlocks - adds custom CSS & shortcodes.
 Author:       Bruce K
 Author URI:   https://swingleftpeninsula.org
 Template:     the-blocks
 Version:      1.0

     --slp-color-accent: var(--e-global-color-primary, #ff5c66);

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

/* Global token – put this near the top of your main stylesheet */
:root {

 /* Swing Left National's logo colors */
    --sl_logo-blue: #00c4ff;  /* The red in Swing Left's logo */
    --sl_logo-red: #ff5c66;   /* The blue in Swing Left's logo */

/* Swing Left National's brand colors: https://swingleft.org/p/brand */
   
    --sl-brand-light-blue: #00c4ff;
    --sl-brand-dark-blue: #0a2852;
    --sl-brand-red: #ff5c66;
    --sl-brand-white: #fbfdfb;
    --sl-brand-purple: #5e3d82;
    --sl-brand-yellow: #ffff28;

/* SLP Colors */
    --slp-color-primary: var(--sl-brand-light-blue);
    --slp-color-secondary: var(--sl-brand-dark-blue);
    
/* Light and dark backgrounds are synonyms for primary and secondary colors */
    --slp-color-light-background: var(--slp-color-primary);
    --slp-color-dark-background: var(--slp-color-secondary);
    
    --slp-color-accent: var(--sl-brand-red);
    --slp-color-text-light: var(--sl-brand-white);
    --slp-color-text-dark: var(--sl-brand-dark-blue);

    --slp-color-btn-dark-bg: var(--slp-color-secondary);
    --slp-color-btn-dark-text: var(--slp-color-text-light);
    --slp-color-btn-dark-border: var(--sl-brand-white);
    
    --slp-color-btn-light-bg: var(--slp-color-primary);
    --slp-color-btn-light-text: var(--slp-color-text-dark);
    --slp-color-btn-light-border: var(--sl-brand-white);

   /* Root variables – Bitter & Open Sans fonts. */

    /* Primary sans‑serif – used for body text, UI, most headings */
    --font-sans: 
        "Open Sans",               /* your chosen web‑font */
        system-ui,                 /* OS UI fallback */
        -apple-system,             /* Safari/macOS */
        "Segoe UI",                /* Windows */
        Roboto,                    /* Android/Chrome */
        "Helvetica Neue", Arial, sans-serif;

    /* Secondary serif – great for article copy, blockquotes, etc. */
    --font-serif: 
        "Bitter",                  /* your chosen serif */
        Georgia, Times, "Times New Roman", serif;

    /* Monospace – unchanged (you can keep whatever you like) */
    --font-mono: 
        "JetBrains Mono",          /* optional */
        Menlo, Monaco, Consolas, "Courier New", monospace;

    /* Optional brand/accent font – keep or replace as needed */
    --font-brand: "Playfair Display", serif;

  /*   min   preferred   max   (all in rem)  - Not used*/
    --btn-font-size: clamp(1.0rem, 1.2vw + 0.5rem, 1.125rem);
    /* 1.0 rem ≈ 16 px   → smallest you’ll ever see
       1.125 rem ≈ 18 px   → biggest you’ll ever see
       1.2vw + 0.5rem    → fluid middle that reacts to viewport width */
    --btn-v-padding: calc(var(--btn-font-size) * 0.6); /* ~60 % of the font size */

  
}




/* This html font size is the basis for all the rem sizes */
html { 
    font-size: 62.5%; /* 1rem = 10px */
}

/* Tablets */
@media (min-width: 768px) {
  html {
    font-size: 68.75%; /* ~11px base */
  }
}

/* Desktops */
@media (min-width: 992px) {
  html {
    font-size: 75%; /* 12px base */
  }
}


/* -------------------------------------------------
   Example usage (you probably already have these)
   ------------------------------------------------- */
body {
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--slp-color-secondary);
}


/* Headings and text using rem units */
h1 {
  font-size: 2.5rem; /* ~35px on mobile */
  font-weight: bold;
}

h2 {
  font-size: 2rem; /* ~28px */
}

h3 {
  font-size: 1.5rem; /* ~21px */
}

p {
    font-size: 1.2rem; /* ~12px */
    line-height: 1.5;              /* line spacing */
    color: var(--sl-dark-blue, #0a2852);
    margin-bottom: 0.75rem;        /* gap after each paragraph */
}

/* Headings */
h1 {
    font-size: 2rem;
    line-height: 1.3;              /* tighter line spacing for headings */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--sl-dark-blue, #0a2852);
 }

h2, h3 {
    line-height: 1.3;              /* tighter line spacing for headings */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--sl-dark-blue, #0a2852);
 }
 


  .link_tree_from_text-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin: 1rem 0;
  }

   .link_tree_from_text-btn {
    display: block;
    padding: 1rem;
    font-family: var(--font-sans);
    font-size: var(--btn-font-size);  
    line-height: 1.4;                 
    font-weight: 600;
    text-align: center;
    background-color: var(--slp-color-btn-dark-bg);
    /* The buttons have a bit of gradient for visual appeal */
    background-image: radial-gradient(circle, #000077, var(--slp-color-btn-dark-bg));
    color: var(--slp-color-btn-dark-text);
    border: 2px solid var(--slp-color-btn-light-border);
    border-radius: 2.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;  
}

/********** Link Tree button styles ************/
.link_tree_from_text-btn:hover {
  background-color: var(--sl-brand-light-blue); /* Hover effect */
}

.link_tree_from_text-btn:focus {
  background-color: #008eff; /* Active state */
}

/* Clicked (active) state */
.link_tree_from_text-btn:active {
 filter: saturate(30%); /* 30% saturation to dim the buttonn */
}


/* Tablets (≥768px) */
@media (min-width: 768px) {
.link_tree_from_text-btn {
/*    width: 50%; */
    font-size: 1.1em;
    padding: 1.2em;
/*    background-color: #f000ff; */
  }
}

/* Desktops (≥992px) */
@media (min-width: 992px) {
.link_tree_from_text-btn {
    /* width: 30%; */
    font-size: 1.2em;
    padding: 1.2em 2em;
/*    background-color: #008eff; */
  }
}
 
/* -------------------------------------------------
   Box version of the link‑tree button

   This css shows how to change sizes, etc depending on the scrren size
   (the @media blocks). We can use it for our buttons.
   ------------------------------------------------- */


.link_tree_from_text-box {
  display: block;  /* Not sure what this means */
  padding: 0.8rem;
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);  
  line-height: 1.2;             
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  
  background-color: var(--slp-color-btn-dark-bg); 
  color: var(--sl-brand-white);
  border: 0.1rem solid var(--sl-brand-white);
  border-radius: 0.1rem;
  cursor: pointer;
  
  transition: background-color 0.3s ease;
  
  /* Mobile-friendly defaults */
 /*
  width: 80%;
  padding: 1em;
  font-size: 1em;
  display: block;
  margin: 10px auto; */
}


.xlink_tree_from_text-box:hover {
  background-color: var(--sl-brand-light-blue);
}

.xlink_tree_from_text-box:focus {
  background-color: #008eff;
}


.xlink_tree_from_text-box:active {
 filter: saturate(50%);
}
*/


/* Tablets (≥768px) */
@media (min-width: 768px) {
.link_tree_from_text-box {
/*    width: 50%; */
    font-size: 1.1em;
    padding: 1.2em;
/*    background-color: #f000ff; */
  }
}

/* Desktops (≥992px) */
@media (min-width: 992px) {
.link_tree_from_text-box {
    /* width: 30%; */
    font-size: 1.2em;
    padding: 1.2em 2em;
/*    background-color: #008eff; */
  }
}

   /* -------------------------------------------------
   Separator line used by the link‑list shortcode
   ------------------------------------------------- */

.link_tree_from_text-sep {
  display: block;
  border: none;
  border-top: 0.2rem solid var(--slp-color-accent);
  width: 60%;
  max-width: 60rem;            /* ensure no space: 6rem */
  margin: 0.5rem auto;        /* center in normal block layout */
  box-sizing: border-box;
}

/* Ensure centering inside Elementor flex containers */
.elementor-widget-shortcode .link_tree_from_text-sep,
.elementor-column .link_tree_from_text-sep,
.elementor-widget-container .link_tree_from_text-sep {
  align-self: center;          /* flex-safe centering */
  margin-left: auto;
  margin-right: auto;
}