/*
Theme Name:   Gardens of Stars
Theme URI:    https://gardensofstars.com/gardens-of-stars
Author:       Gardens of Stars
Author URI:   https://gardensofstars.com/
Description:  Theme for Gardens of Stars
Version:      1.0.0
Text Domain:  gardens-of-stars

© 2025 Gardens of Stars
*/

/* -------------------------------------------------------------------------- */
/*                            Custom Web Fonts                                */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "Lustria";
  src:
    url("fonts/Lustria-Regular.woff2") format("woff2"),
    url("fonts/Lustria-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Avenir";
  src:
    url("fonts/Avenir-Book.woff2") format("woff2"),
    url("fonts/Avenir-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

/* -------------------------------------------------------------------------- */
/*                        CSS Custom Properties (Root)                        */
/* -------------------------------------------------------------------------- */

:root {
  /* Gutter System */
  --site-gutter: 18px;

  /* Content Width Constraints */
  --content-max-width: 1200px;
  --wide-max-width: 1600px;
  --medium-max-width: 800px;

  --gosck-darkest-grey: #2e2e2e;
  --gosck-dark-grey: #555555;
  --gosck-grey: #888888;
  --gosck-light-grey: #e8e8e8;
}

/* Tablet breakpoint: reduce gutter */
@media (max-width: 1024px) {
  :root {
    --site-gutter: 14px;
  }
}

/* Mobile breakpoint: reduce gutter further */
@media (max-width: 640px) {
  :root {
    --site-gutter: 10px;
  }
}

/* -------------------------------------------------------------------------- */
/*                                    Reset                                   */
/* -------------------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1.2;
  padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}
ul {
  list-style: none;
}

blockquote {
  quotes: none;
}
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a img {
  border: none;
}

a,
a:focus,
a:visited,
a:active {
  border: 0;
}

img {
  display: block;
}

input[type="submit"]::-moz-focus-inner {
  border: 0;
}
input[type="submit"]::-webkit-focus-inner {
  border: 0;
}

.homeSection img,
.post p img,
.page p img,
.postThumb,
div.wp-caption img {
  max-width: 100% !important;
  height: auto;
}

.wp-caption {
  max-width: 100% !important;
}

/* -------------------------------------------------------------------------- */
/*                                    Global                                  */
/* -------------------------------------------------------------------------- */

body {
  font-size: 100%;
  width: auto;
  height: auto;
  padding: 0 0 0 0;
  margin: 0;
  color: var(--gosck-dark-grey);
  background-color: #111111;
}

p {
  line-height: 1.7em;
  margin: 0 0 20px 0;
}

p:last-child {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 0 0 0;
  padding: 0;
}

img {
  margin: 0;
}

img.left {
  margin: 0 15px 15px 0;
  float: left;
}

a {
  text-decoration: none;
  outline: none;
}

a {
  color: var(--gosck-grey);
}

a:hover {
  color: var(--gosck-dark-grey);
}

a img {
  border: none;
}

div a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px 0;
  font-weight: normal;
}

blockquote,
address {
  margin: 0 0 30px 0;
  padding: 0 30px 0 30px;
  font-style: italic;
  font-size: 1.2em;
  border-left: 5px solid #ccb676;
}

pre {
  margin: 0 0 20px;
  padding: 10px;
  background: #fff;
  overflow: auto;
  border: 1px solid #e4e4e4;
}

.left {
  float: left;
}

.right {
  float: right;
}

/* Clearfix ----------- */

/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

a.action {
  font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*                         Global Typography Override                         */
/* -------------------------------------------------------------------------- */

/* Base body font: Avenir for all regular copy */
body {
  font-family: "Avenir", "Georgia", "Times New Roman", serif;
  letter-spacing: 0.5px;
}

/* All headings use Lustria and are uppercase */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lustria", "Georgia", "Times New Roman", serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
h1 {
  text-align: center;
  font-size: 34px;
  letter-spacing: 4px;
  margin-top: 34px;
  margin-bottom: 34px;
}
h1.h1-big {
  font-size: 44px;
}
h2 {
  font-size: 32px;
  letter-spacing: 3px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 14px;
}

@media (max-width: 767px) {
  h1 {
    margin-top: 30px;
    margin-bottom: 28px;
  }
}

/* Mobile (<= 640px) */
@media (max-width: 640px) {
  html {
    -webkit-text-size-adjust: none;
  }
  h1.h1-big {
    font-size: 36px;
  }
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 26px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 16px;
  }
  h6 {
    font-size: 14px;
  }
}

input {
  font-family: Avenir, "Georgia", "Times New Roman", serif;
  letter-spacing: 0.5px;
}

/* -------------------------------------------------------------------------- */
/*                                    Header                                  */
/* -------------------------------------------------------------------------- */

#header {
  padding: 24px var(--site-gutter);
  background: transparent;
  border-bottom: 0;
}

