/* SRG Pharmaceuticals — site stylesheet.
   Base reset, ported design-system components (Button / Tag / Input / Select),
   hover states lifted out of the design's style-hover attributes, and the
   responsive rules the desktop design layer needs on tablet/phone. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:var(--fw-body);
  color:var(--text-heading);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%}
a{color:inherit}
/* The design keeps layout in inline styles, and an inline `display` beats the
   browser's own `[hidden]{display:none}` rule. Without !important here, a
   hidden element carrying `style="display:grid"` — the mega-menu panels, for
   one — stays on screen. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.skip-link{position:fixed;left:8px;top:8px;z-index:100;background:var(--color-primary);color:var(--text-inverse);padding:10px 16px;font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transform:translateY(-200%);transition:transform var(--duration-fast)}
.skip-link:focus{transform:translateY(0)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Button (ported from components/core/Button.jsx) ---------- */
.btn{
  font-family:var(--font-sans);font-weight:500;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;border-radius:var(--radius-md);cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid transparent;
}
.btn-sm{padding:8px 16px;font-size:11px}
.btn-md{padding:12px 24px;font-size:12.5px}
.btn-lg{padding:15px 32px;font-size:13.5px}
.btn-primary{background:linear-gradient(135deg,var(--srg-teal) 0%,var(--srg-sage) 100%);color:var(--text-inverse)}
.btn-accent{background:linear-gradient(135deg,var(--srg-terracotta) 0%,var(--srg-sand) 100%);color:#fff}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-ghost{background:transparent;color:var(--text-heading)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,89,76,.22)}
.btn-primary:hover{background:linear-gradient(135deg,var(--srg-sage) 0%,var(--srg-teal) 100%)}
.btn-accent:hover{background:linear-gradient(135deg,var(--srg-sand) 0%,var(--srg-terracotta) 100%)}
.btn-outline:hover{background:var(--color-primary);color:var(--text-inverse)}
.btn-ghost:hover{background:rgba(0,89,76,.08);color:var(--color-primary)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* category table filter buttons: outline by default, primary when active */
.btn-filter{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-filter:hover{background:var(--color-primary);color:var(--text-inverse)}
.btn-filter.is-active{background:linear-gradient(135deg,var(--srg-teal) 0%,var(--srg-sage) 100%);color:var(--text-inverse);border-color:transparent}
.btn-filter.is-active:hover{background:linear-gradient(135deg,var(--srg-sage) 0%,var(--srg-teal) 100%)}

/* ---------- Tag (components/core/Tag.jsx) ---------- */
.tag{
  display:inline-block;font-family:var(--font-sans);font-size:9.5px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);
  background:rgba(18,33,30,.08);color:var(--text-heading);
}
.tag-primary{background:rgba(0,89,76,.12);color:var(--color-primary)}
.tag-accent{background:rgba(200,98,60,.12);color:var(--color-accent)}
.tag-neutral{background:rgba(18,33,30,.08);color:var(--text-heading)}
.tag-success{background:rgba(42,122,95,.12);color:var(--srg-confirm-green)}

/* ---------- Input / Select (components/forms/*.jsx) ---------- */
.field{display:block;font-family:var(--font-sans)}
.field-label{font-size:9.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-body-secondary);margin-bottom:8px}
.field-input{
  width:100%;font-family:var(--font-sans);font-size:13px;font-weight:300;color:var(--text-heading);
  padding:12px 14px;border-radius:var(--radius-md);background:var(--surface-card);
  border:1px solid var(--border-soft);outline:none;
  transition:border-color var(--duration-fast);
}
.field-input:focus{border-color:var(--color-primary)}
textarea.field-input{resize:vertical;min-height:120px;line-height:1.7}
select.field-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2362675F' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field-error{display:block;margin-top:6px;font-size:11px;color:var(--color-accent)}
.form-note{font-size:11px;font-weight:300;line-height:1.7;color:var(--text-body-secondary)}
.form-status{margin-top:16px;padding:14px 16px;border-radius:var(--radius-md);font-size:12.5px;font-weight:300;line-height:1.7}
.form-status.is-ok{background:rgba(42,122,95,.1);color:var(--srg-confirm-green);border:1px solid rgba(42,122,95,.25)}
.form-status.is-error{background:rgba(200,98,60,.1);color:var(--color-accent);border:1px solid rgba(200,98,60,.25)}

/* ---------- image slots ---------- */
.img-slot{display:block;background:rgba(0,89,76,.06)}
.img-slot-empty{background:rgba(0,89,76,.06);border:1px dashed var(--border-subtle)}

/* ---------- nav ---------- */
.nav-item{background:none;border:none;font:inherit;color:inherit}
.nav-panel-link:hover{color:var(--color-accent)}
.nav-toggle{display:none}
.lang-btn{background:none;border:none;cursor:pointer;padding:4px 2px;font-size:11px;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;font-family:var(--font-sans);color:var(--text-body-secondary);font-weight:500}
.lang-btn.is-active{color:var(--color-primary);font-weight:600}

/* ---------- FAQ accordion (how-to-partner) ---------- */
.faq-toggle{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--text-inverse)}
.faq-icon{font-size:18px;color:var(--srg-sand);font-weight:300;line-height:1}
.faq-body[hidden]{display:none}
.faq-body{animation:srg-fade-up var(--duration-standard) var(--ease-standard)}
@keyframes srg-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- back to top ---------- */
.back-to-top{position:fixed;right:28px;bottom:28px;z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card-hover);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--duration-fast),transform var(--duration-fast)}
.back-to-top:hover{background:var(--color-primary);color:var(--text-inverse)}

