/*
Theme Name: 12Twelve Child Theme
Theme URI: https://12twelve.se/
Description: Astra child theme for the 12Twelve website.
Author: Robert Wägar aka Rob-One
Author URI: https://12twelve.se/
Template: astra
Version: 1.0.0
Text Domain: 12twelve-child
*/

/* ========================================
   12TWELVE GLOBAL STYLES
   By Robert Wägar aka Rob-One
======================================== */

/* 
:root {
  --ast-global-color-0: #0063fe;
  --ast-global-color-1: #191513;
  --ast-global-color-2: #ffffff;
  --ast-global-color-3: #38c99b;
  --ast-global-color-4: #cffa44;
  --ast-global-color-5: #000000;
  --ast-global-color-6: #b0fcec;
  --ast-global-color-7: #f4f4f1;
  --ast-global-color-8: #d9d9d4;
}
*/

body {
  font-family: 'Outfit', sans-serif;
  color: var(--ast-global-color-1);
}

.tt-copy,
.tt-product-meta,
.tt-footer-link {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.18;
  text-align: justify;
}

.tt-copy--intro {
  font-size: clamp(1rem, 1.45vw, 1.55rem);
}

.tt-blue {
  color: var(--ast-global-color-0);
}

.tt-grid {
  align-items: center !important;
}

.tt-square img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.tt-wide-image img,
.tt-fullbleed img,
.tt-media-fill img,
.tt-video-still img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.tt-album-grid .wp-block-image {
  margin: 0 0 22px;
}

.tt-album-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.tt-feature-split {
  align-items: stretch !important;
}

.tt-feature-split > .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tt-feature-split > .wp-block-column:last-child {
  padding: clamp(2rem, 5vw, 6rem);
}

.tt-feature-split--blue > .wp-block-column:last-child {
  /* Reserved for blue feature split overrides. */
}

.tt-product-meta {
  font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.tt-product-image img {
  width: 100%;
  max-height: 900px;
  object-fit: cover;
}

.wp-block-button__link {
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0;
}

.tt-footer-logo {
  font-weight: 600;
  letter-spacing: 0.08em;
}

.tt-copy--spread {
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-word;
}

/* ========================================
   ASTRA HEADER
   Logo | full remaining menu | cart
======================================== */

.ast-builder-grid-row.ast-grid-center-col-layout {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  width: 100%;
}

/* Make the CENTER grid area actually stretch */
.site-header-primary-section-center {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  justify-content: stretch !important;
}

/* Stretch Astra's menu wrappers */
.site-header-primary-section-center .ast-builder-menu-1,
.site-header-primary-section-center .ast-main-header-bar-alignment,
.site-header-primary-section-center .main-header-bar-navigation,
.site-header-primary-section-center .site-navigation,
.site-header-primary-section-center .main-navigation,
.site-header-primary-section-center .main-header-menu {
  width: 100% !important;
  max-width: none !important;
}

/* Full-width row */
.site-header-primary-section-center .main-header-menu {
  display: flex !important;
}

/* Equal-width menu items */
.site-header-primary-section-center .main-header-menu > li {
  flex: 1 1 0 !important;
  width: auto !important;
}

/* The clickable area fills each item */
.site-header-primary-section-center .main-header-menu > li > .menu-link {
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.site-primary-header-wrap.ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 781px) {
  .tt-copy {
    text-align: left;
  }

  .tt-mobile-reverse {
    flex-direction: column-reverse;
  }

  .tt-feature-split > .wp-block-column:last-child {
    padding: 2rem 1.25rem;
  }

  .tt-hero {
    min-height: 58svh !important;
  }
}