/* ==========================================================
   Circlewide Immigration - Logo based theme
   Logo colours: deep blue (#0B3F91) + soft grey (#9A9A9A)
   Is file ko sabse last me load kiya gaya hai (includes/head.php),
   isliye purane theme colours override ho jate hain.
   Colour badalna ho to sirf neeche :root ke variables edit karein.
   ========================================================== */
:root {
  --cw-blue:        #0B3F91;  /* logo main blue  -> primary-light (buttons, links, accents) */
  --cw-navy:        #0A2A5E;  /* headings        -> primary-dark */
  --cw-navy-deep:   #081F45;  /* darkest         -> secondary-dark */
  --cw-navy-mid:    #1B3A73;  /* hover / nav     -> secondary-medium */
  --cw-tint:        #DCE6F7;  /* soft blue tint  -> primary (card hover, borders) */
  --cw-tint-light:  #EEF3FB;  /* very light blue -> secondary-light */
  --cw-text:        #4F5B6B;  /* body text grey  -> textColor-dark */
  --cw-grey:        #9A9A9A;  /* logo grey       -> textColor-light */
  --cw-card:        rgba(238,243,251,.85); /* bgOpacity */
}

/* ---- text ---- */
.text-primary-light, .hover\:text-primary-light:hover, .group:hover .group-hover\:text-primary-light { color: var(--cw-blue) !important; }
.text-primary-dark   { color: var(--cw-navy) !important; }
.text-secondary-dark { color: var(--cw-navy-deep) !important; }
.text-secondary-medium, .hover\:text-secondary-medium:hover { color: var(--cw-navy-mid) !important; }
.text-secondary-light { color: var(--cw-tint-light) !important; }
.text-textColor-dark, .dark\:text-textColor-dark, .placeholder\:text-textColor-dark::placeholder { color: var(--cw-text) !important; }
.text-textColor-light { color: var(--cw-grey) !important; }

/* ---- background ---- */
.bg-primary-light, .hover\:bg-primary-light:hover, .group:hover .group-hover\:bg-primary-light { background-color: var(--cw-blue) !important; }
.hs-accordion.active .hs-accordion-active\:bg-primary-light { background-color: var(--cw-blue) !important; }
.bg-primary, .hover\:bg-primary:hover { background-color: var(--cw-tint) !important; }
.bg-secondary-medium, .hover\:bg-secondary-medium:hover, .group:hover .group-hover\:bg-secondary-medium { background-color: var(--cw-navy-mid) !important; }
.bg-secondary-dark, .hover\:bg-secondary-dark:hover { background-color: var(--cw-navy-deep) !important; }
.bg-secondary-light, .hover\:bg-secondary-light:hover { background-color: var(--cw-tint-light) !important; }
.bg-bgOpacity { background-color: var(--cw-card) !important; }

/* ---- border ---- */
.border-primary-light { border-color: #f2f2f2  !important; }
.border-primary { border-color: var(--cw-tint) !important; }
.border-secondary-medium { border-color: var(--cw-navy-mid) !important; }
.border-textColor-dark { border-color: var(--cw-text) !important; }

/* ---- misc ---- */
::selection { background: var(--cw-blue); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: var(--cw-blue); }
input:focus, textarea:focus, select:focus { border-color: var(--cw-blue) !important; }
.swiper-pagination-bullet-active { background: var(--cw-blue) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--cw-blue) !important; }

/* ==========================================================
   Dark-blue sections: blue text was invisible on blue background.
   Yaha accent text ko light-blue kar diya (white cards ke andar original blue rahega).
   ========================================================== */
:root { --cw-blue-on-dark: #8DB8FF; }

.text-white .text-primary-light,
.bg-secondary-medium .text-primary-light,
.bg-secondary-dark .text-primary-light { color: #f8f8f8 !important; }

.bg-secondary-medium .text-primary-dark,
.bg-secondary-dark .text-primary-dark { color: #fff !important; }
.bg-secondary-medium .text-secondary-dark,
.bg-secondary-dark .text-secondary-dark { color: var(--cw-tint-light) !important; }
.bg-secondary-medium .text-textColor-dark { color: #D3DEF2 !important; }

/* white cards inside dark sections -> original colours wapas */
.bg-white .text-primary-light,
.bg-white.text-primary-light { color: var(--cw-blue) !important; }
.bg-white .text-primary-dark { color: var(--cw-navy) !important; }
.bg-white .text-secondary-dark { color: var(--cw-navy-deep) !important; }
.bg-white .text-textColor-dark { color: var(--cw-text) !important; }
.bg-white .text-secondary-light { color: var(--cw-navy-mid) !important; }