/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: Blocksy Child Theme customized for Droubna
Author: Droubna
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/


/* =========================================================
   DROUBNA DESIGN SYSTEM v1.0
   ========================================================= */


/* =========================================================
   01. LOCAL TAJAWAL FONT
   ========================================================= */

@font-face {
  font-family: "Tajawal";
  src: url("./fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("./fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("./fonts/tajawal/Tajawal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("./fonts/tajawal/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   02. GLOBAL DESIGN TOKENS
   ========================================================= */

:root {

  /* Colors */

  --dr-ink: #200D41;
  --dr-purple: #7A417B;
  --dr-plum: #461A3D;

  --dr-coral: #FF7669;
  --dr-orange: #FD9055;

  --dr-blush: #FDF2F4;
  --dr-rose: #E9D5DC;

  --dr-body: #62586B;
  --dr-white: #FFFFFF;


  /* Primary Gradient */

  --dr-primary-gradient:
    linear-gradient(
      90deg,
      #FD9055 0%,
      #FF7669 100%
    );

  --dr-primary-gradient-hover:
    linear-gradient(
      90deg,
      #F5874D 0%,
      #F66E62 100%
    );


  /* Typography */

  --dr-font:
    "Tajawal",
    "Noto Sans Arabic",
    "Segoe UI",
    Arial,
    sans-serif;


  /* Widths */

  --dr-container: 1180px;
  --dr-content: 720px;


  /* Spacing */

  --dr-space-1: 4px;
  --dr-space-2: 8px;
  --dr-space-3: 12px;
  --dr-space-4: 16px;
  --dr-space-5: 24px;
  --dr-space-6: 32px;
  --dr-space-7: 48px;
  --dr-space-8: 64px;
  --dr-space-9: 88px;
  --dr-space-10: 120px;


  /* Section Spacing */

  --dr-section-desktop: 88px;
  --dr-section-tablet: 72px;
  --dr-section-mobile: 56px;


  /* Radius */

  --dr-radius-sm: 8px;
  --dr-radius-control: 12px;
  --dr-radius-card: 16px;
  --dr-radius-container: 20px;
  --dr-radius-media: 24px;
  --dr-radius-pill: 999px;


  /* Shadows */

  --dr-shadow-sm:
    0 4px 14px rgba(32, 13, 65, 0.06);

  --dr-shadow-md:
    0 8px 28px rgba(32, 13, 65, 0.08);

  --dr-shadow-hover:
    0 14px 38px rgba(32, 13, 65, 0.10);


  /* Animation */

  --dr-transition:
    200ms cubic-bezier(.2, .8, .2, 1);


  /* Blocksy */

  --theme-font-family: var(--dr-font);
}


/* =========================================================
   03. GLOBAL BASE
   ========================================================= */

html {
  direction: rtl;
}

body {
  font-family: var(--dr-font) !important;

  color: var(--dr-body);
  background: var(--dr-white);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family: var(--dr-font) !important;
}


/* =========================================================
   04. LINKS
   ========================================================= */

a {
  color: var(--dr-purple);

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  transition:
    color var(--dr-transition);
}

a:hover {
  color: var(--dr-coral);
}


/* =========================================================
   05. TEXT SELECTION
   ========================================================= */

::selection {
  background: var(--dr-purple);
  color: var(--dr-white);
}

::-moz-selection {
  background: var(--dr-purple);
  color: var(--dr-white);
}


/* =========================================================
   06. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--dr-font) !important;
  color: var(--dr-ink);
  margin-top: 0;
}

h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.22;
}

h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.28;
}

h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
}

h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

.dr-display {
  font-family: var(--dr-font);

  font-size: 52px;
  font-weight: 800;
  line-height: 1.18;

  color: var(--dr-ink);
}

.dr-body-large {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;

  color: var(--dr-body);
}

.dr-small {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.dr-caption {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}


/* =========================================================
   07. CONTAINERS
   ========================================================= */

.dr-container {
  width:
    min(
      var(--dr-container),
      calc(100% - 48px)
    );

  margin-inline: auto;
}

.dr-content {
  width: 100%;
  max-width: var(--dr-content);
}

.dr-content--center {
  margin-inline: auto;
}


/* =========================================================
   08. SECTIONS
   ========================================================= */

.dr-section {
  padding-block: var(--dr-section-desktop);
}

.dr-section--white {
  background: var(--dr-white);
}

.dr-section--soft {
  background: var(--dr-blush);
}

.dr-section--purple {
  background: var(--dr-purple);
  color: var(--dr-white);
}

.dr-section--plum {
  background: var(--dr-plum);
  color: var(--dr-white);
}


/* =========================================================
   09. SECTION HEADERS
   ========================================================= */

.dr-section-head {
  display: flex;
  flex-direction: column;

  gap: var(--dr-space-3);

  margin-bottom: 40px;
}

.dr-section-head--center {
  max-width: var(--dr-content);

  margin-inline: auto;
  margin-bottom: 40px;

  text-align: center;
}

.dr-eyebrow {
  margin: 0;

  color: var(--dr-purple);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.dr-section-description {
  max-width: var(--dr-content);

  margin: 0;

  color: var(--dr-body);

  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
}


/* =========================================================
   10. GRID SYSTEM
   ========================================================= */

.dr-grid {
  display: grid;
  gap: 24px;
}

.dr-grid--3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.dr-grid--2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.dr-grid--1 {
  grid-template-columns:
    minmax(0, 1fr);
}


/* =========================================================
   11. GENERIC BUTTON SYSTEM
   ========================================================= */

.dr-btn {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding-inline: 24px;

  border:
    1px solid transparent;

  border-radius:
    var(--dr-radius-control);

  font-family:
    var(--dr-font) !important;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform var(--dr-transition),
    box-shadow var(--dr-transition),
    background-color var(--dr-transition),
    border-color var(--dr-transition),
    color var(--dr-transition);
}

.dr-btn:hover {
  transform: translateY(-1px);
}

.dr-btn:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px rgba(122, 65, 123, 0.20);
}


/* =========================================================
   12. PRIMARY BUTTON
   Gradient
   ========================================================= */

.dr-btn--primary {
  background:
    var(--dr-primary-gradient);

  color:
    var(--dr-white);

  border-color:
    transparent;
}

.dr-btn--primary:hover {
  background:
    var(--dr-primary-gradient-hover);

  color:
    var(--dr-white);

  border-color:
    transparent;
}


/* =========================================================
   13. SECONDARY BUTTON
   ========================================================= */

.dr-btn--secondary {
  background:
    var(--dr-white);

  color:
    var(--dr-purple);

  border-color:
    var(--dr-purple);
}

.dr-btn--secondary:hover {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);

  border-color:
    var(--dr-purple);
}


/* =========================================================
   14. BRAND BUTTON
   ========================================================= */

.dr-btn--brand {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);

  border-color:
    var(--dr-purple);
}

.dr-btn--brand:hover {
  background:
    var(--dr-plum);

  color:
    var(--dr-white);

  border-color:
    var(--dr-plum);
}


/* =========================================================
   15. ELEMENTOR BUTTON SUPPORT
   ========================================================= */

/*
 Elementor adds CSS classes to the widget wrapper,
 not directly to the <a> button.
*/

.elementor-widget-button.dr-btn {
  display: block;

  min-height: 0;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;

  transform: none;
}

.elementor-widget-button.dr-btn:hover {
  transform: none;
}

.elementor-widget-button.dr-btn .elementor-button {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 24px;

  border:
    1px solid transparent;

  border-radius:
    var(--dr-radius-control);

  font-family:
    var(--dr-font) !important;

  font-size: 16px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
  text-decoration: none;

  box-shadow: none;

  transition:
    transform var(--dr-transition),
    box-shadow var(--dr-transition),
    background var(--dr-transition),
    background-color var(--dr-transition),
    border-color var(--dr-transition),
    color var(--dr-transition);
}

.elementor-widget-button.dr-btn .elementor-button:hover {
  transform:
    translateY(-1px);
}


/* Elementor Primary */

.elementor-widget-button.dr-btn--primary .elementor-button {
  background:
    var(--dr-primary-gradient);

  color:
    var(--dr-white);

  border-color:
    transparent;
}

.elementor-widget-button.dr-btn--primary .elementor-button:hover {
  background:
    var(--dr-primary-gradient-hover);

  color:
    var(--dr-white);

  border-color:
    transparent;
}


/* Elementor Secondary */

.elementor-widget-button.dr-btn--secondary .elementor-button {
  background:
    var(--dr-white);

  color:
    var(--dr-purple);

  border-color:
    var(--dr-purple);
}

.elementor-widget-button.dr-btn--secondary .elementor-button:hover {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);

  border-color:
    var(--dr-purple);
}


