/* =========================================================================
   theme.css  —  Custom CSS (works alongside Tailwind utilities)
   How to use:
   1) Put this file at /assets/theme.css
   2) Add <link rel="stylesheet" href="/assets/theme.css"> in <head> of every page
   3) Remove any duplicate inline <style> blocks from pages after linking this

   Notes:
   - Tailwind utility classes still come from CDN or your build.
   - This file centralizes only the small custom bits you asked for.
   ========================================================================= */

/* ========== Brand Tokens (optional) ===================================== */
:root {
  --canvas: #f6f5f3;
  /* Page background */
  --accent: #e11d48;
  /* Rose-600 */
  --border: rgb(228 228 231);
  /* Zinc-200-ish */
  --text-weak: rgb(113 113 122);
  /* Zinc-500-ish */
}

/* ========== Typography helpers ========================================== */
.icon {
  width: 18px;
  height: 18px;
}

.icon-xl {
  width: 20px;
  height: 20px;
}

.kbd {
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: .5rem;
  padding: .125rem .375rem;
  font-size: .75rem;
}

/* ========== Decorative effects ========================================== */
/* Subtle star “twinkle” (used on the ★ glyph in headers) */
.twinkle {
  animation: twinkle 3.2s ease-in-out infinite;
}

@keyframes twinkle {
  50% {
    opacity: .45;
    transform: scale(.9) rotate(4deg);
  }
}

/* Blurred “cosmic” blobs that float gently behind content */
.blob {
  filter: blur(55px);
  opacity: .65;
  animation: floaty 18s ease-in-out infinite;
}

.blob:nth-child(2) {
  animation-delay: -6s;
}

.blob:nth-child(3) {
  animation-delay: -12s;
}

@keyframes floaty {
  0% {
    transform: translateY(0) translateX(0) scale(1);
  }

  33% {
    transform: translateY(-16px) translateX(12px) scale(1.05);
  }

  66% {
    transform: translateY(10px) translateX(-10px) scale(.97);
  }

  100% {
    transform: translateY(0) translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }
}

/* ========== Dropdown menus (hover buffer technique) ===================== */
/* Usage:
   <div class="relative group/dropdown">
     <button>Trigger</button>
     <div class="dropdown-outer">
       <div class="dropdown-panel">…links…</div>
     </div>
   </div>
   - Keeps menu open while moving cursor (no click). Keyboard works via focus-within.
*/
.dropdown-outer {
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: .5rem;
  /* pt-2 hover buffer */
  z-index: 40;
  display: none;
}

.group\/dropdown:hover>.dropdown-outer,
.group\/dropdown:focus-within>.dropdown-outer {
  display: block;
}

.dropdown-panel {
  min-width: 220px;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: #fff;
  padding: .5rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity .18s ease, transform .18s ease;
}

.group\/dropdown:hover .dropdown-panel,
.group\/dropdown:focus-within .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Popovers for Feature cards (hover detail) =================== */
/* Structure:
   <article class="group relative ...">
     ...
     <div class="popover">…</div>
   </article>
*/
.popover {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -0.25rem);
  z-index: 20;
  width: 18rem;
  /* ~w-72 */
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: #fff;
  padding: .75rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s linear;
}

.group:hover .popover,
.group:focus-within .popover {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -1rem);
}

.popover-arrow {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) rotate(45deg);
  width: .75rem;
  height: .75rem;
  background: #fff;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Edge-safety helpers (optional) */
.popover-left {
  left: 1rem;
  transform: translateY(-0.25rem);
}

.group:hover .popover-left,
.group:focus-within .popover-left {
  transform: translateY(-1rem);
}

/* ========== Blockquote accent (Origin Story) ============================ */
blockquote {
  border-left: 3px solid var(--accent);
  padding-left: .75rem;
  margin-left: .5rem;
}

.blockquotear {
  border-right: 3px solid var(--accent);
  padding-right: .75rem;
  margin-right: .5rem;
}

