/*
    Theme Name: Astra Child (Masculinity Trap)
    Theme URI: https://example.com/my-child-theme/
    Description: A child theme for Twenty Twenty-Four.
    Author: EA Brothers & April Branson
    Author URI: https://example.com/your-name/
    Template: astra
    Version: 1.0.0
    Text Domain: astra-child
*/

/* Note: The CSS files are loaded from assets/css/ folder. */
/* ---------- Theme ---------- */
:root{
    --bg:#0f1216;
    --panel:#eef2f5;
    --panel-soft:#f4f6f8;
    --ink:#13161a;
    --ink-muted:#5c6a78;
    --brand:#c8c5ff;
    --gold:#f3c300;
    --gold-600:#d7ad00;
    --ring:rgba(243,195,0,.25);
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.18);
  
    /* one knob to control where anchor links land under the sticky header */
    --anchor-offset: 120px;
  }
  
  /* ---------- Base / sizing ---------- */
  html{
    box-sizing:border-box;
    font-size:16px;
    scroll-behavior: smooth;
    height:100%;
  }
  *,*::before,*::after{ box-sizing:inherit; }
  
  body{
    margin:0;
    color:var(--ink);
    background: var(--panel-soft);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height:1.55;
  
    /* ensure footer hugs bottom */
    min-height:100%;
    display:flex;
    flex-direction:column;
  }
  
  a{ color:inherit; text-decoration:none; }
  a:focus-visible,button:focus-visible{
    outline:3px solid var(--ring); outline-offset:2px;
  }
  
  /* Make anchor jumps land below the sticky header */
  .content > section{ scroll-margin-top: var(--anchor-offset); }
  
  /* ---------- Header / Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
  }
  .site-title{
    margin:0; padding:20px 24px 6px;
    font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.5rem);
    color:#fff;
    font-weight:900; letter-spacing:.5px;
  }
  .site-title a{ color:#fff !important; text-decoration:none; }
  
  .site-title {
    text-shadow:
      -1px -1px 0 var(--gold),
       1px -1px 0 var(--gold),
      -1px  1px 0 var(--gold),
       1px  1px 0 var(--gold),
       0 0 6px var(--gold);
  }

  nav{
    display:flex; 
    gap:clamp(18px, 2.2vw, 32px);
    padding:8px 24px 18px; align-items:center;
  }
  
  nav a{
    color:var(--gold); 
    font-weight:800;
    font-size:clamp(1rem,.95rem + .3vw,1.4rem);
    position:relative; padding-bottom:4px;
  }
  
  nav a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px;
    height:4px; background:var(--gold); border-radius:999px;
  }
  
  /* ---------- Page shell ---------- */
