/*
 * The 14-200.pl look for Gancio: the colours, fonts, cards and buttons of the home page
 * (src/index.html). apply-theme.js writes this file into the Gancio setting custom_css at each start.
 *
 * The Vuetify colour "primary" is #a16207 (light_colors in apply-theme.js). That amber is the
 * link colour of 14-200.pl, and white text on it is readable. The brand yellow #ffca1a goes only
 * where the home page uses it: filled buttons with dark text, and small accents.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700;900&display=swap');

:root {
  --brand-50: #fefce8;
  --brand-100: #fef9c3;
  --brand-400: #facc15;
  --brand-500: #ffca1a;
  --brand-700: #a16207;
  --brand-900: #713f12;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-900: #111827;
  --hero-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e5e5' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Page: light grey background, Inter for text, Merriweather for headings. */
.v-application.theme--light {
  background: var(--gray-50) !important;
  color: var(--gray-900) !important;
}
.v-application,
.v-application .body-1,
.v-application .body-2,
.v-application .subtitle-1,
.v-application .subtitle-2,
.v-application .caption,
.v-application .text-body-1,
.v-application .v-btn,
.v-application .v-chip,
.v-application input {
  font-family: 'Inter', sans-serif !important;
}
.v-application h1,
.v-application h2,
.v-application h3,
.v-application .title,
.v-application .v-card__title {
  font-family: 'Merriweather', serif !important;
}

/* Header (logo, title, search, calendar): the "hero-pattern" of the 14-200.pl home page in place of
   the Gancio header image. apply-theme.js adds the panorama of Iława when skyline.* exists. */
.v-application nav {
  background-color: #fafafa !important;
  background-image: var(--hero-pattern) !important;
  background-size: auto !important;
  border-bottom: 1px solid var(--gray-200);
}

/* Title and description of the instance. */
.v-application #title {
  color: var(--gray-900) !important;
  font-family: 'Merriweather', serif !important;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Title on the page of one event. */
.v-application h1.title,
.v-application h1.title .p-name {
  color: var(--gray-900) !important;
  font-family: 'Merriweather', serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
.v-application h1 .text-body-1 {
  color: var(--gray-600) !important;
}

/* "Add event" and "Share": a white bar under the header. */
#navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200);
}

/* Search field and calendar: white, rounded, thin border. */
#navsearch .v-input__slot,
.vc-container {
  background: #fff !important;
  border-radius: 1rem !important;
}
#navsearch fieldset {
  border-color: var(--gray-200) !important;
  border-radius: 1rem !important;
}
.vc-container {
  border: 1px solid var(--gray-200) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Calendar marks in the brand colours: amber ring for today, yellow dots for days with events. */
.vc-container .vc-highlight {
  border-color: var(--brand-700) !important;
}
.vc-container .vc-highlight.vc-highlight-base-start,
.vc-container .vc-highlight.vc-highlight-base-middle,
.vc-container .vc-highlight.vc-highlight-base-end {
  background-color: var(--brand-100) !important;
}
.vc-container .vc-dot {
  background-color: var(--brand-500) !important;
}

.v-tabs .v-tab,
.v-tabs .v-tab .v-icon {
  color: var(--gray-900) !important;
}
.v-tabs-slider {
  background-color: var(--brand-500) !important;
}

/* Event cards: white, rounded, with a soft shadow that grows on hover. */
.event.v-card {
  background: #fff !important;
  border: 1px solid var(--gray-100);
  border-radius: 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event.v-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
/* Vuetify sets the font of .title with !important, so these rules need a longer selector. */
.v-application .event h2.title,
.v-application .event h2.title a {
  color: var(--gray-900) !important;
  font-family: 'Merriweather', serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.event .dt-start {
  color: var(--gray-600);
}
.event .place,
.event .place a {
  color: var(--brand-700) !important;
}

/* Tags: pale yellow labels, as the badges of 14-200.pl. */
.v-chip.v-chip--outlined.primary--text {
  background-color: var(--brand-100) !important;
  border-color: var(--brand-500) !important;
  color: var(--brand-900) !important;
  border-radius: 9999px !important;
}

/* Filled buttons: brand yellow with dark text, as "Przejdź na forum". */
.v-application .v-btn.primary:not(.v-btn--outlined):not(.v-btn--text) {
  background-color: var(--brand-500) !important;
  color: var(--gray-900) !important;
  font-weight: 700;
  border-radius: 0.5rem;
}
.v-application .v-btn.primary:not(.v-btn--outlined):not(.v-btn--text):hover {
  background-color: var(--brand-400) !important;
}

/* Footer: dark, as the footer of 14-200.pl. */
.v-footer {
  background: var(--gray-900) !important;
  color: var(--gray-400) !important;
}
.v-footer .v-btn,
.v-footer a {
  color: var(--gray-200) !important;
}

.v-application nav {
  background-image: url(/headerimage.png), var(--hero-pattern) !important;
  background-position: center bottom, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: min(1400px, 100%) auto, auto !important;
  padding-bottom: min(70px, 5vw) !important;
  position: relative;
}
/* Attribution of the panorama, in the bottom right corner of the header. */
.v-application nav::after {
  content: "Grafika: miastoilawa.pl";
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--gray-600);
  opacity: 0.8;
  pointer-events: none;
}
#navbar {
  background: transparent !important;
  border-bottom: none !important;
}
@media (max-width: 600px) {
  .v-application nav {
    background-size: auto 80px, auto !important;
    padding-bottom: 40px !important;
  }
}