/* ============================================================
   Cupido Films — shared admin theme
   Brand palette + typography matching cupidofilms.com
   ============================================================ */

:root {
  --cf-primary: #22140D;      /* dark brown — headings, nav, emphasis */
  --cf-secondary: #CEB992;    /* gold — primary buttons, accents */
  --cf-accent: #D3BF9C;       /* light gold — hover / borders */
  --cf-text: #867563;         /* muted brown — body / sublabels */
  --cf-bg: #FEFDFD;           /* page background */
  --cf-surface: #FFFFFF;      /* cards */
  --cf-border: #ece4d6;       /* warm hairline border */
  --cf-danger: #a23b3b;       /* restrained red */
  --cf-success: #6f7d52;      /* muted olive-green */

  --cf-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cf-font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --cf-radius: 10px;
  --cf-shadow: 0 6px 22px rgba(34, 20, 13, 0.06);
}

body {
  background: var(--cf-bg);
  color: var(--cf-primary);
  font-family: var(--cf-font-body);
  font-weight: 300;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--cf-font-head);
  color: var(--cf-primary);
  font-weight: 500;
  letter-spacing: 0.3px;
}

a { color: var(--cf-text); text-decoration: none; }
a:hover { color: var(--cf-primary); }

/* ---- Generic buttons (gold solid primary) ---- */
.btn {
  display: inline-block;
  background: var(--cf-secondary);
  color: var(--cf-primary);
  padding: 9px 16px;
  border: 1px solid var(--cf-secondary);
  border-radius: 8px;
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-primary); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.ghost,
.btn-ghost {
  background: transparent;
  color: var(--cf-primary);
  border: 1px solid var(--cf-border);
}
.btn.ghost:hover,
.btn-ghost:hover { background: #f6f1e8; border-color: var(--cf-accent); }

/* ---- Inputs: warm focus ring ---- */
input[type="text"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px rgba(206, 185, 146, 0.28);
}

/* ============================================================
   Top navigation bar
   ============================================================ */
.cf-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 22px;
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-accent);
  box-shadow: 0 2px 14px rgba(34, 20, 13, 0.04);
}
.cf-nav .cf-brand {
  font-family: var(--cf-font-head);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--cf-primary);
  text-decoration: none;
}
.cf-nav .cf-brand span { color: var(--cf-secondary); }
.cf-nav .cf-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cf-nav .cf-links a {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cf-text);
  padding: 7px 11px;
  border-radius: 7px;
}
.cf-nav .cf-links a:hover { color: var(--cf-primary); background: #f6f1e8; }
.cf-nav .cf-links a.cf-cta {
  background: var(--cf-secondary);
  color: var(--cf-primary);
}
.cf-nav .cf-links a.cf-cta:hover { background: var(--cf-accent); }
.cf-nav .cf-user {
  position: relative;              /* containing block for the account dropdown */
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--cf-text);
}
.cf-nav .cf-user .cf-name { font-weight: 600; color: var(--cf-primary); }
.cf-nav form { margin: 0; }

/* ---- Account control: name + circular avatar, opening a dropdown ----
   The trigger replaces the old standalone Logout button, which now lives in the
   menu. Sizing and colours come from the nav's own scale (12px uppercase links,
   gold CTA fill), so it reads as part of the bar rather than a new component. */
.cf-usertrigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 3px 3px 3px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cf-primary);
  font-family: var(--cf-font-body);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cf-usertrigger:hover { background: #f6f1e8; border-color: var(--cf-border); }
.cf-usertrigger .cf-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.cf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cf-secondary);
  color: var(--cf-primary);
  transition: background 0.2s ease;
}
.cf-avatar svg { width: 19px; height: 19px; display: block; }
.cf-usertrigger:hover .cf-avatar { background: var(--cf-accent); }

/* Anchored to the trigger's right edge, so it can never leave the viewport on the
   side it opens towards; the max-width keeps it inside on a narrow screen. */
.cf-usermenu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  left: auto;
  z-index: 1100;
  min-width: 168px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: var(--cf-surface);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow);
  /* visibility (not display) keeps the closed menu out of the tab order while
     still allowing the open/close transition to run */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.cf-usermenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cf-usermenu__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--cf-primary);
  font-family: var(--cf-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
}
.cf-usermenu__item:hover { background: #f6f1e8; }

/* ---- Compact navigation disclosure (hamburger) ----
   Hidden until header.php's measurement says the links no longer fit on one line. */
.cf-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  order: -1;                       /* left of the wordmark, whatever the source order */
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cf-border);
  border-radius: 8px;
  color: var(--cf-primary);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cf-navtoggle:hover { background: #f6f1e8; border-color: var(--cf-accent); }
.cf-navtoggle__bars { display: block; width: 18px; }
.cf-navtoggle__bars i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.cf-navtoggle__bars i + i { margin-top: 4px; }
.cf-navtoggle[aria-expanded="true"] .cf-navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cf-navtoggle[aria-expanded="true"] .cf-navtoggle__bars i:nth-child(2) { opacity: 0; }
.cf-navtoggle[aria-expanded="true"] .cf-navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.cf-nav.is-compact { flex-wrap: nowrap; }
.cf-nav.is-compact .cf-navtoggle { display: inline-flex; }
.cf-nav.is-compact .cf-brand { margin-right: auto; }
/* The panel is absolutely positioned against the sticky bar and spans its full
   width BELOW it, so it can never overlap or reflow the account control. */
.cf-nav.is-compact .cf-links {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1090;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 16px 14px;
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-accent);
  box-shadow: var(--cf-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.cf-nav.is-compact .cf-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cf-nav.is-compact .cf-links a { padding: 11px 12px; }   /* comfortable touch targets */

/* Keyboard focus must be visible on every header control. */
.cf-nav .cf-links a:focus-visible,
.cf-navtoggle:focus-visible,
.cf-usertrigger:focus-visible,
.cf-usermenu__item:focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .cf-nav { padding: 12px 16px; }
  .cf-nav .cf-brand { font-size: 22px; letter-spacing: 2px; }
  /* the name is the first thing to go; the avatar keeps the control identifiable */
  .cf-usertrigger .cf-name { display: none; }
  .cf-usertrigger { padding: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-usermenu,
  .cf-nav.is-compact .cf-links,
  .cf-navtoggle__bars i { transition: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.cf-footer {
  padding: 18px;
  text-align: center;
  color: var(--cf-text);
  font-family: var(--cf-font-body);
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* ============================================================
   iOS Safari auto-zoom guard
   Mobile only: editable controls must be >=16px or Safari zooms
   the page on focus. Desktop font sizes are intentionally untouched.
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px;
  }
}