@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --hukum-primary: #1b3a5c;
  --hukum-primary-dark: #0f2440;
  --hukum-accent: #b8860b;
  --hukum-bg: #f5f6f8;
  --hukum-card: #ffffff;
  --hukum-text: #1c2733;
  --hukum-muted: #5c6b7a;
  --hukum-border: #dde3ea;
  /* Stronger border, used where a real boundary has to be visible:
     the boxes of the sidebar entries, the main/sidebar divider and the
     top edge of the footer. */
  --hukum-border-strong: #c3cedb;
  --hukum-radius: 6px;
  /* Shared layout band: the header image, the navigation, the
     content + sidebar columns and the footer all use these two values,
     so their left/right edges are guaranteed to line up. */
  --hukum-band-width: 1260px;
  --hukum-band-pad: 32px;
  /* Maximum height of the header image: the picture is cropped to this
     band, so it always spans the full content + sidebar width. */
  --hukum-header-image-height: 300px;
  /* Gap between the main column and the sidebar. */
  --hukum-column-gap: 24px;
}

body {
  background: #f5f6f8;
  color: var(--hukum-text);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.65;
}

a { color: var(--hukum-primary); }
a:hover { color: var(--hukum-accent); }

/* Header */
.pkp_structure_head {
  background-color: #f5f6f8 !important;
}
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  /* No empty strip above the picture: the banner starts at the very top
     of the page (the default theme reserves room here for the user nav). */
  padding-top: 0;
  padding-bottom: 4px;
  box-sizing: border-box;
  border-bottom: 4px solid #b8860b;
}
/* The banner fills the whole band, so this wrapper has no side padding:
   the picture is exactly as wide as the content + sidebar column below it
   (both use the same 1260px band). */
.pkp_site_name_wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  height: auto;
}
/* Nav wrapper follows the same content width (keeps default OJS nav styling) */
.pkp_navigation_primary_wrapper,
.has_site_logo .pkp_navigation_primary_wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--hukum-band-pad);
  padding-right: var(--hukum-band-pad);
  box-sizing: border-box;
}
@media (max-width: 991px) {
  :root {
    --hukum-band-pad: 16px;
    --hukum-header-image-height: 120px;
  }
  .pkp_navigation_primary_wrapper {
    padding-left: var(--hukum-band-pad);
    padding-right: var(--hukum-band-pad);
  }
  /* Leave room for the hamburger button, which sits on the left of the
     header on small screens. */
  .has_site_logo .pkp_site_name,
  .pkp_site_name {
    margin-left: 8.571rem;
  }
}
.has_site_logo .pkp_site_name,
.pkp_site_name {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative !important;
  left: auto;
  right: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.pkp_site_name .is_img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Header image: a real banner. It starts at the very top of the page and
   its width is exactly the width of the content column + sidebar (both
   use the same 1260px band), so the left and right edges line up with
   the block below. The picture fills that band (object-fit: cover) and its
   height is capped, so the header no longer grows to several hundred
   pixels. The crop keeps the middle of the image, where the logo text and
   the banner artwork sit. */
.pkp_site_name .is_img img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: var(--hukum-header-image-height);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* User menu (Login / Register / Language). On the default theme it is
   placed in the blue bar above the logo; here the logo is a banner, so the
   menu is moved to the top right corner of the picture and gets its own
   solid chip so the links stay readable on any artwork. */
@media (min-width: 992px) {
  .has_site_logo .pkp_navigation_user_wrapper,
  .pkp_navigation_user_wrapper {
    top: 0.714rem;
    right: 0.714rem;
    left: auto;
    transform: none;
    padding-left: 0.5rem;
    padding-right: 0;
    background: rgba(15, 36, 64, 0.88);
    border-radius: var(--hukum-radius);
    z-index: 1001;
  }
  .pkp_navigation_user_wrapper a {
    color: #ffffff;
    text-decoration: none;
  }
  .pkp_navigation_user_wrapper a:hover,
  .pkp_navigation_user_wrapper a:focus {
    color: var(--hukum-accent);
    text-decoration: none;
  }
}

/* Content spacing + two-column layout (main + sidebar) */
/* One shared 1260px band, identical to the footer band:
     - main text   : x=32  .. x=884
     - sidebar card: x=908 .. x=1228
   Both edges match the footer text edges exactly. */
.pkp_structure_content {
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--hukum-band-pad);
  background: #ffffff;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--hukum-column-gap);
  align-items: flex-start;
}
/* Reset the default theme's float/fixed-width layout */
.pkp_structure_main,
.pkp_structure_main:first-child:last-child {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 28px 0;
  background: transparent;
  flex: 1 1 0%;
}
/* Remove the decorative border lines of the default theme: no thin line
   between the main column and the sidebar. The two areas are separated by
   the 24px gap and by the boxed cards of the sidebar. */