/* Elementor Brand */

.elementor-widget-button.dr-btn--brand .elementor-button {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);

  border-color:
    var(--dr-purple);
}

.elementor-widget-button.dr-btn--brand .elementor-button:hover {
  background:
    var(--dr-plum);

  color:
    var(--dr-white);

  border-color:
    var(--dr-plum);
}


/* =========================================================
   16. CARD SYSTEM
   ========================================================= */

.dr-card {
  background:
    var(--dr-white);

  border:
    1px solid rgba(122, 65, 123, 0.14);

  border-radius:
    var(--dr-radius-card);

  padding:
    32px;

  box-shadow:
    var(--dr-shadow-sm);

  transition:
    transform var(--dr-transition),
    box-shadow var(--dr-transition),
    border-color var(--dr-transition);
}

.dr-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--dr-shadow-hover);
}


/* Feature Card */

.dr-card--feature {
  border-radius:
    var(--dr-radius-container);

  border-color:
    rgba(255, 118, 105, 0.45);

  box-shadow:
    var(--dr-shadow-md);
}


/* CTA Card */

.dr-card--cta {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);

  border:
    1px solid transparent;

  border-radius:
    var(--dr-radius-container);

  box-shadow:
    var(--dr-shadow-md);
}

.dr-card--cta h1,
.dr-card--cta h2,
.dr-card--cta h3,
.dr-card--cta h4,
.dr-card--cta h5,
.dr-card--cta h6 {
  color:
    var(--dr-white);
}

