/* Wedding app - base styles */
/* Colocated CSS is imported via a separate <link> tag in the layout */
@import "./styles.css";

/* Fraunces latin font faces */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: url("/fonts/fraunces-latin-100-normal-d605196d10a436bb29b28f4e35a7632a.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src: url("/fonts/fraunces-latin-100-italic-38ef889cad28435394eb9cd2d6d16f90.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src: url("/fonts/fraunces-latin-200-normal-4a397fda0e7e45696e962f9b1553ec8b.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 200;
  src: url("/fonts/fraunces-latin-200-italic-3f4d51482cee687fac2ab905b96f1947.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url("/fonts/fraunces-latin-300-normal-65f4bc346e9997b268ea2b2321dae67f.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: url("/fonts/fraunces-latin-300-italic-0b90a59a4f3cf655a37c9c79335897a6.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/fraunces-latin-400-normal-15ccd91d7a8fe0b1b5401d250360cc0b.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/fraunces-latin-400-italic-b02d32cd59dce18df2f6639d4c476d03.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/fraunces-latin-500-normal-2285bacdef3984dba57d8d235343fd33.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/fraunces-latin-500-italic-6cef5fdd0c8f78a6f3bdb97a7cc75acf.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/fraunces-latin-600-normal-b8dca52ca5f9e27747e5db1cf8820465.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/fraunces-latin-600-italic-a31da9ead03fb4be27c69344c0fd1d38.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/fraunces-latin-700-normal-d99d78cac1e88c84a702f0cf1d9f9af3.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/fraunces-latin-700-italic-c278ee4da779c3f360835668fd1d71bc.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("/fonts/fraunces-latin-800-normal-92fad7e13fdd3d6f4fa5a4447c12727b.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 800;
  src: url("/fonts/fraunces-latin-800-italic-0f2e8f5ee3cf185e037c2e4bb670c4cc.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url("/fonts/fraunces-latin-900-normal-548b3c5667af67ab9daf384c35b65723.woff2?vsn=d") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 900;
  src: url("/fonts/fraunces-latin-900-italic-dc7002043fd0e40c10dd35dcd572ac53.woff2?vsn=d") format("woff2");
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.5;
  color: #1a1a2e;
  background: #fafafa;
}

/* ---------- Flash / Toast ---------- */
.toast {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 50;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 1em;
  border-radius: 0.5em;
  max-width: 24em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.alert-info    { background: #dbeafe; border: 1px solid #93c5fd; color: #1e3a5f; }
.alert-error   { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; }
.alert .flex-1 { flex: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.5em 1.25em;
  border: 1px solid #d1d5db;
  border-radius: 0.375em;
  font-size: 0.875em;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: #1f2937;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover           { background: #f3f4f6; }
.btn-primary         { background: #4338ca; color: #fff; border-color: #4338ca; }
.btn-primary:hover   { background: #3730a3; }
.btn-soft            { background: #eef2ff; color: #4338ca; border-color: transparent; }
.btn-soft:hover      { background: #e0e7ff; }
.btn-primary.btn-soft { background: #eef2ff; color: #4338ca; border-color: transparent; }
.btn-primary.btn-soft:hover { background: #e0e7ff; }

/* ---------- Forms ---------- */
.fieldset {
  margin-bottom: 0.75em;
}
.label {
  display: block;
  font-size: 0.875em;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 0.5em 0.75em;
  border: 1px solid #d1d5db;
  border-radius: 0.375em;
  font-size: 0.875em;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
  transition: border-color 0.15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: #4338ca;
  box-shadow: 0 0 0 3px rgba(67,56,202,0.15);
}
.input-error, .select-error, .textarea-error {
  border-color: #ef4444;
}
.input-error:focus, .select-error:focus, .textarea-error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.checkbox {
  width: 1em;
  height: 1em;
  margin-right: 0.375em;
  vertical-align: middle;
  accent-color: #4338ca;
}
textarea {
  min-height: 5em;
  resize: vertical;
}

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: 0.75em 1em;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  border-bottom: 2px solid #e5e7eb;
}
.table td {
  padding: 0.75em 1em;
  font-size: 0.875em;
  border-bottom: 1px solid #f3f4f6;
}
.table-zebra tbody tr:nth-child(even) {
  background: #f9fafb;
}
.table tbody tr:hover {
  background: #f3f4f6;
}

/* ---------- List ---------- */
.list {
  list-style: none;
  border: 1px solid #e5e7eb;
  border-radius: 0.5em;
  overflow: hidden;
}
.list-row {
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  border-bottom: 1px solid #f3f4f6;
}
.list-row:last-child { border-bottom: 0; }
.list-col-grow { flex: 1; }

/* ---------- Header ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #e5e7eb;
}
.page-header h1 {
  font-size: 1.25em;
  font-weight: 600;
  color: #1f2937;
}
.page-header .subtitle {
  font-size: 0.875em;
  color: #6b7280;
  margin-top: 0.125em;
}

/* ---------- Misc ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}
.cursor-pointer { cursor: pointer; }
.text-error { color: #ef4444; }
.mt-1 { margin-top: 0.25em; }
.flex { display: flex; }
.gap-2 { gap: 0.5em; }
.items-center { align-items: center; }
.text-sm { font-size: 0.875em; }
.size-4 { width: 1em; height: 1em; }
.size-5 { width: 1.25em; height: 1.25em; }
.shrink-0 { flex-shrink: 0; }
.font-semibold { font-weight: 600; }
.self-start { align-self: flex-start; }
.opacity-40 { opacity: 0.4; }

/* ---------- Icons ---------- */
.icon {
  display: inline-block;
  vertical-align: middle;
  background-color: currentColor;
}
.icon-sm  { width: 1em; height: 1em; }
.icon-md  { width: 1.25em; height: 1.25em; }

/* ---------- Layout ---------- */
[data-phx-session], [data-phx-teleported-src] { display: contents; }