/* Outpost theme layer for the Cal.diy booker. Injected by Nginx before </head> on every
   cal.theoutposttherapy.com HTML response. Palette-neutral: every rule reads a --cal-* variable
   that the website sets through cssVarsPerTheme and falls back to Cal's own value, so pages that
   set nothing look exactly like stock Cal.diy. */

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/outpost-theme/fonts/quicksand-latin.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/outpost-theme/fonts/eb-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("/outpost-theme/fonts/eb-garamond-latin-italic.woff2") format("woff2");
}

/* The two font stacks are remapped here. Cal sets them in an inline <style> in <head>, and this
   block sits after it in source order, so it wins at equal specificity. Radius needs no remap:
   the embed script maps the cal-radius key onto Cal's own --radius token natively. */
:root {
  --font-sans: var(--cal-font-body, Inter, "Inter Fallback", system-ui);
  --font-cal: var(--cal-font-heading, calFont, "calFont Fallback");
}

/* In the utilities layer these tie with Tailwind's bg-default and win on source order, while
   still losing to the hover:, dark: and selected-state variants that carry more specificity. */
@layer utilities {
  [data-testid="time"] {
    background-color: var(--cal-slot-bg, var(--cal-bg));
    /* Slot buttons carry an arbitrary rounded-[10px] class that compiles to a literal, so the
       radius token reaches them only through this rule. Stock --radius is 0.625rem, which is
       that same 10px, and the fallback covers pages where the token is absent. */
    border-radius: var(--radius, 10px);
  }

  [data-testid="event-type-link"] {
    background-color: var(--cal-event-card-bg, var(--cal-bg));
  }
}

/* Profile banner on Cal's account page. Cal's own organisation profiles put a photo band on
   top of the profile box with the avatar overlapping its lower edge; these rules reproduce
   that pattern from the website's variables. Only data-testid="name-title" is stable in that
   markup, so the box is addressed as the element two levels above it and the inner pad as its
   parent. Outside @layer on purpose: Cal's utilities set background-color (bg-default) on the
   box, never background-image or padding-top, so nothing here collides. With no variable set
   the box renders exactly as stock: no image, zero padding, transparent pad, avatar unmoved.

   --cal-profile-banner         image for the box background, cover and centred   (none)
   --cal-profile-banner-height  top padding that gives the photo its band         (0px)
   --cal-profile-plate          fill behind avatar and name so they sit on the
                                panel colour rather than on the photo             (transparent)
   --cal-profile-avatar-lift    negative top margin that laps the avatar over
                                the banner's lower edge                           (0px)

   Six more variables decide how tall the box is and how avatar and name sit in it. Stock Cal
   stacks them in a 1rem pad, which is a tall box for two short pieces of content; setting the
   pad to a flex row puts the name beside the avatar and halves the height. Every fallback is the
   stock value measured live on the account page, so an unset page keeps Cal's own block layout.

   --cal-profile-plate-padding  padding of the inner pad                          (1rem, stock p-4)
   --cal-profile-plate-display  block keeps Cal's stack, flex makes a row         (block)
   --cal-profile-plate-align    cross-axis alignment of that row                  (stretch)
   --cal-profile-plate-gap      space between avatar and name in the row          (0px)
   --cal-profile-name-gap       top margin of the name                            (1rem, stock mt-4)
   --cal-profile-name-gap-bottom  bottom margin of the name                       (0.25rem, stock mb-1)

   The name rules are unlayered author CSS, so they beat Cal's mt-4 and mb-1 utilities on the
   same element. That is what lets the row correct for the avatar's lift: a lifted avatar's
   margin box is shorter than the circle it paints, so the row centres on a point 16px above the
   avatar's visual middle and the name needs a matching negative margin to sit level with it.

   The pad holds a bio below the name whenever the account has one, and a flex row splits the
   two apart because only the name carries the corrective margin. Six more variables make the
   pad a two-column grid instead: the avatar spans both rows in column 1 and the name and bio
   stack in column 2, which is the shape of a social profile header. When the display is grid,
   --cal-profile-plate-gap becomes the column gap and --cal-profile-plate-row-gap sets the rows
   on its own. Every fallback here is the stock value: a block or flex pad drops the grid
   properties outright and auto alignment is what it already does, so the other two layouts and
   an unset page are untouched.

   --cal-profile-plate-columns  grid template columns of the pad                  (none)
   --cal-profile-plate-row-gap  row gap, which overrides the shared gap            (0px)
   --cal-profile-avatar-rows    grid rows the avatar spans                        (auto)
   --cal-profile-avatar-align   block-axis alignment of the avatar                (auto)
   --cal-profile-name-align     block-axis alignment of the name                  (auto)
   --cal-profile-bio-align      block-axis alignment of the bio                   (auto) */
div:has(> div > [data-testid="name-title"]) {
  background-image: var(--cal-profile-banner, none);
  background-size: cover;
  background-position: center;
  padding-top: var(--cal-profile-banner-height, 0px);
}
div:has(> [data-testid="name-title"]) {
  background-color: var(--cal-profile-plate, transparent);
  padding: var(--cal-profile-plate-padding, 1rem);
  display: var(--cal-profile-plate-display, block);
  align-items: var(--cal-profile-plate-align, stretch);
  gap: var(--cal-profile-plate-gap, 0px);
  grid-template-columns: var(--cal-profile-plate-columns, none);
  row-gap: var(--cal-profile-plate-row-gap, 0px);
}
div:has(> [data-testid="name-title"]) > :first-child {
  margin-top: var(--cal-profile-avatar-lift, 0px);
  grid-row: var(--cal-profile-avatar-rows, auto);
  align-self: var(--cal-profile-avatar-align, auto);
}
[data-testid="name-title"] {
  margin-top: var(--cal-profile-name-gap, 1rem);
  margin-bottom: var(--cal-profile-name-gap-bottom, 0.25rem);
  align-self: var(--cal-profile-name-align, auto);
}
[data-testid="name-title"] + div {
  align-self: var(--cal-profile-bio-align, auto);
}
