/* Page-specific (non-global) adjustments for Search page can go here if needed */

/* Responsive topics grid for search results */
@layer components {
	.search-topics-grid {
		display: grid;
		gap: 1rem;
		/* Mobile-first: single column by default (stacked on small screens) */
		grid-template-columns: 1fr;
	}
	/* Use grid placement so when there is room two columns appear (each >=750px).
		 If only one 750px column fits, items will wrap vertically. */
	.right-column {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	/* At very wide viewports allow columns of at least 750px each; this ensures
	   columns stay >=750px and only appear side-by-side when enough space
	   (e.g. two columns require ~1500px). */
	@media (min-width: 1500px) {
		.search-topics-grid {
			grid-template-columns: repeat(auto-fit, minmax(750px, 1fr));
		}
	}

	/* Ensure calendar inside the events card is responsive */
	.searchpage-calendar {
		width: 100%;
	}

	/* Small visual tweak so the fullcalendar content doesn't overflow its card */
	.searchpage-calendar .fc {
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
	}

	/* Ensure inner table/layout elements don't force overflow on small screens */
	.searchpage-calendar .fc .fc-daygrid-body,
	.searchpage-calendar .fc .fc-daygrid-week {
		max-width: 100%;
		box-sizing: border-box;
	}
}@layer base {
    :root {
        --color-theme-primary: #97cda3;
        --color-theme-secondary: #aadcb5;
        --color-theme-tertiary: #c2e9ca;
        --color-theme-text: rgb(38, 38, 38);
        --color-theme-text-dark: rgb(240, 240, 240);
        --color-theme-text-muted: rgba(38, 38, 38, 0.72);
        --color-surface-base: #ffffff;
        --color-surface-elevated: #f8fafc;
        --color-surface-muted: #edf2f7;
        --color-surface-inset: #e2e8f0;
        --color-border-soft: rgba(15, 23, 42, 0.12);
    }
    :root.dark {
        --color-theme-primary: #2b4b32;
        --color-theme-secondary: #25412b;
        --color-theme-tertiary: #1c2f20;

        --color-theme-text: rgb(240, 240, 240);
        --color-theme-text-dark: rgb(38, 38, 38);
        --color-theme-text-muted: rgba(240, 240, 240, 0.72);
        --color-surface-base: #111827;
        --color-surface-elevated: #1f2937;
        --color-surface-muted: #0f172a;
        --color-surface-inset: #334155;
        --color-border-soft: rgba(255, 255, 255, 0.14);
    }
}
/* Mobile-first tweaks for the Search page header
   Purpose:
   - Ensure the logo image preserves its aspect ratio and doesn't get squashed
   - Allow the search input to shrink/grow correctly on very small screens
   - Make the calendar column slightly more compact on small screens
*/

/* Calendar column: allow it to be narrower on small screens but keep usable width */
.searchpage-calendar {
  min-width: 180px;
}

/* Ensure images using the 'object-contain' utility preserve their aspect ratio
   but don't override Tailwind's width/height utility classes (w-10 h-10, etc.).
   Only set object-fit so the <img> keeps its proportions inside the given box. */
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
  /* don't override width/height coming from Tailwind classes */
}

/* Make sure the search input can shrink on very narrow screens (fallback for older browsers) */
header form input[type="text"] {
  min-width: 0; /* let flex children shrink */
}

/* Slightly larger input text on medium+ screens */
@media (min-width: 768px) {
  header input[type="text"] {
    font-size: 1.125rem;
  }
}

/* If the logo image (Plaves) is still too large from other CSS, give a targeted rule
   to ensure it remains within the intended box when used in headers. */
header img[alt="Plaves"] {
  display: block;
}

/* Keep the mobile menu compact and avoid auth links occupying too much width
   (these are hidden on small screens in the JSX, this is a defensive rule). */
header .sm\\:flex {
  max-width: 36rem;
}