/* wp-members-fred - Tailwind companion styles */
/* Replaces mini.css entirely. Only targeted overrides for elements Tailwind can't style via classes. */

/* === Primary color hover (replaces Tailwind hover:bg-custom-primary-hover) === */
.bg-custom-primary:hover {
  filter: brightness(0.82);
}

.button-primary,
.button.button-primary,
.btn-primary,
input[type="submit"].button-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.button-primary:hover,
.button-primary:focus,
.button.button-primary:hover,
.button.button-primary:focus,
.btn-primary:hover,
.btn-primary:focus,
input[type="submit"].button-primary:hover,
input[type="submit"].button-primary:focus {
  filter: brightness(0.82);
  color: #ffffff !important;
}

/* === Layout: dual-scroll on course template === */
body.page-template-template-course {
  overflow: hidden;
  height: 100%;
}
body.page-template-template-course #root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Course layout positioning — no admin bar */
#lms-layout {
  margin-top: 3.5rem;
  height: calc(100vh - 3.5rem);
}

/* Admin bar offset for header (all pages) */
.admin-bar #header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #header {
    top: 46px;
  }
}

.admin-bar #mobile-submenu {
  top: calc(3.5rem + 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar #mobile-submenu {
    top: calc(3.5rem + 46px);
  }
}

/* Admin bar: course dual-scroll layout */
.admin-bar #lms-layout {
  margin-top: 3.5rem;
  height: calc(100vh - 3.5rem - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar #lms-layout {
    margin-top: 3.5rem;
    height: calc(100vh - 3.5rem - 46px);
  }
}

/* Admin bar: non-course pages */
.admin-bar main#main {
  margin-top: 3.5rem !important;
}
@media screen and (max-width: 782px) {
  .admin-bar main#main {
    margin-top: 3.5rem !important;
  }
}

/* Course template main is inside lms-layout, no extra margin */
body.page-template-template-course main#main {
  margin-top: 0 !important;
}

/* === Login form input styling (wp_login_form on index.php) === */
#loginform p label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1d1f;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}
#loginform input[type="text"],
#loginform input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d7dc;
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  color: #1c1d1f;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
#loginform .login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

/* === Entry content prose styles === */
.entry-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1c1d1f;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--color-primary);
}
.entry-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1d1f;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.entry-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1c1d1f;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.entry-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.entry-content img {
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  border-radius: 0.25rem;
}
.entry-content ul,
.entry-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.entry-content ul {
  list-style-type: disc;
}
.entry-content ol {
  list-style-type: decimal;
}
.entry-content li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}
.entry-content a {
  color: var(--color-primary);
  text-decoration: none;
}
.entry-content a:hover {
  text-decoration: underline;
}
.entry-content blockquote {
  border-left: 4px solid var(--color-primary);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: #f7f9fa;
  color: #6a6f73;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.entry-content th,
.entry-content td {
  border: 1px solid #d1d7dc;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.entry-content th {
  background: #f7f9fa;
  font-weight: 600;
}
.entry-content pre {
  background: #1c1d1f;
  color: #f7f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.entry-content code {
  background: #f7f9fa;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.entry-content pre code {
  background: none;
  padding: 0;
}

/* === WordPress image alignments === */
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image {
  display: block; margin-left: auto; margin-right: auto;
}
img.alignright, div.alignright, figure.alignright {
  margin: 0 0 1em 1em; float: right;
}
img.alignleft, div.alignleft, figure.alignleft {
  margin: 0 1em 1em 0; float: left;
}
figure { height: auto; margin: 1em 0; max-width: 100%; }

/* === WordPress captions === */
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size: 0.875rem;
  color: #6a6f73;
  text-align: center;
  margin-top: 0.25rem;
}

/* === s2member Stripe form styling === */
.s2member-pro-stripe-form-section {
  margin-bottom: 1.5rem;
}
.s2member-pro-stripe-form-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1c1d1f;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #d1d7dc;
}
.s2member-pro-stripe-form-div {
  margin-bottom: 0.75rem;
}
.s2member-pro-stripe-form-div label span {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1d1f;
  margin-bottom: 0.25rem;
}
.s2member-pro-stripe-form input.form-control,
.s2member-pro-stripe-form select.form-control {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d7dc;
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  color: #1c1d1f;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.s2member-pro-stripe-form input.form-control:focus,
.s2member-pro-stripe-form select.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.s2member-pro-stripe-form .btn-primary,
.s2member-pro-stripe-submit {
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.s2member-pro-stripe-form .btn-primary:hover,
.s2member-pro-stripe-submit:hover {
  filter: brightness(0.82);
}
.s2member-pro-stripe-form .btn-default {
  background-color: #f7f9fa;
  color: #1c1d1f;
  border: 1px solid #d1d7dc;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.s2member-pro-stripe-form .btn-default:hover {
  background-color: #d1d7dc;
}
.s2member-pro-stripe-form-description-div {
  background: #f7f9fa;
  border: 1px solid #d1d7dc;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.s2member-pro-stripe-form-response-div {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  color: #856404;
}
.s2member-pro-stripe-form-response-div:empty {
  display: none;
}

/* === Comments === */
.comment-list {
  list-style: none;
  padding: 0;
}
.comment {
  border-bottom: 1px solid #d1d7dc;
  padding: 1rem 0;
}
.comment-author {
  font-weight: 600;
  color: #1c1d1f;
}
.comment-meta {
  font-size: 0.875rem;
  color: #6a6f73;
}

/* === Search form === */
.search-form {
  display: flex;
  gap: 0.5rem;
}
.search-form .search-field {
  flex: 1;
  border: 1px solid #d1d7dc;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  outline: none;
}
.search-form .search-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.search-form .search-submit {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.search-form .search-submit:hover {
  filter: brightness(0.82);
}

/* === Edit post link === */
.post-edit-link {
  color: var(--color-primary);
  font-size: 0.875rem;
  text-decoration: none;
}
.post-edit-link:hover {
  text-decoration: underline;
}

/* === Gallery === */
.gallery { margin: 16px; }
.gallery:after { content: ""; display: table; clear: both; }
.gallery figure img { max-width: 100%; height: auto; margin: 0 auto; display: block; border-radius: 0.25rem; }
.gallery figure { margin: 0 2% 1em 0; float: left; }
.gallery.gallery-columns-1 figure { width: 100%; margin: 0 0 1em 0; float: none; }
.gallery.gallery-columns-2 figure { width: 49%; }
.gallery.gallery-columns-3 figure { width: 32%; }
.gallery.gallery-columns-4 figure { width: 23.25%; }