/*
Theme Name: Casting Agenda App Theme
Description: Full site theme that matches the Casting Agenda plugin design language (light by default, tight spacing). No duplicate plugin CSS.
Version: 1.2.0
Text Domain: casting-agenda-app-theme
*/

/* IMPORTANT:
   - This theme intentionally leans on the plugin's CSS variables (from the plugin stylesheet).
   - It does NOT copy plugin CSS selectors/rules.
*/

html, body { height: 100%; margin: 0; }
body {
  min-height: 100vh;
  background: var(--bg, #f6f7fb);
  color: var(--text, #0f172a);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.35;
}

/* Keep WP wrappers from constraining width */
.site, .site-content, .content-area, .site-main { width: 100%; max-width: none; }
.ca-wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* Minimal topbar that feels like the app header */
.ca-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  border-bottom: 1px solid rgba(15, 23, 42, .10);
  backdrop-filter: blur(10px);
}
html.dark .ca-topbar {
  background: color-mix(in srgb, var(--surface, #0c1220) 86%, transparent);
  border-bottom-color: rgba(255,255,255,.10);
}

.ca-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3, 12px);
  padding: var(--s2, 8px) var(--s3, 12px);
}

.ca-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2, 8px);
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: -.2px;
}

.ca-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s2, 8px);
  flex-wrap: wrap;
}
.ca-nav a, .ca-nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md, 10px);
  border: 1px solid rgba(15, 23, 42, .10);
  background: var(--surface-2, #f3f5fa);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Icon-only toggle button */
.ca-toggle{padding:8px 10px; line-height:1;}
.ca-toggle .ca-icon{display:inline-flex;}

html.dark .ca-nav a, html.dark .ca-nav button {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ca-main {
  flex: 1;
  /* almost no padding so calendar can dominate */
  padding: var(--s2, 8px);
}

/* App page template: remove padding completely so the plugin layout can use full width */
body.page-template-template-casting-agenda-app .ca-main { padding: 0; }

/* Standard content styling (non-app pages) */
.ca-content {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s3, 12px);
}



/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:8px;
  z-index:1000;
  padding:10px 12px;
  background: var(--surface, #fff);
  color: inherit;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: var(--r-md, 10px);
}
.skip-link:focus{ left:8px; }

.ca-nav-list, .ca-nav-list li { list-style: none; margin: 0; padding: 0; }
.ca-nav-list { display: inline-flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.ca-nav-list li { display: inline-flex; }

/* Visible focus styles */
.ca-nav a:focus-visible,
.ca-nav button:focus-visible,
.ca-brand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #6d5efc) 70%, transparent);
  outline-offset: 2px;
}

/* Slightly bigger tap targets when relaxed */
body.ca-density-relaxed .ca-nav a,
body.ca-density-relaxed .ca-nav button{
  padding: 10px 12px;
}

/* App context: remove padding for maximum canvas */
body.ca-has-app .ca-main { padding: 0; }

.ca-brand .custom-logo{height:28px;width:auto;display:block;}
.ca-brand .custom-logo-link{display:inline-flex;align-items:center;}

/* -------------------------------------------------------------------------
   v1.2.0 (Theme v9)
   Progressive enhancement for Casting Agenda plugin:
   - Plugin must work with ANY theme. This theme provides optional layout polish.
   - We do NOT style inside the plugin's component namespace, except safe layout.
---------------------------------------------------------------------------*/

/* App context: allow the plugin container to go wider (optional benefit). */
body.ca-has-app .casting-agenda-app {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s3, 12px);
  padding-right: var(--s3, 12px);
}

/* Accessible focus, scoped to app context (won't override plugin component rules). */
body.ca-has-app :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 80%, transparent);
  outline-offset: 2px;
}

/* Keep topbar controls consistent without touching plugin components. */
.ca-topbar :where(a, button) { font: inherit; }