/* =========================================================
   QARAR Enterprise v19.1.3 — UI/UX Consistency Layer
   Safe final override. No template structure is changed.
   ========================================================= */

:root{
  --qarar-space-1:4px;
  --qarar-space-2:8px;
  --qarar-space-3:12px;
  --qarar-space-4:16px;
  --qarar-space-5:20px;
  --qarar-space-6:24px;
  --qarar-space-8:32px;
  --qarar-space-10:40px;
  --qarar-space-12:48px;
  --qarar-control-h:46px;
  --qarar-content-max:1280px;
  --qarar-text-xs:.78rem;
  --qarar-text-sm:.9rem;
  --qarar-text-md:1rem;
  --qarar-text-lg:1.125rem;
  --qarar-text-xl:1.35rem;
  --qarar-text-2xl:clamp(1.65rem,2.8vw,2.35rem);
  --qarar-text-3xl:clamp(2rem,4vw,3.15rem);
  --qarar-focus:0 0 0 3px rgba(190,22,34,.16);
}

/* Global rhythm */
html{scroll-behavior:smooth}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
.container{width:min(calc(100% - 32px),var(--qarar-content-max));margin-inline:auto}
main{min-width:0}
img,svg,video,iframe{max-width:100%}
img{height:auto}
.entry-content>*:first-child,.section-page-content>*:first-child{margin-top:0}
.entry-content>*:last-child,.section-page-content>*:last-child{margin-bottom:0}
.entry-content :where(p,ul,ol,blockquote),.section-page-content :where(p,ul,ol,blockquote){margin-block:0 1.1em}
.entry-content :where(h2,h3,h4),.section-page-content :where(h2,h3,h4){margin-block:1.65em .65em}
.entry-content h2,.section-page-content h2{font-size:clamp(1.35rem,2vw,1.75rem)}
.entry-content h3,.section-page-content h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}

/* Unified headings */
.internal-heading{padding-block:clamp(30px,5vw,62px)}
.internal-heading h1{font-size:var(--qarar-text-3xl);line-height:1.25;margin:0}
.section-heading-v3,.section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--qarar-space-5);margin-bottom:var(--qarar-space-8)}
.section-heading-v3 h2,.section-heading h2{font-size:var(--qarar-text-2xl);line-height:1.3;margin:0}