.pkp_structure_main:before,
.pkp_structure_main:after {
  display: none !important;
}
/* Remove the .pkp_helpers_clear pseudo elements: as flex items they would
   add phantom gaps around the main column and the sidebar */
.pkp_structure_content:before,
.pkp_structure_content:after {
  display: none !important;
  content: none !important;
}
.pkp_structure_sidebar {
  float: none !important;
  width: auto !important;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 28px 0 28px 0;
  flex: 0 0 320px;
}

/* --- Sidebar blocks: clean, evenly spaced menu --- */
.pkp_structure_sidebar .pkp_block {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  padding: 16px 18px;
  margin: 0 0 16px;
  font-size: inherit;
  line-height: inherit;
}
.pkp_structure_sidebar .pkp_block:last-child {
  margin-bottom: 0;
}
.pkp_structure_sidebar .pkp_block .title {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 0;
  font-family: "Figtree", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hukum-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pkp_structure_sidebar .pkp_block .content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.pkp_structure_sidebar .pkp_block .content ul li {
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.5;
  text-align: left;
}
.pkp_structure_sidebar .pkp_block .content ul li:last-child {
  margin-bottom: 0;
}
/* Every entry gets its own box: the dotted hairline separators of the
   default theme are gone. The box border is the visible boundary of the
   entry. */
.pkp_structure_sidebar .pkp_block .content ul li + li {
  border-top: 0;
}
.pkp_structure_sidebar .pkp_block .content a {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--hukum-border-strong);
  border-radius: var(--hukum-radius);
  background: #f8fafc;
  color: var(--hukum-text);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pkp_structure_sidebar .pkp_block .content a:hover,
.pkp_structure_sidebar .pkp_block .content a:focus {
  color: var(--hukum-primary);
  border-color: var(--hukum-accent);
  background: #ffffff;
}
/* Browse block: submenu indentation kept tidy */
.pkp_structure_sidebar .block_browse .has_submenu {
  margin: 0;
  font-weight: 700;
  color: var(--hukum-primary);
}
.pkp_structure_sidebar .block_browse .has_submenu > ul {
  margin: 0 0 4px;
  padding: 0;
}
.pkp_structure_sidebar .block_browse .has_submenu ul li a {
  padding-left: 24px;
  font-weight: 400;
  color: var(--hukum-muted);
}
.pkp_structure_sidebar .block_browse .is_sub {
  margin-left: 0;
}
.pkp_structure_sidebar .block_browse .current a {
  border-color: var(--hukum-primary);
  color: var(--hukum-primary);
  font-weight: 600;
  cursor: default;
}
/* "Make a Submission" button in the sidebar */
.pkp_structure_sidebar .block_make_submission .content a,
.pkp_structure_sidebar .block_make_submission_link {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  background: var(--hukum-primary);
  color: #ffffff !important;
  border: none;
  border-radius: var(--hukum-radius);
  font-weight: 600;
  text-align: center;
  transition: background .15s ease;
}
.pkp_structure_sidebar .block_make_submission .content a:hover,
.pkp_structure_sidebar .block_make_submission_link:hover {
  background: var(--hukum-primary-dark);
  color: #ffffff !important;
}
@media (max-width: 991px) {
  .pkp_structure_content {
    padding: 0 var(--hukum-band-pad);
    display: block;
  }
  .pkp_structure_sidebar {
    max-width: 100%;
    width: 100% !important;
    flex: none;
    margin-top: 18px;
    padding: 0 0 28px 0;
  }
  .pkp_structure_main,
  .pkp_structure_main:first-child:last-child {
    padding: 20px 0;
  }
}
.cmp_announcements h2,
.page_header h1 {
  font-family: "Figtree", sans-serif;
  color: var(--hukum-primary);
}
.cmp_announcements .obj_announcement_summary {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.obj_issue_toc .galleys_links li {
  margin-right: 8px;
}
.obj_article_summary,
.obj_issue_summary,
.pkp_block {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  margin-bottom: 18px;
  transition: box-shadow .2s ease;
}
.obj_article_summary:hover,
.obj_issue_summary:hover {
  box-shadow: 0 8px 20px rgba(15, 36, 64, .12);
}
/* Journal summary text justify */
.obj_issue_summary {
  text-align: justify;
}
.obj_issue_summary .title,
.obj_issue_summary .title a {
  text-align: left;
}
/* Justified running text:
   - the "About the Journal" panel on the homepage (.homepage_about)
   - the About the Journal page (.page_about)
   - the article abstract
   Headings, labels and the breadcrumb stay left aligned. */
.homepage_about,
.page_about {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-break: break-word;
}
.homepage_about p,
.homepage_about div,
.homepage_about li,
.homepage_about dd,
.homepage_about dt,
.homepage_about blockquote,
.homepage_about td,
.homepage_about th,
.page_about p,
.page_about div,
.page_about li,
.page_about dd,
.page_about dt,
.page_about blockquote,
.page_about td,
.page_about th {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
.homepage_about h1,
.homepage_about h2,
.homepage_about h3,
.homepage_about h4,
.homepage_about h5,
.homepage_about h6,
.homepage_about .label,
.homepage_about .title,
.page_about h1,
.page_about h2,
.page_about h3,
.page_about h4,
.page_about h5,
.page_about h6,
.page_about .label,
.page_about .title,
.page_about .cmp_edit_link,
.page_about .cmp_breadcrumbs,
.page_about .cmp_breadcrumbs * {
  text-align: left !important;
  hyphens: manual;
}

/* Article abstract: justified text, same as the About the Journal text.
   The "Abstract" heading keeps its normal left alignment. */
.obj_article_details .item.abstract {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  word-break: break-word;
}
.obj_article_details .item.abstract p,
.obj_article_details .item.abstract div,
.obj_article_details .item.abstract li,
.obj_article_details .item.abstract blockquote {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
.obj_article_details .item.abstract .label {
  text-align: left !important;
  hyphens: manual;
}
.obj_article_summary .title a { color: var(--hukum-text); font-weight: 700; }
/* DOI in article summary */
.obj_article_summary .meta .doi {
  margin-top: 4px;
  font-size: 0.82rem;
}
.obj_article_summary .meta .doi .label {
  color: var(--hukum-muted);
  font-weight: 600;
}
.obj_article_summary .meta .doi a {
  color: var(--hukum-primary);
}
.obj_article_summary .meta .doi a:hover {
  color: var(--hukum-accent);
}
/* Buttons */
button, .btn, .pkp_button, .obj_galley_link {
  background: var(--hukum-primary);
  color: #ffffff !important;
  border: none;
  border-radius: var(--hukum-radius);
  padding: 8px 16px;
  font-family: "Figtree", sans-serif;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover, .pkp_button:hover {
  background: var(--hukum-primary-dark);
}
/* Pagination */
.pagination a,
.paging a {
  color: var(--hukum-primary);
  border: 1px solid var(--hukum-border);
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: var(--hukum-radius);
}
.pagination .current,
.paging .current {
  background: var(--hukum-primary);
  color: #fff;
  border-color: var(--hukum-primary);
}
/* Tables: a plain table (the layout tables that are written in the admin
   UI, e.g. in the footer) stays completely borderless, so no thin lines
   show up there. Only the real data tables (.cmp_table) get boxes. */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  padding: 10px;
  text-align: left;
}
td {
  padding: 10px;
}
.cmp_table {
  border-collapse: separate;
  border-spacing: 0 8px;
}
.cmp_table th {
  background: var(--hukum-primary);
  color: #fff;
  border-radius: var(--hukum-radius) var(--hukum-radius) 0 0;
}
.cmp_table td {
  background: #ffffff;
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
}

/* --- Grid for DB-authored content (journal settings, static pages) ---
   The footer and the homepage panels are edited as HTML in the admin UI
   and use Bootstrap 3 markup (.row / .col-md-* / .panel). The default OJS
   theme ships no grid, so those blocks collapse into one stacked column.
   A float-based grid is used on purpose: the default theme's .row is
   already a clearfix container (.pkp_helpers_clear), so floated columns
   are contained without overriding .row itself -- overriding it would
   break the float-based .obj_article_details layout that also uses .row.
   Gutters are applied as padding-right only (no negative margins), which
   keeps the first and last column flush with the surrounding text edges. */
.row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]) {
  float: left;
  box-sizing: border-box;
  padding-right: 15px;
}
.row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]):last-child {
  padding-right: 0;
}
.col-md-1 { width: 8.33333333%; }
.col-md-2 { width: 16.66666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333%; }
.col-md-11 { width: 91.66666667%; }
.col-md-12 { width: 100%; }
@media (max-width: 767px) {
  .row > [class*="col-md-"]:not([class*="offset"]):not([class*="push"]):not([class*="pull"]) {
    float: none;
    width: 100%;
    padding-right: 0;
  }
}
/* Panels used by the homepage "additional content" blocks */
.panel {
  background: var(--hukum-card);
  border: 1px solid var(--hukum-border);
  border-radius: var(--hukum-radius);
  box-shadow: 0 2px 8px rgba(15, 36, 64, .06);
  margin-bottom: 18px;
  overflow: hidden;
}
.panel-heading {
  background: var(--hukum-primary);
  color: #ffffff;
  padding: 12px 16px;
}
.panel-title {
  margin: 0;
  color: #ffffff;
  font-family: "Figtree", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.panel-body {
  padding: 16px;
  font-size: 0.95rem;
}
.text-muted { color: var(--hukum-muted); }
.text-center { text-align: center; }
.pkp_footer_content hr {
  border: 0;
  height: 3px;
  width: 56px;
  margin: 20px auto;
  border-radius: 3px;
  background: var(--hukum-accent);
}
/* Footer: exactly the same 1260px band as the header banner and as the
   content column, so the three blocks share the same left and right edge.
   The band keeps its own white background and gets a solid gold top edge
   (mirroring the gold line under the header banner) as the visible
   boundary between the content column and the footer. */
.pkp_structure_footer_wrapper {
  background: transparent !important;
  border-top: 0 none !important;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.pkp_structure_footer {
  background: #ffffff !important;
  color: #1c2733 !important;
  border-top: 4px solid var(--hukum-accent);
  width: 100%;
  max-width: var(--hukum-band-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px var(--hukum-band-pad);
  text-align: left;
}
.pkp_footer_content {
  padding: 0;
  text-align: left;
}
@media (max-width: 991px) {
  .pkp_structure_footer {
    padding: 24px var(--hukum-band-pad);
  }
}
.pkp_structure_footer a { color: var(--hukum-primary) !important; }
.pkp_structure_footer a:hover { color: var(--hukum-accent) !important; }
/* Hide PKP platform/workshop branding */
.pkp_brand_footer { display: none !important; }
/* Homepage image wrapped by text */
.pkp_page_index .homepage_image {
  margin: 0 !important;
  padding: 0;
}
.pkp_page_index .homepage_image img {
  float: left;
  margin: 0 24px 16px 0;
  border-radius: var(--hukum-radius);
  max-width: 42%;
  height: auto;
  box-shadow: 0 4px 14px rgba(15, 36, 64, .12);
}
.pkp_page_index .homepage_about {
  margin: 0;
  padding: 0 0 16px 0;
}
.pkp_page_index .homepage_about h2 {
  margin-top: 0;
  color: var(--hukum-primary-dark);
}
.pkp_page_index .cmp_announcements,
.pkp_page_index .current_issue,
.pkp_page_index .additional_content {
  clear: both;
}
@media (max-width: 768px) {
  .pkp_page_index .homepage_image img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 14px 0;
  }
  .page_about img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 14px 0;
  }

}
/* --- Optional submit-button group (3 segments) ---
   Not used by any core template; kept for custom pages that paste this
   markup. It is intentionally scoped to .btn-group-triple so it can
   never leak into the standard OJS buttons. */
/* --- GROUP CONTAINER (pill wrapper) --- */
    .btn-group-triple {
      display: inline-flex;
      align-items: stretch;
      justify-content: center;
      padding: 0;
      border-radius: 100px;
      background: transparent;
      box-shadow: 0 10px 20px -8px rgba(0, 60, 120, 0.4);
      transition: box-shadow 0.25s ease;
      isolation: isolate;
      /* remove any default list/flex gap */
      gap: 0;
    }

    /* Lift the whole group subtly on hover */
    .btn-group-triple:hover {
      box-shadow: 0 18px 30px -10px rgba(0, 70, 140, 0.5);
    }

    /* --- INDIVIDUAL BUTTON SEGMENTS --- */
    .btn-triple {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 0.9rem 1.6rem;
      font-size: 1.02rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.01em;
      white-space: nowrap;
      text-decoration: none;        /* for <a> */
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s ease, color 0.2s ease,
                  transform 0.15s cubic-bezier(0.2, 0, 0, 1);
      outline: none;
      -webkit-tap-highlight-color: transparent;
      /* each segment is a flex child; no margin needed */
    }

    /* Focus ring (accessible) */
    .btn-triple:focus-visible {
      outline: 3px solid #1e88e5;
      outline-offset: 3px;
      z-index: 2;
    }

    /* Press effect --- slight inward scale per segment */
    .btn-triple:active {
      transform: scale(0.96);
    }

    /* SVG icons inside buttons */
    .btn-triple svg {
      width: 1.25em;
      height: 1.25em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      display: inline-block;
      vertical-align: middle;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    /* ---------- SEGMENT 1: AUTHOR GUIDELINES ---------- */
    .btn-guidelines {
      background: linear-gradient(135deg, #e8f0fe, #d4e3fc);
      color: #0f3a6b;
      border-radius: 100px 0 0 100px;   /* round left side only */
      border-right: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .btn-guidelines:hover {
      background: linear-gradient(135deg, #dce9ff, #c2d8fc);
      color: #0a2e57;
    }

    .btn-guidelines:active {
      background: linear-gradient(135deg, #c9defa, #b0cbf7);
    }

    /* ---------- SEGMENT 2: ARTICLE TEMPLATE ---------- */
    .btn-template {
      background: linear-gradient(135deg, #d9e8fc, #bdd4f8);
      color: #0b3d6f;
      border-right: 1px solid rgba(255, 255, 255, 0.8);
      border-left: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .btn-template:hover {
      background: linear-gradient(135deg, #c7dcf9, #a9c6f4);
      color: #062d54;
    }

    .btn-template:active {
      background: linear-gradient(135deg, #b4d0f6, #96b8f0);
    }

    /* ---------- SEGMENT 3: SUBMIT ARTICLE ---------- */
    .btn-submit {
      background: linear-gradient(135deg, #0b4a9e, #07377a);
      color: white;
      border-radius: 0 100px 100px 0;   /* round right side only */
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .btn-submit:hover {
      background: linear-gradient(135deg, #0e60c7, #094294);
    }

    .btn-submit:active {
      background: linear-gradient(135deg, #094494, #062e66);
    }

    /* icon micro-animations on group hover */
    .btn-group-triple:hover .btn-guidelines svg {
      transform: translateX(2px);
    }

    .btn-group-triple:hover .btn-template svg {
      transform: translateY(2px);
    }

    .btn-group-triple:hover .btn-submit svg {
      transform: translateX(3px);
    }

    /* --- RESPONSIVE: stack on very small screens? No --- 
       but we compress padding & font to keep it on one line. --- */
    @media (max-width: 640px) {
      .btn-triple {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        gap: 0.35rem;
      }
      .btn-triple svg {
        width: 1.1em;
        height: 1.1em;
      }
    }

    @media (max-width: 480px) {
      .btn-triple {
        padding: 0.6rem 0.75rem;
        font-size: 0.82rem;
        gap: 0.25rem;
      }
      .btn-triple svg {
        width: 1em;
        height: 1em;
      }
      /* hide text? We keep it readable --- but allow wrapping if needed */
      .btn-triple span {
        /* text is inside a span to allow hiding if needed --- but we keep it */
      }
    }

    @media (max-width: 380px) {
      /* Option: hide the text and keep only icons for ultra narrow, 
         but here we compress further and allow 2-line if unavoidable. */
      .btn-triple {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
      }
      .btn-triple svg {
        width: 0.9em;
        height: 0.9em;
      }
    }

    /* --- demo extra --- */
    .demo-extra {
      color: #29445e;
      font-size: 0.85rem;
      text-align: center;
      margin-top: 0.25rem;
    }

    .demo-extra code {
      background: rgba(0, 0, 0, 0.05);
      padding: 0.2rem 0.5rem;
      border-radius: 30px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 0.8rem;
    }

    /* --- Accessibility: motion reduction --- */
    @media (prefers-reduced-motion: reduce) {
      .btn-triple,
      .btn-group-triple,
      .btn-triple svg {
        transition: none;
        animation: none;
      }
      .btn-triple:active {
        transform: none;
      }
    }