#content {
    max-width:1100px;
	 padding:clamp(16px,2vw,28px);
}
  .content{
	 max-width:1100px;
	 padding:clamp(16px,2vw,28px);
  }

  .panel{
    background:#fff;
    border-radius:var(--radius);
    padding:clamp(16px,3vw,36px);
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  }
  .hero{ text-align:center; margin-top:clamp(16px,2vw,24px); }
  .hero-title{
    margin:0 0 .25em; font-weight:900; letter-spacing:.5px;
    line-height:1.1;
    font-size: clamp(40px, 5vw, 64px);
  }
  .lead{ color:var(--ink-muted); font-size:clamp(1rem,.95rem + .6vw,1.25rem); margin:0; }
  
  /* ---------- “Card” styling for About sections ---------- */
  .content > section.about{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(18px,2vw,28px);
    margin:28px auto;
  }
  
  /* ---------- Home cards ---------- */
  .cards-wrap{ margin-top: clamp(20px,3vw,36px); }
  .cards{
    display:grid; 
	grid-template-columns:repeat(3,1fr);
	grid-column-gap:clamp(16px,2vw,24px);
	
  }
  @media (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px){ .cards{ grid-template-columns:1fr; } }
  
  .card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(18px, 2vw, 28px);
    border: 2px solid var(--gold);
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* ensures balanced top/bottom layout */
  }
  
  .card h4 {
    margin: 0 0 .5em;
    font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  }
  
  .card p {
    margin: .25em 0;
    color: var(--ink-muted);
  }
  
  .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .card-actions {
    margin-top: 1.4em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block; padding:.7em 1.1em; border-radius:12px;
    font-weight:800; text-align:center; user-select:none; cursor:pointer;
    transition:transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .btn-outline{
    color:var(--gold); border:2px solid var(--gold); background:transparent;
  }
  .btn-outline:hover{
    background:var(--gold); color:#111; box-shadow:0 6px 22px var(--ring); transform:translateY(-1px);
  }

  /* Match "Back to top" animation style for card buttons */
  .card-actions .btn-outline {
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .card-actions .btn-outline:hover {
    background: var(--gold);
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--ring);
  }

  /* Match "Back to top" animation style for card buttons (hover + focus) */
  .card-actions .btn-outline {
    transition: 
      transform 0.12s ease,
      box-shadow 0.15s ease,
      background 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease;
  }
  .card-actions .btn-outline:hover,
  .card-actions .btn-outline:focus-visible {
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--ring);
  }

  /* --- Tactile press effect for card buttons --- */
  .card-actions .btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px var(--ring);
    transition-duration: 60ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .card-actions .btn-outline,
    .card-actions .btn-outline:hover,
    .card-actions .btn-outline:active {
      transform: none !important;
      transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
  }

  .btn-solid{
    color:#111; background:var(--gold); border:2px solid var(--gold);
  }
  .btn-solid:hover{
    background:var(--gold-600); border-color:var(--gold-600); transform:translateY(-1px);
  }
  
  /* ---------- Utility ---------- */
  .visually-hidden{
    position:absolute!important; height:1px;width:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
  }
  
  /* Inline button (mobile) – centered below content */
  .backtop-inline-wrap {
    display:flex;
    justify-content:center;
    margin-top: 18px;
  }
  .backtop-inline { display:inline-flex; }
  
  /* Floating button (tablet/desktop) – bottom-middle */
  .btn-backtop{
    position: fixed;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  
    background: var(--gold);
    color: #111;
    font-weight: 800;
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: .7em 1.4em;
    box-shadow: 0 6px 22px rgba(0,0,0,.25);
    cursor: pointer;
  
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .15s ease,
                box-shadow .2s ease, background .15s ease, border-color .15s ease;
  }
  .btn-backtop:hover{
    background: var(--gold-600);
    border-color: var(--gold-600);
  	transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
  
  @media (max-width: 699.98px){
    .btn-backtop{ display:none; }
  }
  @media (min-width: 700px){
    .backtop-inline{ display:none; }
    .btn-backtop.show{
      opacity: 1;
      pointer-events: auto;
    }
  }

 /* ---- search bar in header ---- */
    header {
      position: relative; /* anchor for absolute search box on wide screens */
    }

   div.header-search {
      position: absolute;
      right: 30px;   /* little breathing room from right edge */
      bottom: 12px;  /* lines up with nav baseline on desktop */
    }

    div.header-search input {
      padding: 10px 16px;
      font-size: 1rem;
      border-radius: 12px;
      border: 2px solid var(--gold);
      background: #fff;
      width: 340px;

      /*GOLD GLOW */
      box-shadow:
        0 0 6px rgba(255, 215, 0, 0.45),
        0 0 14px rgba(255, 215, 0, 0.35),
        0 0 22px rgba(255, 215, 0, 0.25);
    }

    /* --------- Responsive behavior for smaller screens --------- */
    @media (max-width: 1100px) {
      div.header-search {
        position: static;          /* no longer absolutely positioned */
        margin: 14px auto 0;       /* small gap under nav, centered */
        padding: 0 16px 10px;      /* breathing room from edges, no extra black bar */
        max-width: 560px;
      }

      div.header-search input {
        width: 100%;               /* full width inside padding */
        display: block;
      }
    }

.toc-title{
    text-align:center; margin: 20px 0 10px;
    font-size:clamp(1.15rem,1rem + .9vw,1.6rem);
    font-weight:900;
  }
 .toc-links{
    display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,16px);
    justify-content:center; margin:18px 0 8px;
  }
  .toc-links a{
    color:var(--gold); font-weight:900; background:#fff;
    border:3px solid var(--gold); border-radius:18px;
    padding:.6em 1.1em; box-shadow:var(--shadow);
    transition:all .18s ease;
  }
 .toc-links a:hover{ background:var(--gold); color:#111; }