.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

#logo {
  flex: 0 1 auto;
  min-width: 0;
}

#logo a {
  display: block;
}

#logo img {
  width: min(68vw, 360px);
  max-width: 100%;
  height: auto;
}

#mainNav {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.site-primary-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 38px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.site-primary-nav__toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

.site-primary-nav__toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

#mainNav .site-primary-nav__menu {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 190px;
  padding: 12px 0;
  margin: 0;
  background: rgba(17, 17, 17, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

#mainNav.is-open .site-primary-nav__menu {
  display: block;
}

#mainNav .site-primary-nav__menu li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#mainNav .site-primary-nav__menu a {
  display: block;
  padding: 9px 16px;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.2;
}

#mainNav .site-primary-nav__menu .current-menu-item a,
#mainNav .site-primary-nav__menu a:hover,
#mainNav .site-primary-nav__menu a:focus {
  color: var(--gosck-light-grey);
  text-decoration: none;
}

@media (max-width: 640px) {
  #logo img {
    width: min(62vw, 360px);
  }

  #mainNav .site-primary-nav__menu {
    right: 50%;
    transform: translateX(50%);
  }
}

/* -------------------------------------------------------------------------- */
/*                            Body Container Content                          */
/* -------------------------------------------------------------------------- */

#container {
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

.wrap {
  position: relative; /* Added for stacking context */
}

/* Specifically targets main container (under header) that is not full-width  */
.container-constrained {
  max-width: var(--content-max-width);
  margin: 0 auto 20px;
  padding-top: 34px;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

@media (max-width: 767px) {
  .container-constrained {
    padding-top: 20px;
  }
}

/* Added blocks layout container for Gutenberg block content --- */
.entry-content {
  /* Apply gutter padding */
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);

  /* Content width constraints */
  --wp--style--global--content-size: var(--content-max-width);
  --wp--style--global--wide-size: var(--wide-max-width);

  /* Enable container queries */
  container-type: inline-size;
}

