/*
Theme Name:   Umma Library Child
Theme URI:    https://library.umma.ac.ke/
Description:  Child theme for the Dr. Abdulrahman Al-Sumait Library site (parent: umma-library-v5.7). Adds a white, bold-text live chat widget, a homepage image carousel, tidy dropdown menus, an IL/DL Session Recordings page, and general UX polish — without touching the parent theme.
Author:       Umma University Library
Template:     umma-library-v5.7
Version:      1.1.0
Text Domain:  umma-library-child
*/

/* ==========================================================================
   1. GLOBAL — spelling/typography note
   British English is applied throughout the text you add via WordPress
   (organise, colour, centre, programme, enrolment, whilst, etc.). CSS itself
   has no language, so this file only affects layout, colour and weight.
   ========================================================================== */

:root{
  --umma-navy:#002049;
  --umma-navy-dark:#00152f;
  --umma-gold:#c8a24a;
  --umma-white:#ffffff;
  --umma-text-dark:#1a1a1a;
  --umma-border:#e4e7ec;
  --umma-radius:12px;
  --umma-font-base:18px;
}

/* ==========================================================================
   1a. READABILITY — larger base type sitewide, plus a cleaner white
   background on the main content sections (not the hero/carousel, which
   carries its own imagery).
   ========================================================================== */

body{ font-size:var(--umma-font-base); line-height:1.6; }

p, li, a, span, .elementor-widget-text-editor{ font-size:1rem; }

h1{ font-size:clamp(2.1rem,4vw,3rem); }
h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.5rem); }

h1, h2, h3, h4{ font-weight:700; color:var(--umma-navy); }

main, .site-main, .elementor-section:not(.umma-carousel):not([class*="hero"]){
  background-color:var(--umma-white);
}

/* ==========================================================================
   2. LIVE CHAT WIDGET — white background, bold legible text
   These selectors cover the most common chat-plugin markup patterns
   (Tidio / Crisp / generic "Team Online" widget seen on the live site).
   If your chat provider uses different class names, open the widget with
   the browser inspector, copy the outer container's class, and add it to
   the comma-separated selector list below — everything else stays the same.
   ========================================================================== */

.chat-widget,
.chat-widget-window,
.chat-widget-panel,
.tidio-chat,
#tidio-chat-iframe,
.crisp-client .cc-1m2mf,
.crisp-client .cc-kv6t,
.live-chat-window,
.live-chat-container{
  background:var(--umma-white) !important;
}

.chat-widget *,
.chat-widget-window *,
.live-chat-window *,
.live-chat-container *{
  font-weight:600 !important;
  color:var(--umma-text-dark) !important;
}

/* Keep sender bubbles / buttons readable against the navy brand colour */
.chat-widget .chat-bubble--outgoing,
.chat-widget .chat-message--outgoing,
.live-chat-window .message--sent{
  background:var(--umma-navy) !important;
  color:var(--umma-white) !important;
  font-weight:600 !important;
  border-radius:var(--umma-radius);
}

.chat-widget .chat-bubble--incoming,
.chat-widget .chat-message--incoming,
.live-chat-window .message--received{
  background:#f4f6f9 !important;
  color:var(--umma-text-dark) !important;
  font-weight:600 !important;
  border-radius:var(--umma-radius);
  border:1px solid var(--umma-border);
}

.chat-widget input,
.chat-widget textarea,
.live-chat-window input,
.live-chat-window textarea{
  background:var(--umma-white) !important;
  font-weight:600 !important;
}

.chat-widget-header,
.live-chat-header{
  background:var(--umma-white) !important;
  color:var(--umma-navy) !important;
  font-weight:700 !important;
  border-bottom:1px solid var(--umma-border);
}

/* Our own AI assistant widget (added by inc/ai-chat-widget.php) */
#umma-ai-chat{
  position:fixed;
  right:24px;
  bottom:24px;
  width:360px;
  max-width:92vw;
  z-index:9999;
  font-family:inherit;
}

#umma-ai-chat.is-collapsed .umma-ai-chat__panel{ display:none; }

#umma-ai-chat__toggle{
  background:var(--umma-navy);
  color:var(--umma-white);
  font-weight:700;
  border:none;
  border-radius:999px;
  padding:14px 20px;
  box-shadow:0 8px 24px rgba(0,32,73,.25);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

.umma-ai-chat__panel{
  background:var(--umma-white);
  border-radius:var(--umma-radius);
  box-shadow:0 12px 40px rgba(0,32,73,.22);
  border:1px solid var(--umma-border);
  overflow:hidden;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  height:480px;
}

