/* -----------------------------------------------------------
    RESET & VARIABLES
----------------------------------------------------------- */

:root {
    --border-radius: 4px;
    --content-max: 1440px;
    --max-measure: 65ch;
  
    --font-heading: "Libre Baskerville", Georgia, serif;
    --font-body: "Libre Baskerville", Georgia, serif;
    --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-meta: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --base-font-size:18px;
    --body-lh:1.6;
    --heading-lh:1.2;
  
    --shadow-soft: 0 8px 24px rgba(0,0,0,.06);

    /* - Color of 2026 - */
    --brand-primary: #5DC6C3;
    /* --brand-primary-dark: oklch(0.16 0.1 192.79 / 1); */
    --pale-brand-primary: oklch(0.66 0.08 192.84); /* Could be used for buttons CTA backgrounds? */
    --brand-secondary: #57AFBF;
    /* --brand-secondary-dark: oklch(0.11 0.09 210.95 / 1); */
    --brand-combined: #497AB7; /* primary/secondary mixed 70/30 */
    --brand-combined-dark: oklch(0.16 0.11 198 / 1); /* Please use this for dark backgrounds */
  	
  /* Dont use these variable names, the colors are 2026 though */
    --brand-primary-shade-plus70: oklch(0.95 0.03 255.61); /* This is for very light/bright backgrounds */
    --brand-primary-shade-minus70: oklch(0.16 0.11 198 / 1); /* This is for very dark backgrounds */
  

    /* - 2025 - */
    --brand-primary-2025: #484a70;
    --chamoisee-minus70: #32241D;

    /* - Permanent Colors - */
    --black: #000;
    --ink-60: rgba(0, 0, 0, .6);   
}


/* -----------------------------------------------------------
    TYPOGRAPHY
----------------------------------------------------------- */

html { font-size: 100% }
body { 
    font-size: var(--base-font-size);
    line-height: var(--body-lh);
}

h1, h1.page-title {font-size:clamp(2rem,6vw,4rem);}
h2{font-size:clamp(1.5rem,4vw,2.5rem);}
h3{font-size:clamp(1.25rem,3vw,1.75rem);}
h4{font-size:1.1rem;}

/* Headings */
.is-heading,
.product-title {
    font-family: var(--font-heading);
}

/* Meta information */
pre, code, pre code,
.is-meta-information,
figcaption,
.image-caption,
figcaption .image-caption p,
p.date, .exhibition-dates,
.tags, 
article p.entry-actions,
#comments, #comments h3,
.product-price, footer,
footer.entry-footer, footer h2, footer h3 {
    font-family: var(--font-meta)!important;
}

/* UI/Navigation */
.is-navigation,
#productNav, 
#categoryNav, 
#comments .comment-btn, footer p a, a .product-image .product-title {
    font-family: var(--font-ui);
}


/* -----------------------------------------------------------
    LAYOUT
----------------------------------------------------------- */

@media only screen and ( min-width: 1280px ) {
    #content-wrapper p {
        max-width: var(--max-measure);
  }
}

@media only screen and ( min-width: 1440px ) {
    #header .title-nav-wrapper { max-width: 1440px; }
}


/* -----------------------------------------------------------
    MAIN MENU
----------------------------------------------------------- */

#header .icon-menu:before {
    font-size: 42px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    padding-top: 12px;
}

/* Overrides for better desktop dropdown menu */
#header #desktopNav .folder:hover .folder-child-wrapper {
    padding-top: 20px;
}

#header #desktopNav .folder .folder-child-wrapper ul.folder-child, 
#footer .secondary-nav .folder .folder-child-wrapper ul.folder-child {
  	width: 300px;
}

#header #desktopNav .folder .folder-child-wrapper, 
#footer .secondary-nav .folder .folder-child-wrapper {
    margin-left: -150px;
}

.main-nav ul li a span, .main-nav ul li a:visited span {
  	white-space: nowrap;
}


/* -----------------------------------------------------------
    ROUND CORNERS
----------------------------------------------------------- */

.newsletter-form-wrapper,
a:has(img),
img,
.sqs-block-image .design-layout-collage .image-card,
.sqs-block-image-figure .sqs-image-shape-container-element,
.sqs-block-image-figure .image-block-wrapper {
    border-radius: var(--border-radius);
}

#header img,
#footer img,
.is-logotype,
.no-round-corners {
    border-radius: 0;
}


/* -----------------------------------------------------------
    BRANDING as ELEMENTS (SquareSpace) 
----------------------------------------------------------- */

#announcement-bar-text-inner-id p { 
    font-family: var(--font-ui); 
    letter-spacing: normal; 
}