/* Non-aligned blocks automatically constrain */
.entry-content > * {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Full width blocks break out to viewport edges */
.entry-content > .alignfull {
  max-width: none;
  margin-left: calc(-1 * var(--site-gutter));
  margin-right: calc(-1 * var(--site-gutter));
  width: calc(100% + (2 * var(--site-gutter)));
}

/* Only add child padding when container is narrower than content max-width */
@container (max-width: 1200px) {
  /* Non-column children: both paddings */
  .alignfull > *:not(.alignfull):not(.wp-block-column) {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  /* Column children: no padding by default */
  .alignfull > .wp-block-column {
    padding-left: 0;
    padding-right: 0;
  }

  /* First column: left padding only */
  .alignfull > .wp-block-column:first-child {
    padding-left: var(--site-gutter);
  }

  /* Last column: right padding only */
  .alignfull > .wp-block-column:last-child {
    padding-right: var(--site-gutter);
  }
}

/* Wide aligned blocks */
.entry-content > .alignwide {
  max-width: var(--wide-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Medium width block style — specificity matches .entry-content > * */
.entry-content > .is-style-medium,
.is-style-medium {
  max-width: var(--medium-max-width, 800px);
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/*                                Global UI Misc                              */
/* -------------------------------------------------------------------------- */

.gosck-btn a,
button.gosck-btn {
  display: inline-block;
  padding: 14px 30px;
  background-color: var(--gosck-grey);
  border-top-color: unset;
  border-bottom-color: unset;
  border-left-color: unset;
  border-right-color: unset;
  border-top-style: unset;
  border-bottom-style: unset;
  border-left-style: unset;
  border-right-style: unset;
  color: white;
  text-decoration: none;
  font-family: "Avenir", serif;
  font-size: 1.3em;
  letter-spacing: 1px;
  transition: background-color 0.2s ease;
}
.gosck-btn a:hover,
button.gosck-btn:hover {
  background-color: var(--gosck-dark-grey);
}
.gosck-checkbox {
  font-size: 0.9rem;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: "Avenir", serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--gosck-dark-grey);
}
.gosck-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--gosck-dark-grey);
}
.gosck-checkbox:hover span {
  color: #000;
}

div.gosck-top-light-grey-line {
  border-top: 1px solid var(--gosck-light-grey);
}

/* Utility classes for applying letter spacing */
.gosck-letter-spacing-1px {
  letter-spacing: 1px;
}
.letter-spacing-big {
  letter-spacing: 2px;
}

/* -------------------------------------------------------------------------- */
/*                         GOSCK Blocks Custom Classes                         */
/* -------------------------------------------------------------------------- */

.gosck-display-none {
  display: none !important;
}

/* Limit content width inside full-width blocks */
.gosck-half-content-width {
  max-width: calc((var(--content-max-width) / 2) - (var(--site-gutter) * 2));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .gosck-top-bottom-pad-responsive {
    padding-top: var(--site-gutter) !important;
  }
}

@media (max-width: 767px) {
  .spacer-below-home-carousel {
    height: 44px !important;
  }
}

/*Video Block ------------------*/

/* Horizontal alignment support */
.wp-block-gosck-video-hero.alignleft {
  float: left;
  margin-right: 2em;
  margin-bottom: 1em;
  max-width: 50%;
}

.wp-block-gosck-video-hero.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wp-block-gosck-video-hero.alignright {
  float: right;
  margin-left: 2em;
  margin-bottom: 1em;
  max-width: 50%;
}

/* Wide width alignment */
.wp-block-gosck-video-hero.alignwide {
  max-width: var(--wide-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Clear floats after aligned blocks */
.wp-block-gosck-video-hero.alignleft::after,
.wp-block-gosck-video-hero.alignright::after {
  content: "";
  display: table;
  clear: both;
}

.gosck-tag-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 2px;
  margin-bottom: 6px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 26px;
  letter-spacing: 2px;
  text-align: center;
}

.gosck-tag-line::before,
.gosck-tag-line::after {
  content: "";
  flex: 1;
  max-width: 65px;
  height: 0;
  border-top: 2px solid var(--gosck-light-grey);
  transform: translateY(2px);
}

@media (max-width: 640px) {
  .gosck-tag-line {
    font-size: 24px;
  }
  .gosck-tag-line::before,
  .gosck-tag-line::after {
    max-width: 40px;
  }
}

.gosck-series-cols {
  display: flex;
  flex-wrap: wrap;
}

/* Desktop: both columns at 50% */
.gosck-series-cols > .wp-block-column {
  flex: 0 0 50% !important;
}

@container (max-width: 1200px) {
  .gosck-series-cols > .wp-block-column {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
  }
}

.gosck-series-cols:not(:has(~ .gosck-series-cols)) .wp-block-group {
  padding-bottom: 40px !important;
}

.gosck-series-cols:not(:has(~ .gosck-series-cols)) .wp-block-group:last-child {
  padding-bottom: 20px !important;
}

.gosck-series-cols > .wp-block-column h4 {
  padding-top: 0px;
}

/* Tablet example: 60/40 split */
@media (max-width: 1024px) {
  .gosck-series-cols > .wp-block-column:first-child {
    flex: 40% !important;
  }
  .gosck-series-cols > .wp-block-column:first-child > div {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 0px !important;
    padding-right: 20px !important;
  }
  .gosck-series-cols > .wp-block-column:last-child {
    flex: 60% !important;
  }
  .gosck-series-cols > .wp-block-column:last-child > div {
    padding-top: 12px !important;
    padding-bottom: 20px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  /* Target last .gosck-series-cols */
  .gosck-series-cols:last-child > .wp-block-column:last-child > div {
    padding-bottom: 0px !important;
  }
}
/* Mobiles (<= 640px) */
@media (max-width: 640px) {
  :where(.gosck-series-cols.wp-block-columns.is-layout-flex) {
    gap: 20px !important;
  }
}

/* -------------------------------------------------------------------------- */
/*                              WP Block Overrides                            */
/* -------------------------------------------------------------------------- */

figure.wp-block-image {
  margin: 0;
}

.gosck-override-block-padding > .wp-block-columns {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

hr.wp-block-separator {
  border-bottom: 1px solid var(--gosck-light-grey);
}

@media (max-width: 767px) {
  body.page .has-medium-font-size {
    font-size: 18px !important;
  }
}

/* Accordion ------------------*/

h3.wp-block-accordion-heading {
  margin-top: -6px;
  margin-bottom: 0;
}

/* Accordion heading: keep title + icon together */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding-bottom: 0;
  color: var(--gosck-grey);
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover {
  color: var(--gosck-dark-grey);
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle-title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  font-size: 19px;
}

.wp-block-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  margin: 0;
  transform: translateY(-4px);
}

.wp-block-accordion-item.is-open > h3.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: rotate(45deg) translateX(-1px) translateY(-2px);
}

.wp-block-accordion-panel {
  margin-top: -14px;
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */

#footer {
  border-top: 1px solid var(--gosck-light-grey);
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  margin: 64px auto 0;
  background-color: #fff;
  z-index: 9999;
  position: relative;
}

.footer-inner {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: calc(var(--site-gutter) + 8px);
  padding-right: calc(var(--site-gutter) + 8px);
}

.footer-constrained-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* Footer Columns Container */
.footer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}

/* Base column styles */
.footer-col {
  text-align: left;
}

/* Nav column: auto width (fit content) */
.footer-col--nav {
  justify-self: start;
}

/* Email column: fixed center track, independent of nav/social widths */
.footer-col--email {
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  text-align: center;
}

.footer-col--email h5 {
  margin-bottom: 16px;
  width: min(100%, 320px);
  text-align: center;
  white-space: nowrap;
  margin-left: -29px;
  margin-right: -29px; /* cancels trailing letter-spacing */
  transform: translateX(-7px);
}

/* Follow column: auto-width, pinned to right edge */
.footer-col--follow {
  justify-self: end;
  text-align: left;
}

.footer-nav {
  padding: 0;
  margin: 0;
  text-align: left;
}

/* Social Icons */
.footer-social-icons {
  display: flex;
  gap: 16px;
}

.footer-social-icon {
  width: 50px;
  height: 50px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.footer-social-icon:hover {
  opacity: 0.7;
}

.footer-nav ul li {
  padding-bottom: 8px;
}

.footer-nav ul li a {
  line-height: 12px;
  color: var(--gosck-grey);
  font-size: 1.05em;
}

.footer-nav ul li.current-menu-item a {
  text-decoration: none;
  color: var(--gosck-darkest-grey);
}

.footer-nav ul li.sfHover a,
.footer-nav ul li a:hover,
.footer-nav ul li:hover {
  text-decoration: none;
  color: var(--gosck-darkest-grey);
}

#footer .copyright {
  padding-top: 6px;
  text-align: center;
}

/* Footer responsive: Mobile-big (≤767px) */
@media (max-width: 767px) {
  .footer-columns {
    display: flex;
    flex-wrap: wrap;
  }

  /* Row 1: Nav left + Follow right (both auto-width) */
  .footer-col--nav {
    flex: 0 0 auto;
    order: 1;
  }

  .footer-col--follow {
    flex: 0 0 auto;
    margin-left: auto;
    order: 2;
  }

  /* Row 2: Email full-width, content centered */
  .footer-col--email {
    flex: 0 0 100%;
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -10px;
  }
}

/* Footer responsive: Mobile (≤640px) */
@media (max-width: 640px) {
  /* .footer-columns {
    flex-direction: column;
  }

  .footer-col--nav,
  .footer-col--email,
  .footer-col--follow {
    flex: 0 0 100%;
    order: unset;
  } */
}