/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/

body {
	font-size: 16px;
	font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
	background: #fff;
	color: #000;
	line-height: 1.4em;
	/* font-weight: 300; */
}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #888888; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; color: #00cc00; }
a img { border: none; }
audio:focus { outline: none; }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings */
h1 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 16px; margin-bottom: 1em; }
h4 { font-size: 16px; margin-bottom: 1em; }

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p,
#exhibit code,
#exhibit blockquote { width: 600px; margin-bottom: 1em; }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index { width: 215px; background: #fff; /* line-height: 1.3em; */ }
#exhibit { margin: 0 0 0 215px; }

/* styling the index */
#index ul { list-style: none; margin: 0; }
#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ color: black; }

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: normal; color: #00f; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link {  } 
#index a:visited {  }
#index a:hover {  } 
#index a:active {  } 

/* links styles only for the #exhibit region */
#exhibit a:link { text-decoration: underline; }
#exhibit a:visited {  }
#exhibit a:hover { text-decoration: none; } 
#exhibit a:active {  } 

/* links styles just for h1 title of site (your name/logo) */
#index h1 a { 
  font-weight: 700; 
  text-decoration: none; 
  color: #000; 
}

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 27px 9px 25px 27px; }

/* this is where you pad them separately */
#index .container {  }
#exhibit .container {  }

/* size and style of titles and captions (not mobile though) */
.captioning { margin-top: 2px; }
.title { font-size: 0.7em; font-style: italic; line-height: 1.2em; }
.caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; }

/* Homepage two-column intro layout */
#index .index-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 40px;
  align-items: start;
}

/* Keep left column clean */
#index .index-left h1 {
  font-weight: 700;
  margin: 0 0 12px 0;
}

#index .index-left ul {
  margin: 0;
  padding: 0;
}

/* Right column intro */
#index .home-intro p {
  margin: 0;
  max-width: 52ch;
}

/* Mobile: stack */
@media (max-width: 980px) {
  #index .index-grid {
    display: block;
  }
  #index .home-intro {
    margin-top: 16px;
  }
}

/* Make site title bold, keep menu unchanged */
#index h1 a {
  font-weight: 700 !important;
}

/* Desktop: make site title bold */
#index h1 a {
  font-weight: 700 !important;
}



/* Colored headings without bold */
#exhibit .work-heading {
  font-weight: normal;
  margin-bottom: 0.25em;
}

/* Bullet styling (ensure bullets show cleanly) */
#exhibit ul {
  list-style-type: disc;
  margin-left: 1.2em;
  margin-bottom: 0.75em;
}

#exhibit ul li {
  margin-bottom: 0.25em;
}

/* Restore comfortable paragraph spacing in exhibits */
#exhibit p {
  margin-bottom: 0.9em;
}


/* Desktop menu hover + active state (menu items only) */


/* Active section (Indexhibit desktop uses span.active_section_title) */
#index span.active_section_title,
#index span.active_section_title a {
  color: #3baaf5 !important;
}

/* Ensure site title never changes */
#index h1 a,
#index h1 a:hover,
#index h1 a:visited,
#index h1 a:active {
  color: #000 !important;
}

/* Remove top space above first exhibit paragraph/title */
#exhibit .container > p:first-child {
  margin-top: 0;
}

/* Tighter bullet lists */
#exhibit ul {
  margin-top: 0.25em;
  margin-bottom: 0.75em;
  padding-left: 1.1em;
}

#exhibit ul li {
  margin-bottom: 0.25em;
}

/* Align exhibit content with nav title */
#exhibit .container {
  padding-top: 27px;
}

/* Add space before the "Ways I Work" heading only */
#exhibit p strong + br,
#exhibit p strong {
  /* no global spacing here */
}

#exhibit p.section-break {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}


/* Space before section breaks (e.g., Ways I Work) */
#exhibit .section-break {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

/* Extra space below exhibit title */
#exhibit .exhibit-title {
  margin-bottom: 1.6em;
}

/* Lock nav column and prevent inner grid overflow */
#index {
  width: 215px;
  overflow-x: hidden;
}

/* Force grid to respect nav width */
#index .index-grid {
  grid-template-columns: 215px 0;
}

/* Position homepage intro in content column */
.index-right {
  position: absolute;
  left: 215px;
  top: 0;
  width: calc(100vw - 215px);
  padding-left: 40px;
  box-sizing: border-box;
}

/* ===============================
   Homepage-only intro positioning
   =============================== */

/* Show homepage intro only on index */
.object-index .index-right {
  display: block;
}

/* Hide intro on all other pages */
body:not(.object-index) .index-right {
  display: none;
}
/* Align exhibit title baseline with site title */
#exhibit .exhibit-title {
  line-height: 1.2em;
}

