/* Stylesheet for all site elements, more specificity for specific elements is provided in classes */


:root
{
  --page-bkg: #ffffff;
  --element-bkg: #f7f7f8;
  --element-bkg-hover: #e8e8e9;
  --lr-blue: #0eb4e7;
  --lr-blue-hover: #0daad9;
  --lr-yellow: #fec822;
  --transition: 0.3s ease;
  --dark-text: rgba(0, 0, 0, 1.0);
  --dark-text-hover: rgb(25, 25, 25);
  --gray-text: rgba(50, 50, 50, 1.0);
  --dark-back: rgba(0, 0, 0, 0.3);
  --dark-back-hover: rgba(0, 0, 0, 0.45);
  --dark-back-active: rgba(0, 0, 0, 0.6);
  --light-text: rgba(255, 255, 255, 1.0);
  --light-text-hover: rgba(255, 255, 255, 1.0);
  --mid-text: rgba(150, 150, 150, 1.0);
  --mid-text-hover: rgba(150, 150, 150, 1.0);
  --size-huge: clamp(2.5rem, 5vw + 1.2rem, 3.57rem);
  --size-large: clamp(2rem, 3vw + 1.3rem, 2.74rem);
  --size-medium: clamp(1.6rem, 2vw + 1.05rem, 2.11rem);
  --size-small: clamp(1.2rem, 1vw + 0.95rem, 1.62rem);
  --size-regular: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
  --hover-shadow: 0 2px 4px rgba(0,0,0,0.35);
  --background-blur: blur(2px);
  --small-border-radius: 10px;
  --normal-border-radius: 20px;
  --nav-height: 6rem;
  --side-padding: clamp(0vw, 20vw - 5rem, 20vw);
  --article-side-padding: clamp(0vw, 35vw - 12rem, 35vw);
  /*--border-debug: 1px solid red;*/
  --border-debug: none;
  --text-margin: 2rem;
  --margin-paragraph: 2em 0.3em 2em 0.3em;
  --margin-bottom-element: 75px;
  --font-weight-light: 300;
  --shadow-element: 0 4px 6px rgba(0,0,0,0.1);
  --gap-cards: 20px;
}

img
{
  width: 100%;
  aspect-ratio: auto;
  border-radius: var(--normal-border-radius);
  image-rendering: smooth;
}

body
{
  font-family: Bahnschrift, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #000000;
  background: var(--page-bkg);
  text-align: center;
}

a
{
  font-weight: bold;
  color: var(--lr-blue);
}

main
{
  padding-top: var(--nav-height);
}

h1
{
  font-size: var(--size-huge);
  margin-bottom: var(--text-margin);
  margin-top: var(--text-margin);
  border: var(--border-debug);
}

h2
{
  font-size: var(--size-large);
  margin-bottom: var(--text-margin);
  margin-top: var(--text-margin);
  border: var(--border-debug);
}

h3
{
  font-size: var(--size-medium);
  margin-bottom: var(--text-margin);
  margin-top: var(--text-margin);
  border: var(--border-debug);
}

h4
{
  font-size: var(--size-small);
  margin-bottom: var(--text-margin);
  margin-top: var(--text-margin);
  border: var(--border-debug);
}

p
{
  font-size: var(--size-regular);
  margin-bottom: var(--text-margin);
  margin-top: var(--text-margin);
  border: var(--border-debug);
  text-align: left;
  font-weight: var(--font-weight-light);
}

b
{
  font-weight: bold;
}

li
{
  font-size: var(--size-regular);
  text-align: left;
  font-weight: var(--font-weight-light);
}


.divider
{
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

.divider.line
{
  border-bottom: var(--gray-text) solid 1px;
}

.divider.space-top
{
  margin-top: var(--margin-bottom-element);
}

.divider.space-bottom
{
  margin-bottom: var(--margin-bottom-element);
}

.core-content
{
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.article-content
{
  padding-left: var(--article-side-padding);
  padding-right: var(--article-side-padding);
}

.invis-link
{
  text-decoration: none;
  color: inherit;
}

.date {
  margin-top: var(--text-margin);
  margin-bottom: var(--text-margin);
  text-indent: 0;
  color: var(--gray-text);
}

.nav-panel
{
  
  display: flex;
  position: fixed;
  width:100%;
  height: var(--nav-height);
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  background: var(--element-bkg);
  border-bottom: 1px solid #e6e6e6;
  border: var(--border-debug);
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 1000;
}

.nav-panel.hide
{
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

/* Hamburger menu button - hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 100;
}

.hamburger span {
  width: 2rem;
  height: 0.25rem;
  background: var(--dark-text);
  border-radius: 0.125rem;
  transition: all var(--transition);
}

.hamburger:hover span {
  color:var(--dark-text-hover);
  text-shadow: var(--hover-shadow);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(0.5rem, 0.5rem);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0.5rem, -0.5rem);
}

/* Navigation links container */
.nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

/* Mobile styles */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
    position: absolute;
    right: 1rem;
  }

  .nav-links {
    position: fixed;
    right: -100%;
    top: var(--nav-height);
    flex-direction: column;
    background: var(--element-bkg);
    width: calc(var(--size-small) * 10);
    text-align: center;
    transition: right var(--transition);
    box-shadow: var(--shadow-element);
    padding: 1rem 0;
    gap: 0.5rem;
    z-index: 999;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links a {
    width: 100%;
  }

  .nav-links .btn {
    width: 90%;
    margin: 0 auto;
  }
}

/* Button base
   - Use `btn` class for general buttons, and `btn--passthrough`, `btn--panel`,
     `btn--transparent` for variants. */
.btn {
  display: inline-block;
  font-size: var(--size-small);
  padding: 0.5em 1em;
  border:none;
  border-radius: var(--normal-border-radius);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition), color var(--transition), opacity var(--transition), text-shadow var(--transition), box-shadow var(--transition);
  font-family: inherit;
  text-decoration: none;
  z-index: 10;
}

/* Passthrough: no background, black text, dark gray on hover */
.btn.passthrough {
  background: transparent;
  color: var(--dark-text);
}
.btn.passthrough.active,
.btn.passthrough:hover {
  color:var(--dark-text-hover);
  text-shadow: var(--hover-shadow);
}

/* Panel: blue background, white text, rounded, darken + scale on hover */
.btn.panel {
  background: var(--lr-blue);
  color: black;
}
.btn.panel:hover {
  background: var(--lr-blue-hover);
  box-shadow: var(--hover-shadow);
}

/* Transparent: 30% black background, white text, scales on hover */
.btn.transparent {
  background: var(--dark-back);
  color: var(--light-text);
  backdrop-filter: var(--background-blur);
  -webkit-backdrop-filter: var(--background-blur);
}
.btn.transparent:hover {
  background: var(--dark-back-hover);
  box-shadow: var(--hover-shadow);
}
.btn.transparent:active {
  background: var(--dark-back-active);
}

/* Arrow buttons, just exists to center the arrow*/
.btn.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width:2.0em;
  border-radius: 0.5em;
}

/*Footer stuff*/
footer
{
  text-align: center;
  font-size: var(--size-regular);
}

.socials {
  display: grid;
  grid-template-columns: repeat(3, 2rem);
  gap: 1rem;
  align-items: center;
  justify-content: center;
  align-content: center;
  justify-items: center;
  border: var(--border-debug)

}

.social-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}

