@import "tailwindcss";
/* Trix: the blog post editor and the Action Text content it produces. */
@import "trix/dist/trix.css";

/*
 * Brand tokens are set as CSS custom properties on :root by
 * app/views/layouts/application.html.erb from the current resort's Theme
 * record (white-labeling, see plan Section 4.2). The @theme block below
 * points Tailwind's own color utilities (bg-brand-primary, etc.) at those
 * custom properties, with fallbacks so the app never renders unstyled if a
 * resort has no Theme yet. Fallbacks match Granlibakken's design system
 * (see db/seeds.rb).
 *
 * The palette is the "alpine daylight" system from the Sept 2026 homepage
 * mockup: cool paper backgrounds, deep navy ink, and three action colors
 * (green / blue / gold) that map onto the three revenue centers. Anything
 * that used to reach for warm cream/ember tones now resolves to the cool
 * equivalents through these same token names, so every page moves together.
 */
@theme inline {
  /* Core brand palette */
  --color-brand-primary:    var(--brand-primary,    #075E3E);
  --color-brand-secondary:  var(--brand-secondary,  #075BBF);
  --color-brand-accent:     var(--brand-accent,     #D68A00);
  --color-brand-background: var(--brand-background, #EEF3F8);
  --color-brand-text:       var(--brand-text,       #102038);

  /* Extended palette */
  --color-brand-cedar-deep: var(--brand-cedar-deep, #05412B);
  --color-brand-sage:       var(--brand-sage,       #3F8A68);
  --color-brand-sage-tint:  var(--brand-sage-tint,  #E7F1EB);
  --color-brand-ember-deep: var(--brand-ember-deep, #A96A00);
  --color-brand-ember-tint: var(--brand-ember-tint, #F6EBD9);
  --color-brand-sky:        var(--brand-sky,        #075BBF);
  --color-brand-sky-tint:   var(--brand-sky-tint,   #E4F1FD);
  --color-brand-cream:      var(--brand-cream,      #F5F8FB);
  --color-brand-snow:       var(--brand-snow,       #FFFFFF);
  --color-brand-line:       var(--brand-line,       #E6EAF0);
  --color-brand-ink-soft:   var(--brand-ink-soft,   #5A6573);
  /* Text links. Granlibakken's Brand Book gives links their own colour (Lake). */
  --color-brand-link:       var(--brand-link,       #075BBF);

  /* Typography */
  --font-brand-heading: var(--brand-heading-font, 'Newsreader', Georgia, 'Times New Roman', serif);
  --font-brand-body:    var(--brand-body-font,    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);

  /* Elevation — the mockup's cards float on a single soft, wide shadow
     rather than Tailwind's default tight grey ones. */
  --shadow-brand-card:  0 18px 50px rgba(10, 25, 45, 0.18);
  --shadow-brand-pill:  0 10px 34px rgba(10, 25, 45, 0.16);
  --shadow-brand-soft:  0 6px 20px rgba(10, 25, 45, 0.08);
}

@layer base {
  /*
   * Display type in this system is the serif at tight leading and a slight
   * negative track — set once here so headings match the mockup without
   * every view repeating the same three utilities.
   */
  h1, h2, h3 {
    letter-spacing: -0.02em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-brand-heading);
  }

  /* Links written without classes (rich text, pasted copy) still take the
     link colour. */
  a:not([class]) {
    color: var(--color-brand-link);
    text-decoration: underline;
  }
}

@utility text-balance-heading {
  text-wrap: balance;
}

/* A soft dark pool in the top-left of the homepage photo, behind the white
   logo and above the image, so the logo reads on bright snow or sky. */
@layer components {
  .hero-logo-scrim {
    position: absolute;
    inset: 0 auto auto 0;
    width: 520px;
    height: 300px;
    pointer-events: none;
    background: radial-gradient(ellipse at 15% 10%, rgba(8, 16, 34, 0.6), rgba(8, 16, 34, 0) 65%);
  }

  @media (max-width: 767px) {
    .hero-logo-scrim {
      width: 60vw;
      height: 200px;
    }
  }
}

/* Tap-to-rate stars (the lesson review). Radios in natural order 1..5, each
   followed by its star; a star fills when it, or a star after it, is chosen
   or hovered. Filled stars are ink, the way Airbnb draws them. */
@layer components {
  .star-rating {
    position: relative;
    display: flex;
    gap: 0.25rem;
    --star-size: 1.75rem;
  }

  .star-rating--large {
    gap: 0.5rem;
    --star-size: 2.75rem;
  }

  .star-rating--small {
    --star-size: 1.625rem;
  }

  .star-rating input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .star-rating label {
    cursor: pointer;
    color: #D3D9E1;
    border-radius: 0.375rem;
    transition: color 0.12s ease, transform 0.12s ease;
  }

  .star-rating label svg {
    display: block;
    width: var(--star-size);
    height: var(--star-size);
  }

  .star-rating input:checked + label,
  .star-rating label:has(~ input:checked) {
    color: var(--color-brand-text);
  }

  .star-rating input:checked + label {
    transform: scale(1.08);
  }

  .star-rating input:focus-visible + label {
    outline: 2px solid var(--color-brand-secondary);
    outline-offset: 2px;
  }

  @media (hover: hover) {
    .star-rating:hover label {
      color: #D3D9E1;
    }

    .star-rating:hover label:hover,
    .star-rating:hover label:has(~ label:hover) {
      color: var(--color-brand-text);
    }
  }
}

/*
 * Blog posts (Action Text). One set of rules for the post page and the editor,
 * so what the writer sees is what readers get. Trix's "Heading" button makes an
 * h1, styled here as a section heading under the post's own title.
 */
.blog-prose > .trix-content > * + *,
.blog-prose.trix-content > * + * { margin-top: 1.1em; }
.blog-prose p, .blog-prose .trix-content div, trix-editor.blog-prose div { line-height: 1.75; }
.blog-prose h1 {
  margin-top: 1.8em;
  font-family: var(--font-brand-heading, inherit);
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-brand-text);
}
.blog-prose a { color: var(--color-brand-link); text-decoration: underline; }
.blog-prose strong { font-weight: 700; color: var(--color-brand-text); }
.blog-prose ul { list-style: disc; padding-left: 1.5em; }
.blog-prose ol { list-style: decimal; padding-left: 1.5em; }
.blog-prose li + li { margin-top: 0.35em; }
.blog-prose blockquote {
  border-left: 3px solid var(--color-brand-primary);
  padding-left: 1em;
  font-style: italic;
  color: var(--color-brand-ink-soft);
}
.blog-prose pre {
  overflow-x: auto;
  border-radius: 0.5rem;
  background: rgb(0 0 0 / 0.05);
  padding: 0.75em 1em;
  font-size: 0.85em;
}
/* Inline photos run the full width of the column, rounded, with a caption. */
.blog-prose .attachment { display: block; margin: 2em 0; padding: 0; text-align: center; }
.blog-prose .attachment img { width: 100%; height: auto; border-radius: 0.75rem; }
.blog-prose .attachment__caption {
  margin-top: 0.6em;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-brand-ink-soft);
}
/* Photos dropped side by side become a gallery: two across, an odd one out full width. */
.blog-prose .attachment-gallery { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2em 0; }
.blog-prose .attachment-gallery > action-text-attachment { display: contents; }
.blog-prose .trix-content .attachment-gallery .attachment {
  flex: 1 1 calc(50% - 0.75rem);
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The editor: brand border, a roomy writing area, a toolbar that scrolls on phones. */
.blog-editor trix-toolbar { position: sticky; top: 0; z-index: 10; background: #fff; padding-top: 0.25rem; }
.blog-editor trix-editor {
  min-height: 24rem;
  border: 1px solid rgb(0 0 0 / 0.2);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  background: #fff;
}
.blog-editor trix-editor:focus { outline: 2px solid var(--color-brand-secondary); outline-offset: 1px; }