/* Remove the extra spacer above exhibit content */
#exhibit .top {
  display: none;
}

/* Contact button */
#exhibit .contact-button {
  margin-top: 2.5em;
}

/* Default state */
#exhibit .contact-button a {
  display: inline-block;
  padding: 6px 12px;
  border: 1.5px solid currentColor;
  color: #000;                /* black text */
  text-decoration: none;
  font-weight: normal;
  line-height: 1.2;
  background: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}



#exhibit .contact-button a {
  margin-left: 1.1em; /* aligns with bullet text */
}



/* Keep site title neutral */
#index h1 a,
#index h1 a:hover {
  color: #000 !important;
}

/* =========================================
   Desktop nav: per-item hover + per-item active
   (targets by link URL)
   ========================================= */

/* Hover colors (by link) */
#index ul a[href*="/brands"]:hover { color: #3baaf5 !important; text-decoration: none; }
#index ul a[href*="/coaching"]:hover { color: #30d5c8 !important; text-decoration: none; }
#index ul a[href*="/birth-support"]:hover { color: #f2a6f1 !important; text-decoration: none; }
#index ul a[href*="/studio"]:hover { color: #21ce52 !important; text-decoration: none; }

/* Active colors (by link inside active wrapper) */
#index span.active_section_title a[href*="/brands"] { color: #3baaf5 !important; }
#index span.active_section_title a[href*="/coaching"] { color: #30d5c8 !important; }
#index span.active_section_title a[href*="/birth-support"] { color: #f2a6f1 !important; }
#index span.active_section_title a[href*="/studio"] { color: #21ce52 !important; }

/* Keep site title neutral */
#index h1 a:hover { color: #000 !important; }


#exhibit .section > p:first-of-type {
  margin-top: 0;
}
/* Remove underline from nav menu */
#index a,
#index a:hover,
#index a:active,
#index a:visited {
  text-decoration: none !important;
}

/* Brands (section-2) */
body.section-2 #exhibit .work-heading { color: #3baaf5; }
body.section-2 #exhibit .contact-button a { border-color: #3baaf5; color: #000; }

/* Coaching (section-4) */
body.section-4 #exhibit .work-heading { color: #30d5c8; }
body.section-4 #exhibit .contact-button a { border-color: #30d5c8; color: #000; }

/* Birth Support (section-5) */
body.section-5 #exhibit .work-heading { color: #f2a6f1; }
body.section-5 #exhibit .contact-button a { border-color: #f2a6f1; color: #000; }

/* Studio (section-6) */
body.section-6 #exhibit .work-heading { color: #21ce52; }
body.section-6 #exhibit .contact-button a { border-color: #21ce52; color: #000; }


/* ==================================
   EXHIBIT SPACING NORMALIZER
   (makes Brands + Coaching match)
   ================================== */

/* Remove injected top whitespace (Indexhibit often outputs empty <p> or leading <br>) */
#exhibit .container > br:first-child { display: none; }
#exhibit .container > p:empty { display: none; margin: 0; padding: 0; }

/* Treat the first <strong> as the page title and give it consistent spacing */
#exhibit .container > strong:first-child {
  display: block;
  margin: 0 0 0.9em 0;  /* this is the “one return” you want */
}

/* Ensure the first paragraph under the title doesn't add extra top space */
#exhibit .container > strong:first-child + p {
  margin-top: 0;
}

/* =========================================
   DESKTOP CTA — press animation only
   No color invert; one click opens email
   ========================================= */

#exhibit .contact-button a,
#exhibit .contact-button a:link,
#exhibit .contact-button a:visited {
  display: inline-block;
  padding: 6px 12px;
  border: 1.5px solid currentColor; /* section border color */
  color: #000;                       /* text stays black */
  background: transparent;           /* no fill */
  text-decoration: none;
  font-weight: normal;
  line-height: 1.2;

  /* smooth “press” */
  transition: transform 0.08s ease;

  /* remove click outlines */
  outline: none;
}

/* Pressed state: button feels pushed, colors unchanged */
#exhibit .contact-button a:active {
  transform: scale(0.98);
}

/* No hover fill, ever */
#exhibit .contact-button a:hover {
  background: transparent;
  color: #000;
}

/* Prevent persistent focus ring */
#exhibit .contact-button a:focus,
#exhibit .contact-button a:focus-visible {
  outline: none;
  box-shadow: none;
}

#exhibit img {
  display: block;
  width: 100% !important;
  max-width: 450px !important;
  height: auto !important;
  margin: 0 auto 1.5em auto; /* centers it */
}


/* Keep CTA centered only */
#exhibit .contact-button {
  text-align: center !important;
}

#exhibit .contact-button a {
  margin-left: 0 !important;
}