.dr-card--cta p {
  color:
    rgba(255, 255, 255, 0.88);
}


/* Testimonial Card */

.dr-card--testimonial {
  background:
    var(--dr-white);

  border:
    1px solid rgba(122, 65, 123, 0.14);

  border-radius:
    var(--dr-radius-card);

  padding:
    32px;

  box-shadow:
    var(--dr-shadow-sm);
}


/* =========================================================
   17. BADGES
   ========================================================= */

.dr-badge {
  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    6px 14px;

  border:
    1px solid transparent;

  border-radius:
    var(--dr-radius-pill);

  background:
    var(--dr-blush);

  color:
    var(--dr-purple);

  font-family:
    var(--dr-font);

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.2;
}


/* Active */

.dr-badge--active {
  background:
    var(--dr-purple);

  color:
    var(--dr-white);
}


/* Coming Soon */

.dr-badge--coming {
  background:
    var(--dr-blush);

  color:
    var(--dr-body);

  border-color:
    var(--dr-rose);
}


/* =========================================================
   18. MEDIA
   ========================================================= */

.dr-media {
  overflow:
    hidden;

  border-radius:
    var(--dr-radius-media);
}

.dr-media img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================================
   19. ELEMENTOR TYPOGRAPHY
   ========================================================= */

.elementor-widget-heading,
.elementor-widget-text-editor,
.elementor-widget-button,
.elementor-button,
.elementor-button-text {
  font-family:
    var(--dr-font) !important;
}


/* =========================================================
   20. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible {
  outline:
    3px solid rgba(122, 65, 123, 0.25);

  outline-offset:
    3px;
}


/* =========================================================
   21. TABLET
   ========================================================= */

@media (max-width: 1179px) {

  .dr-section {
    padding-block:
      var(--dr-section-tablet);
  }

  .dr-grid {
    gap:
      20px;
  }

  .dr-grid--3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .dr-display {
    font-size:
      44px;
  }

}


/* =========================================================
   22. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .dr-container {
    width:
      calc(100% - 36px);
  }


  /* Section */

  .dr-section {
    padding-block:
      var(--dr-section-mobile);
  }


  /* Typography */

  .dr-display {
    font-size:
      36px;

    line-height:
      1.22;
  }

  h1 {
    font-size:
      36px;
  }

  h2 {
    font-size:
      28px;
  }

  h3 {
    font-size:
      22px;
  }


  /* Section Header */

  .dr-section-head,
  .dr-section-head--center {
    margin-bottom:
      36px;
  }


  /* Grid */

  .dr-grid {
    gap:
      16px;
  }

  .dr-grid--3,
  .dr-grid--2 {
    grid-template-columns:
      1fr;
  }


  /* Cards */

  .dr-card,
  .dr-card--testimonial {
    padding:
      24px;
  }


  /* Generic Buttons */

  .dr-btn:not(.elementor-widget-button) {
    width:
      100%;
  }


  /* Elementor Buttons */

  .elementor-widget-button.dr-btn {
    width:
      100%;
  }

  .elementor-widget-button.dr-btn .elementor-button {
    width:
      100%;

    min-height:
      50px;
  }

}


/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}