/*
 * English Tutor brand system
 * Visual thesis: Tunisian exam authority expressed through Swiss editorial
 * discipline — decisive red, ink black, paper white and structured geometry.
 */

:root {
  --et-red: #d9091c;
  --et-red-bright: #f0001d;
  --et-red-dark: #a90013;
  --et-ink: #0a0a0c;
  --et-charcoal: #222226;
  --et-grey-700: #4b4b52;
  --et-grey-500: #71717a;
  --et-grey-300: #d4d4d8;
  --et-grey-200: #e7e7ea;
  --et-paper: #f5f5f3;
  --et-white: #ffffff;
  --et-focus: #111111;
  --et-radius-sm: 0.5rem;
  --et-radius-md: 0.875rem;
  --et-radius-lg: 1.25rem;
  --et-shadow: 0 18px 44px -30px rgba(10, 10, 12, 0.42);
  --et-shadow-strong: 8px 8px 0 rgba(10, 10, 12, 0.96);
}

html {
  scroll-behavior: smooth;
  background: var(--et-paper);
}

body.english-tutor-brand {
  margin: 0;
  background: var(--et-paper) !important;
  color: var(--et-ink) !important;
  font-family: "Google Sans", "Noto Kufi Arabic", Arial, sans-serif !important;
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.english-tutor-brand *,
.english-tutor-brand *::before,
.english-tutor-brand *::after {
  box-sizing: border-box;
}

.english-tutor-brand h1,
.english-tutor-brand h2,
.english-tutor-brand h3,
.english-tutor-brand h4 {
  color: var(--et-ink) !important;
  font-family: "Google Sans", "Noto Kufi Arabic", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.english-tutor-brand .text-xs {
  font-size: 0.8125rem !important;
  line-height: 1.2rem !important;
}

.english-tutor-brand .text-sm {
  font-size: 0.9375rem !important;
  line-height: 1.4rem !important;
}

.english-tutor-brand p {
  max-width: 72ch;
}

.english-tutor-brand ::selection {
  color: var(--et-white);
  background: var(--et-red);
}

.english-tutor-brand :focus-visible {
  outline: 3px solid var(--et-focus) !important;
  outline-offset: 3px;
}

/* Shared colour remapping */
.english-tutor-brand .bg-slate-50 { background-color: var(--et-paper) !important; }
.english-tutor-brand .bg-slate-100 { background-color: #ededeb !important; }
.english-tutor-brand .bg-slate-200 { background-color: var(--et-grey-200) !important; }
.english-tutor-brand .bg-slate-900 { background-color: var(--et-ink) !important; }
.english-tutor-brand .text-slate-900 { color: var(--et-ink) !important; }
.english-tutor-brand .text-slate-800 { color: var(--et-charcoal) !important; }
.english-tutor-brand .text-slate-700 { color: #35353a !important; }
.english-tutor-brand .text-slate-600 { color: var(--et-grey-700) !important; }
.english-tutor-brand .text-slate-500 { color: #64646d !important; }
.english-tutor-brand .text-slate-400 { color: #7b7b84 !important; }
.english-tutor-brand .border-slate-100 { border-color: var(--et-grey-200) !important; }
.english-tutor-brand .border-slate-200,
.english-tutor-brand .border-slate-300 { border-color: var(--et-grey-300) !important; }

.english-tutor-brand [class*="bg-gradient-to-r"] {
  background-color: var(--et-red) !important;
  background-image: none !important;
}

.english-tutor-brand [class*="bg-gradient-to-t"],
.english-tutor-brand [class*="bg-gradient-to-l"],
.english-tutor-brand [class*="bg-gradient-to-br"] {
  background-image: none !important;
}

.english-tutor-brand [class*="bg-gradient-to-br"] {
  background-color: var(--et-red) !important;
}

.english-tutor-brand .text-transparent[class*="bg-gradient"] {
  color: var(--et-red) !important;
  -webkit-text-fill-color: var(--et-red) !important;
  background: none !important;
}

.english-tutor-brand [class*="shadow-[0_8px_25px"],
.english-tutor-brand [class*="shadow-[0_12px_30px"] {
  box-shadow: 0 10px 24px -14px rgba(217, 9, 28, 0.7) !important;
}

.english-tutor-brand .shadow-lg,
.english-tutor-brand .shadow-xl,
.english-tutor-brand .shadow-2xl,
.english-tutor-brand [class*="shadow-[0_20px_50px"],
.english-tutor-brand [class*="shadow-[0_8px_30px"] {
  box-shadow: var(--et-shadow) !important;
}

.english-tutor-brand [class*="rounded-[2rem]"],
.english-tutor-brand [class*="rounded-[2.5rem]"],
.english-tutor-brand [class*="rounded-[3rem]"] {
  border-radius: var(--et-radius-lg) !important;
}

/* Header and navigation */
.english-tutor-brand header.sticky {
  top: 0;
  border-top: 4px solid var(--et-red);
  border-bottom: 1px solid rgba(10, 10, 12, 0.15);
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 28px -24px rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(12px);
}

.english-tutor-brand header .h-20 {
  height: 5.25rem;
}

.english-tutor-brand header .cursor-pointer > .w-8.h-8.bg-brand-600,
.english-tutor-brand footer .cursor-pointer > .w-8.h-8.bg-brand-600 {
  width: 2.75rem !important;
  height: 2.75rem !important;
  flex: 0 0 2.75rem;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--et-red-bright) !important;
  background-image: url("english-tutor-logo.png") !important;
  background-repeat: no-repeat !important;
  background-position: -26px -21px !important;
  background-size: 96px 96px !important;
  box-shadow: none !important;
}

.english-tutor-brand header .cursor-pointer > .w-8.h-8.bg-brand-600 > span,
.english-tutor-brand footer .cursor-pointer > .w-8.h-8.bg-brand-600 > span {
  display: none;
}

.english-tutor-brand header .cursor-pointer > span.font-bold.text-2xl,
.english-tutor-brand footer .cursor-pointer > span.font-bold.text-2xl {
  color: var(--et-red) !important;
  font-family: "Google Sans", Arial, sans-serif;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.15;
  text-transform: uppercase;
}

.english-tutor-brand header .cursor-pointer > span.font-bold.text-2xl > span,
.english-tutor-brand footer .cursor-pointer > span.font-bold.text-2xl > span {
  font-weight: inherit !important;
}

.english-tutor-brand header .cursor-pointer > span.font-bold.text-2xl > span::before,
.english-tutor-brand footer .cursor-pointer > span.font-bold.text-2xl > span::before {
  content: "\00a0";
}

.english-tutor-brand header nav button {
  position: relative;
  padding: 0.45rem 0;
  color: #47474e !important;
  font-family: "Google Sans", "Noto Kufi Arabic", Arial, sans-serif;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
}

.english-tutor-brand header nav.hidden.lg\:flex {
  column-gap: clamp(0.9rem, 1.25vw, 1.35rem);
}

.english-tutor-brand header nav.hidden.lg\:flex > *,
.english-tutor-brand header .hidden.lg\:flex.items-center > * {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.english-tutor-brand header .hidden.lg\:flex.items-center {
  column-gap: 1rem;
  margin-inline-start: 1.2rem;
}

.english-tutor-brand header .hidden.lg\:flex.items-center > button {
  font-size: 0.875rem !important;
  white-space: nowrap;
}

.english-tutor-brand header nav button svg {
  display: none;
}

.english-tutor-brand header nav button.text-brand-600 {
  color: var(--et-red) !important;
}

.english-tutor-brand header nav button.text-brand-600::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 3px;
  background: var(--et-red);
  content: "";
}

.english-tutor-brand header .hidden.lg\:flex.items-center > button:last-child {
  display: none !important;
  border: 1px solid var(--et-red-dark);
  border-radius: var(--et-radius-sm) !important;
  background: var(--et-red) !important;
  box-shadow: none !important;
  padding: 0.72rem 1.15rem !important;
  font-family: "Google Sans", Arial, sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0.045em;
}

.english-tutor-brand header .hidden.lg\:flex.items-center > button:nth-last-child(2) {
  color: var(--et-ink) !important;
  font-weight: 600 !important;
}

.english-tutor-brand header .lg\:hidden.absolute {
  border-top: 1px solid var(--et-grey-200);
  border-bottom: 3px solid var(--et-red) !important;
  box-shadow: 0 22px 45px -32px rgba(10, 10, 12, 0.75) !important;
}

.english-tutor-brand header .lg\:hidden.absolute button {
  border-radius: var(--et-radius-sm) !important;
}

/* Main canvas and editorial section rhythm */
.english-tutor-brand main {
  background: var(--et-paper);
}

.english-tutor-brand main > div > section {
  position: relative;
}

.english-tutor-brand main > div > section:first-child {
  border-bottom: 1px solid var(--et-grey-300);
  background: var(--et-white) !important;
}

.english-tutor-brand main > div > section:first-child::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 0.5rem;
  background: var(--et-red);
  content: "";
}

.english-tutor-brand main > div > section:first-child > [class*="blur-"] {
  display: none;
}

.english-tutor-brand main section {
  isolation: isolate;
}

.english-tutor-brand main section + section {
  border-top: 0 !important;
}

.english-tutor-brand main section h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.25vw, 4.8rem) !important;
  font-weight: 500 !important;
  line-height: 1.01 !important;
  letter-spacing: -0.045em !important;
}

.english-tutor-brand main section h2 {
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.english-tutor-brand main section h3,
.english-tutor-brand main section h4 {
  font-weight: 600 !important;
}

.english-tutor-brand main section .text-sm.text-brand-600.font-bold.uppercase,
.english-tutor-brand main section .text-xs.font-bold.uppercase {
  color: var(--et-red) !important;
  font-family: "Google Sans", Arial, sans-serif;
  letter-spacing: 0.09em !important;
}

.english-tutor-brand main button,
.english-tutor-brand main a {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, transform 160ms ease;
}

.english-tutor-brand main button.bg-brand-600,
.english-tutor-brand main button.bg-brand-500,
.english-tutor-brand main button[class*="from-brand-600"],
.english-tutor-brand main a.bg-brand-600,
.english-tutor-brand main a[class*="from-brand-600"] {
  border: 1px solid var(--et-red-dark);
  border-radius: var(--et-radius-sm) !important;
  background: var(--et-red) !important;
  box-shadow: none !important;
  color: var(--et-white) !important;
  font-family: "Google Sans", "Noto Kufi Arabic", Arial, sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0.015em;
}

.english-tutor-brand main button.bg-brand-600:hover,
.english-tutor-brand main button.bg-brand-500:hover,
.english-tutor-brand main button[class*="from-brand-600"]:hover,
.english-tutor-brand main a.bg-brand-600:hover,
.english-tutor-brand main a[class*="from-brand-600"]:hover {
  border-color: var(--et-ink);
  background: var(--et-ink) !important;
  transform: translateY(-2px);
}

.english-tutor-brand main button.bg-white,
.english-tutor-brand main a.bg-white {
  border-color: var(--et-ink) !important;
  border-radius: var(--et-radius-sm) !important;
  color: var(--et-ink) !important;
  box-shadow: none !important;
}

.english-tutor-brand main button.bg-white:hover,
.english-tutor-brand main a.bg-white:hover {
  background: var(--et-ink) !important;
  color: var(--et-white) !important;
}

/* Homepage hero and primary product panel */
.english-tutor-brand main > div > section:first-child .lg\:grid {
  align-items: stretch;
}

.english-tutor-brand main > div > section:first-child h1 + p {
  max-width: 40rem;
  color: #46464d !important;
}

.english-tutor-brand main > div > section:first-child .lg\:col-span-6:last-child > div {
  border: 1px solid var(--et-ink) !important;
  border-radius: var(--et-radius-md) !important;
  box-shadow: var(--et-shadow-strong) !important;
}

.english-tutor-brand main > div > section:first-child .aspect-\[4\/3\] {
  border-radius: calc(var(--et-radius-md) - 0.2rem) !important;
}

.english-tutor-brand main > div > section:first-child .animate-pulse {
  background: var(--et-red) !important;
}

.english-tutor-brand main > div > section:first-child .absolute.bottom-8 > .rounded-full {
  border: 1px solid rgba(10, 10, 12, 0.15);
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px -20px rgba(10, 10, 12, 0.75) !important;
}

.english-tutor-brand main > div > section:first-child .absolute.bottom-8 button {
  min-height: 2.45rem;
  border: 1px solid transparent;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

.english-tutor-brand main > div > section:first-child .absolute.bottom-8 button.bg-brand-500 {
  border-color: var(--et-red-dark) !important;
  background: var(--et-red) !important;
  color: var(--et-white) !important;
  box-shadow: 0 7px 16px -10px rgba(10, 10, 12, 0.8) !important;
}

.english-tutor-brand main > div > section:first-child .absolute.bottom-8 button.bg-brand-500:hover {
  border-color: var(--et-ink) !important;
  background: var(--et-ink) !important;
  color: var(--et-white) !important;
}

/* Cards, content panels, filters and forms */
.english-tutor-brand main .border.bg-white,
.english-tutor-brand main .border[class*="bg-white"],
.english-tutor-brand main [class*="border-slate"].bg-white {
  border-color: var(--et-grey-300) !important;
}

.english-tutor-brand main .group.bg-white,
.english-tutor-brand main .break-inside-avoid.bg-white,
.english-tutor-brand main .grid > .bg-white {
  box-shadow: none !important;
}

.english-tutor-brand main .group.bg-white:hover,
.english-tutor-brand main .break-inside-avoid.bg-white:hover,
.english-tutor-brand main .grid > .bg-white:hover {
  border-color: var(--et-red) !important;
  box-shadow: 0 16px 34px -28px rgba(10, 10, 12, 0.8) !important;
}

.english-tutor-brand main .group .bg-brand-50,
.english-tutor-brand main .bg-brand-50.p-3,
.english-tutor-brand main .bg-brand-50.p-4 {
  border-radius: var(--et-radius-sm) !important;
}

.english-tutor-brand main input,
.english-tutor-brand main select,
.english-tutor-brand main textarea {
  min-height: 3rem;
  border: 1px solid #b9b9c0 !important;
  border-radius: var(--et-radius-sm) !important;
  background: var(--et-white) !important;
  color: var(--et-ink) !important;
  box-shadow: none !important;
}

.english-tutor-brand main input:focus,
.english-tutor-brand main select:focus,
.english-tutor-brand main textarea:focus {
  border-color: var(--et-red) !important;
  outline: 3px solid rgba(217, 9, 28, 0.14) !important;
  outline-offset: 0;
}

.english-tutor-brand main input::placeholder,
.english-tutor-brand main textarea::placeholder {
  color: #787881 !important;
  opacity: 1;
}

.english-tutor-brand main table {
  border-collapse: collapse;
  border: 1px solid var(--et-grey-300);
  background: var(--et-white);
}

.english-tutor-brand main th {
  background: var(--et-ink) !important;
  color: var(--et-white) !important;
  font-family: "Google Sans", Arial, sans-serif;
  letter-spacing: 0.025em;
}

.english-tutor-brand main td {
  border-color: var(--et-grey-200) !important;
}

/* CTA strip */
.english-tutor-brand main section.bg-brand-50 {
  border-top: 0 !important;
  background: var(--et-red) !important;
}

.english-tutor-brand main section.bg-brand-50 > .absolute {
  display: none;
}

.english-tutor-brand main section.bg-brand-50 h2,
.english-tutor-brand main section.bg-brand-50 p {
  color: var(--et-white) !important;
}

.english-tutor-brand main section.bg-brand-50 button[class*="from-brand"] {
  border-color: var(--et-white) !important;
  background: var(--et-white) !important;
  color: var(--et-red-dark) !important;
}

.english-tutor-brand main section.bg-brand-50 button[class*="from-brand"]:hover {
  border-color: var(--et-ink) !important;
  background: var(--et-ink) !important;
  color: var(--et-white) !important;
}

/* Footer */
.english-tutor-brand footer {
  border-top: 6px solid var(--et-red) !important;
  background: var(--et-ink) !important;
  color: #b8b8c0 !important;
}

.english-tutor-brand footer .cursor-pointer > span.font-bold.text-2xl {
  color: var(--et-white) !important;
}

.english-tutor-brand footer h3,
.english-tutor-brand footer .text-slate-900 {
  color: var(--et-white) !important;
}

.english-tutor-brand footer p,
.english-tutor-brand footer li,
.english-tutor-brand footer .text-slate-500,
.english-tutor-brand footer .text-slate-400 {
  color: #aaaab3 !important;
}

.english-tutor-brand footer button,
.english-tutor-brand footer a {
  color: inherit;
}

.english-tutor-brand footer button:hover,
.english-tutor-brand footer a:hover,
.english-tutor-brand footer .hover\:text-brand-600:hover {
  color: #ff5261 !important;
}

.english-tutor-brand footer .border-slate-100 {
  border-color: #2e2e33 !important;
}

.english-tutor-brand footer a.rounded-full {
  border: 1px solid #3c3c42;
  background: #17171a !important;
}

/* Direction-aware details */
.english-tutor-brand [dir="rtl"] h1,
.english-tutor-brand [dir="rtl"] h2,
.english-tutor-brand [dir="rtl"] h3,
.english-tutor-brand [dir="rtl"] h4 {
  font-family: "Noto Kufi Arabic", "Google Sans", Arial, sans-serif;
  letter-spacing: 0 !important;
}

.english-tutor-brand [dir="rtl"] main > div > section:first-child::before {
  right: 0;
  left: auto;
}

/* Motion and responsive refinement */
@media (prefers-reduced-motion: reduce) {
  .english-tutor-brand *,
  .english-tutor-brand *::before,
  .english-tutor-brand *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .english-tutor-brand header nav.hidden.lg\:flex,
  .english-tutor-brand header .hidden.lg\:flex.items-center {
    display: none !important;
  }

  .english-tutor-brand header .lg\:hidden.flex.items-center {
    display: flex !important;
  }

  .english-tutor-brand header .lg\:hidden.absolute,
  .english-tutor-brand header .lg\:hidden.fixed {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .english-tutor-brand header .h-20 {
    height: 4.75rem;
  }

  .english-tutor-brand main > div > section:first-child::before {
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 0.35rem;
  }

  .english-tutor-brand main > div > section:first-child .lg\:col-span-6:last-child > div {
    box-shadow: 5px 5px 0 rgba(10, 10, 12, 0.95) !important;
  }
}

@media (max-width: 639px) {
  .english-tutor-brand header .cursor-pointer > .w-8.h-8.bg-brand-600 {
    width: 2.4rem !important;
    height: 2.4rem !important;
    flex-basis: 2.4rem;
    background-position: -23px -19px !important;
    background-size: 86px 86px !important;
  }

  .english-tutor-brand header .cursor-pointer > span.font-bold.text-2xl {
    max-width: 8.6rem;
    font-size: 0.88rem !important;
    letter-spacing: 0.1em !important;
  }

  .english-tutor-brand main section h1 {
    max-width: 100%;
    font-size: clamp(2.65rem, 12vw, 3.65rem) !important;
    line-height: 1.03 !important;
  }

  .english-tutor-brand main section h2 {
    font-size: clamp(1.95rem, 8.5vw, 2.55rem) !important;
  }

  .english-tutor-brand main .py-24 {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .english-tutor-brand main .p-10,
  .english-tutor-brand main .p-8 {
    padding: 1.5rem;
  }

  .english-tutor-brand footer .py-16 {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }
}

/* WordPress admin bar offset */
body.admin-bar.english-tutor-brand header.sticky { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar.english-tutor-brand header.sticky { top: 46px; }
}