/* Buttons and action links */
:where(.btn,.button,.wp-element-button,button[type=submit],input[type=submit],.read-more,.card-action){
  min-height:var(--qarar-control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 18px;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  white-space:normal;
}
:where(.btn,.button,.wp-element-button,button,input[type=submit]):disabled,
:where(.btn,.button,.wp-element-button,button,input[type=submit])[aria-disabled=true]{
  opacity:.55;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}
:where(.btn,.button,.wp-element-button,button,input,select,textarea,a):focus-visible{
  outline:2px solid var(--qarar-primary);
  outline-offset:2px;
  box-shadow:var(--qarar-focus);
}

/* Cards */
body:not(.page-template-page-media-center) :where(
.content-card,.program-card-v3,.partner-card,.qarar-card,.event-card,.job-card,
.publication-card,.project-card,.expert-card,.news-card,.research-card,.opportunity-card
){
  overflow:hidden;
  min-width:0;
}
body:not(.page-template-page-media-center) :where(
.content-card,.program-card-v3,.partner-card,.qarar-card,.event-card,.job-card,
.publication-card,.project-card,.expert-card,.news-card,.research-card,.opportunity-card
) :where(h2,h3,h4,p){
  overflow-wrap:anywhere;
}
body:not(.page-template-page-media-center) :where(
.content-card,.program-card-v3,.partner-card,.qarar-card,.event-card,.job-card,
.publication-card,.project-card,.expert-card,.news-card,.research-card,.opportunity-card
) img{
  display:block;
  width:100%;
  object-fit:cover;
}

/* Forms */
body:not(.page-template-page-media-center) :where(
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],
input[type=time],input[type=number],input[type=password],input[type=search],
input[type=file],select,textarea
){
  width:100%;
  max-width:100%;
  font:inherit;
}
body:not(.page-template-page-media-center) textarea{min-height:130px;resize:vertical}
body:not(.page-template-page-media-center) :where(input,select,textarea)::placeholder{color:#98a2b3;opacity:1}
body:not(.page-template-page-media-center) :where(input,select,textarea):disabled{background:#f2f4f7;color:#667085;cursor:not-allowed}
body:not(.page-template-page-media-center) input[type=checkbox],
body:not(.page-template-page-media-center) input[type=radio]{width:18px;height:18px;accent-color:var(--qarar-primary)}
body:not(.page-template-page-media-center) form :where(.form-row,.field-group,.form-group){margin-bottom:var(--qarar-space-5)}
body:not(.page-template-page-media-center) form label{display:inline-block;margin-bottom:7px}

/* Tables */
body:not(.page-template-page-media-center) :where(.table-wrap,.table-responsive,.wp-block-table){
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body:not(.page-template-page-media-center) table{width:100%;border-collapse:collapse}
body:not(.page-template-page-media-center) :where(th,td){padding:13px 15px;text-align:right;vertical-align:middle}
body:not(.page-template-page-media-center) tbody tr{border-bottom:1px solid var(--qarar-gray-200)}
body:not(.page-template-page-media-center) tbody tr:hover{background:var(--qarar-gray-50)}

/* Breadcrumbs and pagination */
:where(.breadcrumbs,.breadcrumb,.qarar-breadcrumbs){
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:var(--qarar-text-sm);
  line-height:1.6;
}
:where(.breadcrumbs,.breadcrumb,.qarar-breadcrumbs) a{text-decoration:none}
:where(.pagination,.nav-links){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
:where(.page-numbers,.pagination a,.pagination span){
  min-width:42px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  text-decoration:none;
}

/* Alerts, badges and empty states */
:where(.alert,.notice,.empty-state,.qarar-message){padding:15px 18px;line-height:1.75}
:where(.badge,.status-badge,.qarar-badge){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  font-size:var(--qarar-text-xs);
  font-weight:800;
  line-height:1.5;
}

/* Layout safety */
:where(.internal-layout,.content-grid,.cards-grid,.projects-grid,.programs-grid,.publications-grid,.experts-grid)>*{min-width:0}
:where(.internal-layout,.content-grid,.cards-grid,.projects-grid,.programs-grid,.publications-grid,.experts-grid){max-width:100%}
:where(.modal,.dialog,.popup,.qarar-modal){max-width:min(92vw,760px);max-height:88vh;overflow:auto}
:where(.modal-overlay,.popup-overlay){padding:20px}

/* Accessible skip link */
.skip-link{
  position:fixed;
  inset-inline-start:16px;
  top:12px;
  z-index:999999;
  transform:translateY(-160%);
  background:#fff;
  color:var(--qarar-primary);
  border:2px solid var(--qarar-primary);
  border-radius:8px;
  padding:10px 14px;
  font-weight:800;
}
.skip-link:focus{transform:translateY(0)}

/* Tablet */
@media(max-width:1024px){
  .internal-layout{grid-template-columns:1fr!important}
  :where(.institutional-sidebar,.inner-side-nav){position:static!important;width:100%!important}
  :where(.cards-grid,.projects-grid,.programs-grid,.publications-grid,.experts-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media(max-width:680px){
  :root{--qarar-control-h:44px}
  .container{width:min(calc(100% - 22px),var(--qarar-content-max))}
  .section-heading-v3,.section-heading{align-items:flex-start;flex-direction:column}
  :where(.cards-grid,.projects-grid,.programs-grid,.publications-grid,.experts-grid,.content-grid){
    grid-template-columns:1fr!important;
  }
  :where(.btn,.button,.wp-element-button,button[type=submit],input[type=submit]){
    max-width:100%;
  }
  :where(.modal-overlay,.popup-overlay){padding:10px}
  :where(.modal,.dialog,.popup,.qarar-modal){max-width:calc(100vw - 20px);max-height:92vh}
  body:not(.page-template-page-media-center) :where(th,td){padding:11px 12px;white-space:nowrap}
}

/* Motion preferences */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}