.svg-h1
{
  width: auto;
  height: var(--size-huge);
  border: var(--border-debug);
  margin-top: var(--text-margin);
  margin-bottom: var(--text-margin);
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.svg-h2
{
  width: auto;
  height: var(--size-large);
  border: var(--border-debug);
  margin-top: var(--text-margin);
  margin-bottom: var(--text-margin);
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.svg-h3
{
  width: auto;
  height: var(--size-medium);
  border: var(--border-debug);
  margin-top: var(--text-margin);
  margin-bottom: var(--text-margin);
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.svg-h4
{
  width: auto;
  height: var(--size-small);
  border: var(--border-debug);
  margin-top: var(--text-margin);
  margin-bottom: var(--text-margin);
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.left-aligned
{
  text-align: left;
  justify-content: left;
}

.no-indent
{
  text-indent: 0;
}

.center-aligned
{
  text-align: center;
  justify-content: center;
}

.no-break {
  white-space: nowrap;
}

.main-slider {
  background-color: #00000000;
    text-shadow: 0 5px 10px rgba(0,0,0,1.0);
}

.main-slider-title {
    margin-top: 0px;
    margin-bottom: 20px;
}

.main-slider-description {
    margin-top: 20px;
    margin-bottom: 20px;
}

.main-slider-multi-button-container {
    gap: 10px;
    justify-content: center;
    display: grid;
    grid-auto-flow: column;
}

.main-slider-button{
    margin-top: 10px;
}

/* Bullet columns: 3-column container for compact bullet lists
   - Each child `div` becomes a list item and flows into columns
   - Uses the same typographic rules as `p` for inheritance/consistency */
.feature-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  width: 100%;
  text-align: left;
  margin-bottom: var(--margin-bottom-element);
}

@media (max-width: 768px) {
  .feature-columns {
    grid-template-columns: 1fr;
  }
}

/* Ensure lists inside feature columns don't add extra spacing */
.feature-columns .features {
  margin: 0;
  padding: 0;
}

.features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.features li {
  list-style: none;
  position: relative;
  padding-left: 1.0em;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  font-weight:800;
}

.features li::before {
  content: "\2714";
  position: absolute;
  left: -0.5em;
  top: -0.1em;
}

.features li li {
  font-weight: var(--font-weight-light);
}

.gallery-container {
  margin: 0 0 0 0;
  border: var(--border-debug);
  width: 100%;
}

/*Sets up spacing for cards in a div*/
.card-box
{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-cards);
  justify-content: center;
}

/*Align cards to the left vs centered when left-aligned class is present*/
.card-box.left-aligned
{
  justify-content: left;
}

/*Controls the sizing of the card. % is relative to the parent*/
.card-box .card
{
  flex: 0 0 calc(25% - var(--gap-cards));
}

/* Drop to 3 cards on smaller screens, than 1 big row card for mobile */
@media (max-width: 1200px) {
  .card-box .card {
    flex: 0 0 calc(33.333% - var(--gap-cards));
  }
}

@media (max-width: 768px) {
  .card-box .card {
    flex: 0 0 100%;
  }
}

/*The background styles for the card itself*/
.card {
  background: var(--element-bkg);
  border-radius: var(--normal-border-radius);
  box-shadow: var(--shadow-element);
}

/* Card content, this is the root container that gives us the image, then gives us image on top, and text chunk at the bottom. On mobile this swaps to image left, text right*/
.card-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* Mobile layout: swap to image left, text right */
@media (max-width: 768px) {
  .card-content {
    flex-direction: row;
  }
}

/* Card image. This is what gives the image it's size */
.card-content img {
	width: 100%;
	aspect-ratio: 16/9;
  display: block;
}

/* On mobile, make the image a fixed width and height, and cover to crop it */
@media (max-width: 768px) {
  .card-content img {
    width: 150px;
    aspect-ratio: 1/1;
    height: 100%;
    object-fit: cover;
  }

  .card-content {
    max-height: 150px;
  }
}

/* Sets smaller margin on card text otherwise we'd have giant gaps since our margins are meant for articles */

.card-text h4,
.card-text h3,
.card-text h2,
.card-text h1,
.card-text p
{
  text-align: left;
  margin: 1.0rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

@media (max-width: 768px) {
  .card-text h4,
  .card-text h3,
  .card-text h2,
  .card-text h1,
  .card-text p
  {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* Pricing style. Not *just* for product cards, but that's the main use case so this is a logical spot in our css */
.price
{
  font-weight: bold;
}