/* - Hide featured image from the "Hero" background */
#banner-wrapper .banner-image img {
    display:none!important;
}


.is-button, 
button, 
.sqs-block-button-element,
.sqs-add-to-cart-button-inner {
    font-family: var(--font-ui)!important;
    text-decoration: none!important;
    border-radius: var(--border-radius)!important;
}

@media only screen and (min-width: 769px) {
  #content-wrapper 
  .sqs-block.sqs-block-button 
  .sqs-block-button-container.sqs-stretched a {
    font-size: 18px;
    max-width: 432px;
  }
}

hr,
.sqs-block-horizontalrule hr {
    border: 0 !important;
    height: 1px;
    background-color: var(--brand-primary-shade-plus70);
}

figcaption,
figcaption .image-caption
figcaption .image-caption p {
    font-size: 0.9rem!important;
    font-style: italic!important;
    color: var(--ink-60)!important;
}

figcaption.image-card-wrapper p a {
  text-decoration: underline!important;
}

/* - Footer - */
#footer hr,
#footer .sqs-block-horizontalrule hr {
    background-color: var(--chamoisee-minus70);
    opacity: 0.3;
}

footer p a {
    text-transform: uppercase;
    text-decoration: none!important;
}

footer#footer .newsletter-block .newsletter-form-fields-wrapper,
footer#footer .newsletter-form-button-wrapper,
footer#footer .newsletter-form-button-wrapper button.newsletter-form-button {
	width: 100%;
}

footer#footer .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-name-fieldset,
footer#footer .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper {
	max-width: 100%;
}

/* - Newsletter Button - */
footer#footer .newsletter-form-button-wrapper button.newsletter-form-button {
  background-color: transparent!important;
  border-color: #272727!important;
  color: #000;
  border-width: 2px!important;
  letter-spacing: 1px!important;
}


/* -----------------------------------------------------------
    BRANDING as PAGES/SECTIONS
----------------------------------------------------------- */
/* - Årets Utställningar Page - */

section.exhibition {
    background-color: white;
    padding: 10px 0;
}
.exhibition-dates {
    font-size: 1.2em;
    margin-top: -0.5em;
}
.artform-medium {
    font-weight: normal;
}

/* Hidden section */
.cta-desc {
  font-style: italic;
}
/* - DISCLAIMER! - */
/* We didnt do this! (it was Squarespace!) */
.entry-more-link a:before {
    content: "Läs inlägget"!important;
}
/* See: custom JS/Script for OUR translations */

/* - Blog "Collection" Page - */

#collection-6815b21a97567029853103dc article .main-image-wrapper .main-image.content-fill {
    border-radius: var(--border-radius);
}

#collection-6815b21a97567029853103dc article header.entry-header p.entry-more-link a {
    font-family: var(--font-ui);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #000;
}

#collection-6815b21a97567029853103dc .view-list article .entry-header {
  border-style: none;
}

#collection-6815b21a97567029853103dc article h1 {
    font-size: 26px !important;
    line-height: 32px !important;
    font-family: 'IBM Plex Sans';
}

#collection-6815b21a97567029853103dc article p.date {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: normal;
    opacity: 0.8;
}

/* - Blog Post "Singular" Page - */

#banner-wrapper .author-name {
    display: none;
}

article p.entry-actions {
    visibility: hidden;
}

#collection-6815b21a97567029853103dc article p.entry-actions {
    visibility: hidden;
}

#comments {
    display:none;
}


/* - Webshop - */
/* Temporary or permanent? Do these element add any value? */
#productNav, #categoryNav, footer.entry-footer, .product-sharing {
    display: none!important;
}

.summary-title a.summary-title-link {
    text-decoration: none!important;
}

/* -----------------------------------------------------------
    PRINT
----------------------------------------------------------- */


/* - Helpers - */
@media screen {
    .sml--print-only-image, .is-only-for-print {
        display: none!important;
    }
}

/* -----------------------------------------------------------
    COOKIE BANNER
----------------------------------------------------------- */

.gdpr-cookie-banner.full-styling.bar {
    font-family: 'IBM Plex Mono';
}

.gdpr-cookie-banner.full-styling.bar .disclaimer-text a {
    color: inherit;
}

.gdpr-cookie-banner.full-styling.bar .button-group button>span {
    font-family: 'IBM Plex Sans';
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .1em;
    font-size: 15px;
}
.gdpr-cookie-banner.full-styling.bar .button-group .sqs-button-element--tertiary {
    border: 2px solid white;
}

.manage-cookies-overlay {
    font-family: 'IBM Plex Mono';
}
.manage-cookies-overlay button>span {
    font-family: 'IBM Plex Sans';
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
}