/* ---------- hover states lifted from the design's style-hover attributes ----------
   !important is required: the design keeps its base styles inline, and an inline
   style otherwise beats an external rule. */
[data-hv="h1"]:hover{box-shadow:0 10px 26px rgba(0,89,76,.12)!important;transform:translateY(-3px)!important}
[data-hv="h2"]:hover{color:var(--color-accent)!important}
[data-hv="h3"]:hover{background:rgba(247,245,240,.1)!important}
[data-hv="h4"]:hover{background:rgba(247,245,240,.06)!important}
[data-hv="h5"]:hover{transform:scale(1.14)!important;background:var(--color-primary)!important;color:var(--text-inverse)!important}
[data-hv="h6"]:hover{transform:scale(1.14)!important;background:var(--color-accent)!important;color:#fff!important}
[data-hv="h7"]:hover{transform:scale(1.14)!important;background:var(--color-gold)!important;color:#fff!important}
[data-hv="h8"]:hover{transform:scale(1.14)!important;background:var(--srg-sage)!important;color:#fff!important}
[data-hv="h9"]:hover{box-shadow:var(--shadow-card-hover)!important;transform:translateY(-2px)!important}
[data-hv="h10"]:hover{box-shadow:0 10px 24px rgba(0,89,76,.1)!important;transform:translateY(-2px)!important}
[data-hv="h11"]:hover{opacity:.85!important}
[data-hv="h12"]:hover{background:var(--surface-card)!important;border-color:var(--color-primary)!important}
[data-hv="h13"]:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-card-hover)!important}
[data-hv]{transition:all var(--duration-fast) var(--ease-standard)}

/* ---------- responsive ----------
   The design layer is desktop-first with inline layout values, so the
   breakpoints below re-target those exact inline patterns. */

@media (max-width:1100px){
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr)!important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}

@media (max-width:960px){
  /* section gutters */
  [style*="padding:70px 48px"]{padding:56px 24px!important}
  [style*="padding:80px 48px"]{padding:56px 24px 40px!important}
  [style*="padding:100px 48px"]{padding:64px 24px!important}
  [style*="padding:60px 48px"]{padding:48px 24px!important}
  [style*="padding:44px 48px"]{padding:36px 24px!important}
  [style*="padding:36px 48px"]{padding:28px 24px!important}
  [style*="padding:0 48px"]{padding-left:24px!important;padding-right:24px!important}
  [style*="padding:10px 48px"]{padding-left:24px!important;padding-right:24px!important}
  [style*="padding:0 56px"]{padding-left:24px!important;padding-right:24px!important}
  [style*="padding:0 48px 80px"]{padding-bottom:56px!important}
  [style*="padding:0 48px 90px"]{padding-bottom:56px!important}

  /* two-column splits stack */
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.3fr 0.7fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1.6fr auto"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}

  /* stacked hero art */
  [style*="height:460px"]{height:340px!important}
  [style*="height:620px"]{height:480px!important}
}

@media (max-width:720px){
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:64px 1fr"]{grid-template-columns:40px 1fr!important}

  /* display type scales down */
  h1[style*="font-size:44px"]{font-size:30px!important}
  h1[style*="font-size:52px"]{font-size:32px!important}
  h1[style*="font-size:40px"]{font-size:28px!important}
  h2[style*="font-size:32px"]{font-size:24px!important}
  h2[style*="font-size:30px"]{font-size:23px!important}
  h2[style*="font-size:25px"]{font-size:21px!important}

  [style*="padding:0 56px"]{padding-left:20px!important;padding-right:20px!important}
  [style*="right:56px"]{right:20px!important}
  [style*="left:56px"]{left:20px!important}
  [style*="height:460px"]{height:260px!important}
  [style*="height:620px"]{height:520px!important}
  [style*="height:420px"]{height:300px!important}
}

