/* 
<input type="checkbox" id="sh-toggle" class="stateInput">
<label for="sh-toggle" class="trigger">Toggle Visibility</label>

<div class="target">
  This content appears and disappears.
</div> 
*/

/* Functional CSS */
.stateInput {
    display: none;
}

/* Hide the actual checkbox */
.target {
    display: none;
}

/* Hide content by default */

/* Logic */
.stateInput:checked~.target {
    display: block;
}



/* <div class="s">
  <input type="radio" name="tabs" id="tab1" class="stateInput" checked>
  <input type="radio" name="tabs" id="tab2" class="stateInput">
  <input type="radio" name="tabs" id="tab3" class="stateInput">

  <div class="-nav">
    <label for="tab1">Tab One</label>
    <label for="tab2">Tab Two</label>
    <label for="tab3">Tab Three</label>
  </div>

  <div id="content1" class="-panel">Content One</div>
  <div id="content2" class="-panel">Content Two</div>
  <div id="content3" class="-panel">Content Three</div>
</div> */


/* Functional CSS */
.stateInput {
    display: none;
}

.tab-panel {
    display: none;
}

/* Logic: ID matching required for generic sibling targeting */
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
    display: block;
}




/* <input type="checkbox" id="switch-toggle" class="stateInput">
<label for="switch-toggle" class="trigger">
  <span class="text-off">Status: OFF (Click to Turn On)</span>
  <span class="text-on">Status: ON (Click to Turn Off)</span>
</label> */


/* Functional CSS */
.stateInput {
    display: none;
}

.text-on {
    display: none;
}

/* Hide 'ON' text by default */

/* Logic */
.stateInput:checked+.trigger .text-off {
    display: none;
}

.stateInput:checked+.trigger .text-on {
    display: inline;
}






/* 
<div class="accordion">
  <div class="acc-item">
    <input type="radio" name="acc" id="acc1" class="stateInput">
    <label for="acc1" class="trigger">Section 1 Title</label>
    <div class="content">Content for section 1.</div>
  </div>

  <div class="acc-item">
    <input type="radio" name="acc" id="acc2" class="stateInput">
    <label for="acc2" class="trigger">Section 2 Title</label>
    <div class="content">Content for section 2.</div>
  </div>
  
  <div class="acc-item">
    <input type="radio" name="acc" id="acc3" class="stateInput">
    <label for="acc3" class="trigger">Section 3 Title</label>
    <div class="content">Content for section 3.</div>
  </div>
</div> 
*/


/* Functional CSS */
.stateInput {
    display: none;
}

/* .content {
    display: none;
} */

/* Logic: When radio is checked, find the sibling content and show it */
.stateInput:checked~.content {
    display: block;
}



/* <input type="radio" name=a value=1 checked><input type="radio" name=a value=0> */