.umma-ai-chat__header{
  background:var(--umma-navy);
  color:var(--umma-white);
  font-weight:700;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.umma-ai-chat__messages{
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:var(--umma-white);
}

.umma-ai-chat__msg{
  font-weight:600;
  font-size:1rem;
  line-height:1.5;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:var(--umma-radius);
  max-width:85%;
}

.umma-ai-chat__msg--bot{
  background:#f4f6f9;
  color:var(--umma-text-dark);
  border:1px solid var(--umma-border);
}

.umma-ai-chat__msg--bot a{
  color:var(--umma-navy);
  font-weight:700;
  text-decoration:underline;
}

.umma-ai-chat__msg--user{
  background:var(--umma-navy);
  color:var(--umma-white);
  margin-left:auto;
}

.umma-ai-chat__form{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--umma-border);
  background:var(--umma-white);
}

.umma-ai-chat__form input{
  flex:1;
  border:1px solid var(--umma-border);
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
}

.umma-ai-chat__form button{
  background:var(--umma-navy);
  color:var(--umma-white);
  border:none;
  border-radius:999px;
  padding:10px 18px;
  font-weight:700;
  cursor:pointer;
}

/* ==========================================================================
   3. HOMEPAGE CAROUSEL — sits directly under the main menu
   ========================================================================== */

.umma-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  line-height:0;
}

.umma-carousel__track{
  display:flex;
  transition:transform .7s ease-in-out;
}

.umma-carousel__slide{
  min-width:100%;
  position:relative;
}

.umma-carousel__slide img{
  width:100%;
  height:clamp(220px,32vw,460px);
  object-fit:cover;
  display:block;
}

.umma-carousel__caption{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:18px 28px;
  background:linear-gradient(180deg,rgba(0,32,73,0) 0%,rgba(0,32,73,.78) 100%);
  color:var(--umma-white);
  font-weight:700;
  font-size:1.05rem;
}

.umma-carousel__dots{
  position:absolute;
  bottom:14px;
  right:24px;
  display:flex;
  gap:8px;
}

.umma-carousel__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:none;
  cursor:pointer;
  padding:0;
}

.umma-carousel__dot.is-active{ background:var(--umma-white); }

/* ==========================================================================
   4. DROPDOWN / MEGA MENU — clean, accessible, keyboard-friendly
   ========================================================================== */

.umma-menu li.menu-item-has-children{ position:relative; }

.umma-menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:var(--umma-white);
  border:1px solid var(--umma-border);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 28px rgba(0,32,73,.14);
  padding:8px 0;
  z-index:200;
}

.umma-menu li.menu-item-has-children:hover > .sub-menu,
.umma-menu li.menu-item-has-children:focus-within > .sub-menu{
  display:block;
}

.umma-menu .sub-menu a{
  display:block;
  padding:10px 18px;
  font-weight:600;
  color:var(--umma-navy);
  white-space:nowrap;
}

.umma-menu .sub-menu a:hover{
  background:#f4f6f9;
  color:var(--umma-gold);
}

/* Accordion dropdowns used on the IL/DL Recordings page and Research Guides */
.umma-accordion{ border:1px solid var(--umma-border); border-radius:var(--umma-radius); overflow:hidden; margin-bottom:14px; }

.umma-accordion__trigger{
  width:100%;
  text-align:left;
  background:var(--umma-white);
  border:none;
  padding:16px 20px;
  font-weight:700;
  font-size:1rem;
  color:var(--umma-navy);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.umma-accordion__trigger:hover{ background:#f4f6f9; }

.umma-accordion__trigger .umma-accordion__icon{ transition:transform .25s ease; font-weight:700; }

.umma-accordion.is-open .umma-accordion__icon{ transform:rotate(45deg); }

.umma-accordion__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background:#fbfcfe;
}

.umma-accordion.is-open .umma-accordion__panel{ max-height:2000px; }

.umma-accordion__body{ padding:4px 20px 18px; font-weight:500; }

.umma-recording{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--umma-border);
}

.umma-recording:last-child{ border-bottom:none; }

.umma-recording__title{ font-weight:700; color:var(--umma-text-dark); }
.umma-recording__meta{ font-weight:500; color:#5b6675; font-size:.9rem; }

.umma-recording__link{
  background:var(--umma-navy);
  color:var(--umma-white) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  padding:8px 16px;
  border-radius:999px;
  white-space:nowrap;
}

/* ==========================================================================
   5. ICON CLEAN-UP — hide empty/placeholder social icons ("#" links) and
   duplicate accessibility triggers that clutter the header/footer.
   Remove a line below if you actually wire that icon up to a real link.
   ========================================================================== */

footer a[href="#"]{ display:none !important; }
.header-social-icons a[href="#"]{ display:none !important; }

/* ==========================================================================
   6. GENERAL UX POLISH
   ========================================================================== */

body{ -webkit-font-smoothing:antialiased; }

a{ transition:color .15s ease, background-color .15s ease; }

.btn, button, input[type="submit"]{ border-radius:8px; }

::selection{ background:var(--umma-gold); color:var(--umma-white); }

@media (max-width:782px){
  #umma-ai-chat{ right:12px; bottom:12px; width:92vw; }
  .umma-carousel__caption{ font-size:.9rem; padding:12px 16px; }
}