/* Atomic CSS - Cibo Food Social Network */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Spacing - Padding */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }

/* Spacing - Margin */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }

/* Display */
.flex { display: flex; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Flex Properties */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.items-center { align-items: center; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

.flex-1 { flex: 1; }

/* Width & Max Width */
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }

/* Height */
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Text Properties */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1F2937; }
.text-white { color: #FFFFFF; }
.text-pink-600 { color: #FF7F11; }
.text-pink-700 { color: #D8690D; }
.text-blue-500 { color: #3B82F6; }
.text-blue-600 { color: #2563EB; }
.text-red-600 { color: #DC2626; }
.text-red-700 { color: #B91C1C; }

/* Background Colors */
.bg-white { background-color: #FFFFFF; }
.bg-pink-50 { background-color: #FFF2E6; }
.bg-pink-500 { background-color: #FF7F11; }
.bg-pink-600 { background-color: #D8690D; }
.bg-gray-100 { background-color: #F3F4F6; }
.bg-gray-300 { background-color: #D1D5DB; }
.bg-gray-400 { background-color: #9CA3AF; }
.bg-gray-500 { background-color: #6B7280; }
.bg-blue-500 { background-color: #3B82F6; }
.bg-blue-600 { background-color: #2563EB; }
.bg-red-100 { background-color: #FEE2E2; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-pink-50 { --tw-gradient-stops: #FFF2E6; }
.to-orange-50 { --tw-gradient-stops: #FFF2E6, #FFE6CC; }

/* Border */
.border { border: 1px solid #E5E7EB; }
.border-t { border-top: 1px solid #E5E7EB; }
.border-b { border-bottom: 1px solid #E5E7EB; }
.border-gray-100 { border-color: #F3F4F6; }
.border-gray-300 { border-color: #D1D5DB; }
.border-red-300 { border-color: #FCA5A5; }

/* Border Radius */
.rounded { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

/* Hover Effects */
.hover\:bg-pink-600:hover { background-color: #D8690D; }
.hover\:bg-blue-600:hover { background-color: #2563EB; }
.hover\:bg-gray-400:hover { background-color: #9CA3AF; }
.hover\:bg-gray-600:hover { background-color: #4B5563; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.hover\:text-pink-700:hover { color: #D8690D; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; }
.duration-200 { transition-duration: 200ms; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Object Fit */
.object-cover { object-fit: cover; }

/* Form Elements */
input[type="password"],
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.5rem;
}

input[type="password"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #FF7F11;
  box-shadow: 0 0 0 3px rgba(255, 127, 17, 0.2);
}

textarea {
  resize: vertical;
}

/* Links */
a {
  color: #FF7F11;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: #D8690D;
}

/* Lists */
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* Space */
.space-y-6 > * + * {
  margin-top: 1.5rem;
}

/* Prose */
.prose {
  max-width: 65ch;
}

/* Image */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Video */
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility for max-height */
.max-h-96 {
  max-height: 24rem;
}

/* Whitespace */
.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* Container */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Post card (semantic) */
.post {
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.post__header {
  padding: 1.5rem;
  border-bottom: 1px solid #F3F4F6;
  background: linear-gradient(to right, #FFF2E6, #FFE6CC);
}

.post__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0.5rem;
}

.post__meta {
  font-size: 0.875rem;
  color: #6B7280;
}

/* Title (main page title) */
.title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #FF7F11;
  margin-bottom: 0.5rem;
}

/* Cibo Post (post card on feed) */
.ciboPost {
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 200ms;
}

.ciboPost:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Button */
.btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: #FF7F11;
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  transition: background-color 200ms;
}

.btn:hover {
  background-color: #D8690D;
}

/* Hero (empty state) */
.hero {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #FFFFFF;
  border-radius: 1rem;
  padding: 1em;
}

/* Auth */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #FFF2E6;
}

.auth__card {
  width: 100%;
  max-width: 24rem;
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.auth__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0.25rem;
}

.auth__subtitle {
  color: #6B7280;
  margin-bottom: 1.5rem;
}

.auth__form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.auth__field {
  margin-bottom: 1rem;
}

.auth__actions {
  margin-top: 0.5rem;
}

.auth__button {
  width: 100%;
  background: #FF7F11;
  color: #FFFFFF;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.auth__button:hover {
  background: #D8690D;
}

.auth__links {
  margin-top: 1rem;
  text-align: center;
}

.auth__alert {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.auth__notice {
  background: #ECFDF3;
  color: #067647;
  border: 1px solid #A7F3D0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.auth__footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #F3F4F6;
  text-align: center;
  font-size: 0.75rem;
  color: #6B7280;
}

.auth__footer a {
  margin: 0 0.5rem;
}

/* Page (for static pages like terms, privacy) */
.page {
  min-height: 100vh;
  background: #F9FAFB;
  padding: 2rem 1rem;
}

.page__container {
  max-width: 48rem;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.page__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 1.5rem;
}

.page__content {
  line-height: 1.75;
  color: #374151;
}

.page__content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1F2937;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.page__content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1F2937;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.page__content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #DC2626;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.page__content p {
  margin-bottom: 1rem;
}

.page__back {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #F3F4F6;
}

/* Account page */
.account-info {
  background: #FFF2E6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.account-info p {
  margin-bottom: 0.5rem;
}

.account-actions {
  margin-top: 2rem;
}

.account-actions h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 1rem;
}

.account-button {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 1rem;
}

.account-button--logout {
  background: #FF7F11;
  color: #FFFFFF;
}

.account-button--logout:hover {
  background: #D8690D;
}

.account-button--delete {
  background: #DC2626;
  color: #FFFFFF;
}

.account-button--delete:hover {
  background: #B91C1C;
}

.account-danger {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 0.5rem;
}

.account-danger h4 {
  color: #DC2626;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.account-danger p {
  color: #7F1D1D;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Site Footer (general footer for all pages) */
.site-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #E5E7EB;
  text-align: center;
  font-size: 0.875rem;
  color: #6B7280;
}

.site-footer a {
  margin: 0 0.5rem;
  color: #FF7F11;
}

.site-footer a:hover {
  color: #D8690D;
}

/* Post Action Buttons */
.post_see,
.post_edit,
.post_delete,
.post_follow,
.post_following {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background-color 200ms;
}

.post_see {
  background-color: #3B82F6;
}

.post_see:hover {
  background-color: #2563EB;
}

.post_edit {
  background-color: #10B981;
}

.post_edit:hover {
  background-color: #059669;
}

.post_delete {
  background-color: #DC2626;
}

.post_delete:hover {
  background-color: #B91C1C;
}

.post_follow {
  background-color: #6B7280;
}

.post_follow:hover {
  background-color: #4B5563;
}

.post_following {
  background-color: #FF7F11;
}

.post_following:hover {
  background-color: #D8690D;
}

/* Media wrapper */
.media_box {
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #F3F4F6;
}

/* Post footer */
.Post_footer {
  padding: 1.5rem;
  background: #FFF2E6;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Comments */
.comments {
  margin-top: 2rem;
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.comments__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 1rem;
}

.comments__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment {
  padding: 0.75rem 1rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  background: #FFF7ED;
}

.comment__meta {
  font-size: 0.75rem;
  color: #6B7280;
  margin-bottom: 0.5rem;
}

.comment__author {
  font-weight: 700;
  color: #111827;
}

.comment__body {
  font-size: 0.95rem;
  color: #374151;
  white-space: pre-wrap;
}

.comment__actions {
  margin-top: 0.5rem;
}

.comment__delete {
  background: #DC2626;
  color: #FFFFFF;
  border: none;
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.comment__delete:hover {
  background: #B91C1C;
}

.comments__empty {
  color: #6B7280;
  margin-bottom: 1rem;
}

.comment__form {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #F3F4F6;
}

.comment__form-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 0.75rem;
}

.comment__field {
  margin-bottom: 0.75rem;
}

.comments__login {
  margin-top: 1rem;
  color: #6B7280;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */