/* =====================================
   Header
===================================== */

.site-header {

  width:100%;

  height:var(--header-height);

  border-bottom:
    1px solid var(--border-color);

  background-color:
    var(--bg-primary);

}


.header-inner {

  width:100%;

  max-width:
    var(--content-width);

  height:100%;

  margin:0 auto;

  padding-inline:
    var(--space-6);

  display:flex;

  align-items:center;

  justify-content:space-between;

}



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


@media (max-width:600px) {

  .header-inner {

    padding-inline:
      var(--space-4);

  }

}



/* ---------- Title ---------- */


.site-title {

  margin:0;

  font-size:
    var(--font-size-lg);

}


.site-title a {

  color:
    var(--text-primary);

  text-decoration:none;

}



/* ---------- Settings ---------- */


.settings {

  position:relative;

  flex:0 0 auto;

}


.settings-button {

  width:40px;

  height:40px;

  padding:0;


  display:flex;

  align-items:center;

  justify-content:center;


  border:none;

  background:none;


  cursor:pointer;


  font-size:1.5rem;

  line-height:1;


  color:
    var(--text-primary);

}



/* ---------- Popup ---------- */


.settings-menu {

  position:absolute;

  right:0;

  top:calc(100% + var(--space-2));


  width:200px;

  max-width:
    calc(100vw - 32px);


  padding:
    var(--space-4);


  background:
    var(--bg-primary);


  border:
    1px solid var(--border-color);


  border-radius:
    var(--radius-md);


  box-shadow:
    0 4px 12px rgba(0,0,0,0.15);


  z-index:100;

}



/* ---------- Radio ---------- */


.settings-menu fieldset {

  border:none;

  padding:0;

  margin:0 0 var(--space-4);

}


.settings-menu fieldset:last-child {

  margin-bottom:0;

}


.settings-menu legend {

  font-size:
    var(--font-size-sm);

  font-weight:bold;

  margin-bottom:
    var(--space-2);

}


.settings-menu label {

  display:block;

  padding:
    var(--space-1) 0;

  color:
    var(--text-primary);

  cursor:pointer;

}


.settings-menu input {

  margin-right:
    var(--space-2);

};



/* =====================================
   Footer
===================================== */

.site-footer {

  width: min(100%, var(--content-width));

  margin: 0 auto;

  padding:
    var(--space-8)
    var(--space-4)
    var(--space-6);

  text-align: center;

  color: var(--text-muted);

}



/* =====================================
   Footer Navigation
===================================== */

.footer-nav {

  margin-bottom: var(--space-4);

}


.footer-nav ul {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: var(--space-4);

  margin: 0;

  padding: 0;

  list-style: none;

}


.footer-nav a {

  color: inherit;

  text-decoration: none;

  font-size: 0.9rem;

}


.footer-nav a:hover {

  text-decoration: underline;

}



/* =====================================
   Copyright
===================================== */

.footer-copy {

  margin: 0;

  font-size: 0.85rem;

}