/* ========== Small form polish (Contact / Sign-in) ======================= */
.input {
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  /* text-sm */
  background: #fff;
  outline: none;
}

.input:focus {
  border-color: rgb(244 63 94 / .6);
  /* rose-500-ish */
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12);
}

.textarea {
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  background: #fff;
  min-height: 7rem;
  outline: none;
  resize: vertical;
}

.textarea:focus {
  border-color: rgb(244 63 94 / .6);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12);
}

/* ========== Utilities =================================================== */
.is-hidden {
  display: none !important;
}

/* RTL list padding helper (apply a .rtl class to a container if needed) */
.rtl .list-pad {
  padding-right: 1rem;
  padding-left: 0;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.orbit-spin {
  animation: spin-slow 14s linear infinite;
  transform-origin: center;
}

/* Font stacks */
.font-english-sans {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.font-english-serif {
  font-family: "Merriweather", Georgia, serif;
}

.font-ar {
  font-family: "Tajawal", "Geeza Pro", "Noto Kufi Arabic", system-ui, sans-serif;
}

.border-brand {
  border-color: var(--brand-border) !important;
}

.border-brand-soft {
  border-color: var(--brand-border-soft) !important;
}

.focus-ring-brand:focus {
  box-shadow: 0 0 0 3px var(--brand-ring);
  outline: none;
}

.back_bod {
  background-color: #f6f5f3;
}

.text-field-fill {
  background-color: #f3f2f1;
}

.hand-drawn-line {
  /* Remove any default margin or padding that might interfere */
  padding-bottom: 5px;
  background-image: url('hand-drawn-underline.png');
  background-repeat: no-repeat;
  /* Adjust these properties to position and size the line correctly */
  background-position: bottom center;
  background-size: 100% 10px;
  /* 100% width, 10px height for the line */
}

.custom-underline {
  /* Crucial for containing the absolute-positioned line */
  position: relative;
  /* Makes sure the container only spans the text width */
  display: inline-block;
}

.custom-underline::after {
  content: "";
  display: block;
  position: absolute;
  /* Position the line just underneath the text */
  bottom: 0;
  left: -5px;
  right: -5px;

  /* Set the color and thickness */
  height: 3px;
  background-color: #be185d;
  /* or any color you like */

  /* The "Hand-Drawn" effect */
  /* Adds a slight, imperfect rotation */
  transform: skew(-1deg, -1deg) rotate(-0.5deg);
  /* Optionally, you can add a border-radius for a slightly rounded, pen-like end */
  border-radius: 50%;

  /* Adds a hand-drawn shadow effect - optional */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}

.custom-underline-mirrored {
  /* Crucial for containing the absolute-positioned line */
  position: relative;
  /* Makes sure the container only spans the text width */
  display: inline-block;


}

.custom-underline-mirrored::after {
  content: "";
  display: block;
  position: absolute;

  /* Positioning remains the same */
  bottom: 0;
  left: -5px;
  right: -5px;

  /* Appearance remains the same */
  height: 3px;
  background-color: #000;
  border-radius: 50%;
  background-color: #be185d;


  /* 🎨 The Mirrored "Hand-Drawn" effect 🎨 */
  /* Positive values for rotation and skew to mirror the angle */
  transform: skew(1deg, 1deg) rotate(0.5deg);

  box-shadow: -1px 1px 0px rgba(0, 0, 0, 0.2);
  /* Mirrored shadow */
}

/* Tiny accent underline */
.accent-underline {
  background-image: linear-gradient(to right, var(--brand), var(--brand));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

/* Form Gmail-only hint (pure CSS helper for :invalid) */
input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  /* red-500 */
}

.kbd {
  border: 1px solid rgb(228 228 231);
  border-bottom-width: 2px;
  border-radius: .5rem;
  padding: .125rem .375rem;
  font-size: .75rem
}

.term:hover .copy {
  opacity: 1
}

mark {
  background: rgba(225, 29, 72, .12);
  padding: .05rem .25rem;
  border-radius: .25rem
}