/* tables always scroll rather than break the page */
table{max-width:100%}
[style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* footer social icon hover (design: style-hover on each social link) */
[data-hv="h14"]:hover{color:var(--text-inverse)!important;background:var(--color-primary)!important;border-color:var(--color-primary)!important}

/* ---------- header / navigation ---------- */
.site-header .nav-item{cursor:pointer;font-family:var(--font-sans);color:inherit}
.site-header .nav-item.is-current{color:var(--color-primary)}
.nav-panel{max-height:0;opacity:0}
.nav-panel-link[aria-current="page"]{color:var(--color-primary)}
.nav-mobile{display:none}

.nav-toggle{
  width:38px;height:38px;border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:transparent;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--color-primary);transition:transform var(--duration-fast),opacity var(--duration-fast)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1180px){
  .site-header{padding:18px 24px!important}
  .site-header .nav-primary{gap:0}
  .site-header .nav-item{padding:10px 8px!important;font-size:10px!important}
}

@media (max-width:1024px){
  .site-header{padding:16px 20px!important}
  .nav-primary{display:none!important}
  .nav-panel{display:none!important}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
  .nav-mobile{
    display:block;position:fixed;left:0;right:0;top:var(--header-h,70px);
    max-height:calc(100vh - var(--header-h,70px));overflow-y:auto;
    background:var(--surface-page);border-top:1px solid var(--border-soft);
    padding:8px 20px 32px;z-index:31;
  }
  .nav-mobile[hidden]{display:none}
  .nav-mobile-group{border-bottom:1px solid var(--border-soft)}
  .nav-mobile-group summary{
    list-style:none;cursor:pointer;padding:16px 2px;font-size:12px;font-weight:600;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--text-heading);
    display:flex;justify-content:space-between;align-items:center;
  }
  .nav-mobile-group summary::-webkit-details-marker{display:none}
  .nav-mobile-group summary::after{content:'+';font-size:16px;font-weight:300;color:var(--color-accent)}
  .nav-mobile-group[open] summary::after{content:'\2212'}
  .nav-mobile-group a{
    display:block;padding:10px 2px 10px 12px;font-size:13.5px;font-weight:300;
    color:var(--text-body-secondary);text-decoration:none;border-left:2px solid var(--border-soft);
    margin-left:2px;
  }
  .nav-mobile-group a[aria-current="page"]{color:var(--color-primary);border-left-color:var(--color-accent)}
  .nav-mobile-cta{margin-top:22px;width:100%}
}

@media (max-width:520px){
  .site-header{padding:14px 16px!important}
  .site-logo{font-size:17px!important;letter-spacing:4px!important}
  .back-to-top{right:16px;bottom:16px;width:40px;height:40px}
}

/* the footer's two-column head stacks before the generic breakpoint */
@media (max-width:820px){
  footer[style*="padding:0 48px"]{padding-left:24px!important;padding-right:24px!important}
  footer [style*="padding-top:80px"]{padding-top:48px!important}
  footer h2[style*="font-size:32px"]{font-size:23px!important}
}

/* ---------- small-screen typography & tap targets ---------- */
@media (max-width:720px){
  /* category page titles are long compound names; keep them inside the gutter */
  h1[style*="font-size:36px"],h1[style*="font-size:34px"],h1[style*="font-size:38px"]{font-size:26px!important}
  h1,h2,h3{overflow-wrap:break-word}
  /* grid children must be allowed to shrink below their content width */
  [style*="display:grid"] > *{min-width:0}

  /* WCAG 2.5.8: give text links a 24px-tall hit area.
     Padding on an inline link grows the hit region without moving layout. */
  footer a{padding-block:4px}
  .lang-btn{padding:6px 6px}
  .site-logo{display:inline-block;padding-block:4px}
  a[style*="text-transform:uppercase"]{padding-block:6px}
  /* newsroom archive chips and other small standalone links */
  a[href^="/coming-soon"]{padding-block:4px}
}

/* direct pharmacovigilance contact links: keep a 24px hit area on phones */
@media (max-width:720px){
  .pv-contact a{display:inline-block;padding-block:4px}
}

/* ---------- brand mark ----------
   The header carries the full lockup. Where a phone would leave it fighting
   the menu button for room, the monogram takes over — same asset family,
   never a squeezed lockup. Only height is ever set, so the ratio holds. */
.site-logo img{max-width:none}
@media (max-width:520px){
  .site-logo .logo-full{height:26px!important}
}
/* Only swap when a monogram has actually been supplied — otherwise the
   lockup stays put rather than leaving the header with no logo at all. */
@media (max-width:400px){
  .site-logo.has-mark .logo-mark{display:block!important;height:30px!important}
  .site-logo.has-mark .logo-full{display:none!important}
  .site-logo:not(.has-mark) .logo-full{height:24px!important}
}
@media (max-width:820px){
  footer .brand-lockup img{height:38px!important}
}