/*
Theme Name: C.A.P.S
Theme URI: https://www.capskarlstad.se/
Author: KM Creatives
Description: Tema för C.A.P.S, Campus Allmänna Pub och Samlingsplats. Program, öppettider, priser, drinkmeny, utskott och nyheter redigeras i adminpanelen.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: caps
*/

/* Bara det som är WordPress-specifikt. Designen ligger i assets/css/caps.css. */

/* Den sticky headern ska hamna under adminraden för inloggade. */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

/* ---------- C.A.P.S-blocken: avstånden i ett avsnitt ----------
   Den statiska sajten sätter marginaler inline. Blocken har inga, så
   avstånden följer i stället vad som står bredvid vad. */

.wp-flow > * + * {
  margin-top: var(--s-6);
}

.wp-flow > :is(h2, h3) + * {
  margin-top: var(--s-5);
}

.wp-flow > * + :is(h2, h3, .board, .stat-row) {
  margin-top: var(--s-7);
}

.wp-flow > * + .figure--band {
  margin-top: clamp(var(--s-7), 6vw, var(--s-9));
}

.wp-flow > h2 + :is(.ruled, .steps) {
  margin-top: var(--s-6);
}

.wp-flow > :is(.label, .h3) + * {
  margin-top: var(--s-4);
}

.wp-flow > :is(.steps, .programme) + .btn-row,
.wp-flow > p:not([class]) + :is(.ruled, .steps) {
  margin-top: var(--s-7);
}

.wp-flow > .stat-row + .btn-row {
  margin-top: var(--s-7);
}

.wp-flow > .lead + .btn-row {
  margin-top: var(--s-5);
}

.wp-flow > .btn-row + .meta {
  margin-top: var(--s-4);
}

.wp-flow > p + p:not(.meta) {
  margin-top: 1em;
}

.wp-flow > .head + * {
  margin-top: 0;
}

/* Etiketten är inline-block; dess marginal under hör till radhöjden. */
.wp-flow > p:not(.label) {
  margin-bottom: 0;
}

.wp-flow > p:not([class]) {
  max-width: 62ch;
}

.wp-flow > .lead {
  max-width: 48ch;
}

.wp-flow > .meta {
  max-width: 60ch;
}

/* Rubriker utan vald stil får samma storlekar som designens. */
.wp-flow > h2.wp-block-heading:not([class*="is-style-"]) {
  font-size: var(--fs-h2);
  letter-spacing: -0.022em;
  line-height: 1.06;
}

.wp-flow > h3.wp-block-heading:not([class*="is-style-"]) {
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
  line-height: 1.18;
}

/* På mörk botten lyser rubrikerna lite mer, som på den statiska sajten. */
.section:not(.paper):not(.paper-2) .wp-flow :is(.d2, .h2, h2.wp-block-heading) {
  color: var(--void-050);
}

/* Länkar i löptext, samma som .prose. */
.wp-flow > :is(p, ul, ol):not(.label) a {
  color: var(--lime-400);
  text-decoration-color: currentColor;
}

.wp-flow > :is(p, ul, ol):not(.label) a:hover {
  color: var(--pink-400);
}

.paper .wp-flow > :is(p, ul, ol):not(.label) a,
.paper-2 .wp-flow > :is(p, ul, ol):not(.label) a {
  color: var(--pink-700);
}

.paper .wp-flow > :is(p, ul, ol):not(.label) a:hover,
.paper-2 .wp-flow > :is(p, ul, ol):not(.label) a:hover {
  color: var(--pink-500);
}

.wp-flow > .wp-block-list {
  max-width: 62ch;
  padding-left: 1.2em;
}

.wp-flow > :is(.wp-block-image, .wp-block-embed) img {
  height: auto;
}

/* Händelser under varandra i programvyn på startsidan. */
.programme > div > .event + .event {
  margin-top: var(--s-7);
}

/* ---------- Instagram ---------- */

.ig-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.ig-grid .instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.ig-feed {
  min-width: 0;
}

/* Innan Instagrams skript har laddats är varje inlägg en länk i en ruta. */
.ig-grid blockquote.instagram-media {
  border: 1px solid var(--void-700);
  padding: var(--s-5);
}

.paper .ig-grid blockquote.instagram-media,
.paper-2 .ig-grid blockquote.instagram-media {
  border-color: var(--paper-line);
}

.ig-grid blockquote.instagram-media a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--lime-400);
}

.paper .ig-grid blockquote.instagram-media a,
.paper-2 .ig-grid blockquote.instagram-media a {
  color: var(--pink-700);
}

.wp-flow > .ig-consent + .ig-grid {
  margin-top: var(--s-5);
}

.ig-consent .btn-row {
  margin-top: var(--s-4);
}