/*
 * GIGL DEPARTMENT / APPLICATION CSS
 * WordPress-safe adaptation of the supplied GIGL customization layer.
 *
 * Requires the namespaced Polytechnique corporate CSS to be loaded first.
 *
 * Approved Polytechnique corporate palette is defined in the corporate layer:
 *   Red:    #ED1C24
 *   Orange: #F15A22
 *   Green:  #25B34B
 *   Blue:   #00BDF2
 *
 * This file intentionally keeps the original GIGL component design.
 * Only namespace/variable compatibility and the approved orange source
 * have been adjusted for the WordPress implementation.
 */

	/* ============================================================
       GIGL DESIGN TOKENS
       ============================================================ */
	.gigl-site {

      --gigl-orange: var(--polymtl-gigl-poly-orange);
      --gigl-orange-dark: #D94F00;
      --gigl-orange-light: #FFF0E8;
      --gigl-orange-soft: #FFF7F2;

      --gigl-text: #172033;
      --gigl-muted: #647084;

      --gigl-background: #F5F7FA;
      --gigl-border: #D8DEE6;

      --gigl-container: 1120px;

      --gigl-shadow:
        0 8px 24px rgba(23, 32, 51, 0.10),
        0 2px 6px rgba(23, 32, 51, 0.06);

      --gigl-shadow-hover:
        0 18px 40px rgba(23, 32, 51, 0.14),
        0 5px 12px rgba(241, 90, 34, 0.08);
    }


    /* ============================================================
       GIGL PAGE
       ============================================================ */

    .gigl-page {
      width: 100%;
      min-height: 100vh;

      background: white;

      color: var(--gigl-text);

      font-family: var(--polymtl-gigl-font-body);
    }


    /* ============================================================
       GIGL CONTAINER
       
       One container is used consistently everywhere.
       This is important for desktop/mobile alignment.
       ============================================================ */

    .gigl-container {
      width:
        min(
          calc(100% - 40px),
          var(--gigl-container)
        );

      margin-inline: auto;
    }


    /* ============================================================
       CORPORATE HEADER ACCENT
       ============================================================ */

	.gigl-header {
		position: relative;

		width: 100%;

		background: white;

		border-top: 0;

		border-bottom:
			1px solid
			var(--gigl-border);
	}


    /* ============================================================
       HEADER
       ============================================================ */

    .gigl-topbar {
      min-height: 92px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 24px;
    }


    /* ============================================================
       POLYTECHNIQUE BRAND
       ============================================================ */

    .gigl-brand {
      min-width: 0;

      display: flex;
      align-items: center;

      gap: 22px;

      color: inherit;

      text-decoration: none;
    }

    .gigl-poly-logo {
      display: block;

      height: 58px;
      width: auto;

      object-fit: contain;
      object-position: left center;
    }

    .gigl-brand-divider {
      width: 1px;
      height: 42px;

      flex: 0 0 auto;

      background: var(--gigl-border);
    }

    .gigl-department-name {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      margin: 0;
      padding: 0;

      line-height: 1.2;
    }

    .gigl-department-name strong {
      display: block;

      margin: 0;

      color: var(--gigl-text);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 14px;
      font-weight: 750;

      line-height: 1.2;
    }

    .gigl-department-name span {
      display: block;

      margin-top: 5px;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 12px;

      line-height: 1.2;
    }

    .gigl-department-link {
      display: inline-flex;
      align-items: center;

      flex: 0 0 auto;

      color: var(--polymtl-gigl-poly-blue);

      font-size: 14px;
      font-weight: 650;

      line-height: 1.2;

      text-decoration: none;

      transition: color 160ms ease;
    }

    .gigl-department-link:hover {
      color: #004f7c;
    }


    /* ============================================================
       HERO
       
       We intentionally keep the hero white.
       The corporate identity is represented by the top gradient
       and typography rather than turning the entire hero into
       a marketing-style gradient.
       ============================================================ */

.gigl-hero {
    position: relative;
    overflow: hidden;

    padding: 28px 0 32px;

    background: white;

    border-bottom:
        1px solid
        var(--gigl-border);
}

    .gigl-eyebrow {
      display: inline-flex;
      align-items: center;

      gap: 8px;

      margin: 0 0 16px;

      color: var(--gigl-orange);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 12px;
      font-weight: 700;

      letter-spacing: 0.07em;

      text-transform: uppercase;
    }

    .gigl-eyebrow::before {
      content: "";

      width: 20px;
      height: 3px;

      flex: 0 0 auto;

      border-radius: 999px;

      background: var(--polymtl-gigl-poly-gradient);
    }

    .gigl-hero h1 {
      max-width: 760px;

      margin: 0;

      color: var(--gigl-text);

      /*
       * The corporate base uses Giorgio for headings.
       * This homepage uses the same display family, but the
       * line-height/scale are tuned to the original GIGL design.
       */
      font-family: var(--polymtl-gigl-font-display);

      font-size:
        clamp(
          42px,
          6vw,
          68px
        );

      font-weight: 400;

      line-height: 0.98;

      letter-spacing: -0.025em;

      text-transform: uppercase;
    }

    .gigl-hero h1 span {
      color: var(--gigl-orange);
    }

    .gigl-hero-description {
      max-width: 650px;

      margin: 22px 0 0;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 18px;

      line-height: 1.65;
    }


    /* ============================================================
       MAIN APPLICATION AREA
       ============================================================ */

.gigl-main {
    width: 100%;

    background: var(--gigl-background);

    padding:
        40px 0 48px;
}


    /* ============================================================
       SECTION HEADING
       ============================================================ */

    .gigl-section-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      gap: 24px;

      margin: 0 0 22px;
    }

    .gigl-section-heading h2 {
      margin: 0;

      color: var(--gigl-text);

      /*
       * Giorgio remains the corporate display face,
       * but the heading is deliberately restrained.
       */
      font-family: var(--polymtl-gigl-font-display);

      font-size: 26px;
      font-weight: 400;

      line-height: 1.05;

      letter-spacing: -0.01em;

      text-transform: uppercase;
    }

    .gigl-section-heading p {
      margin: 5px 0 0;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 14px;

      line-height: 1.5;
    }


    /* ============================================================
       SEARCH
       ============================================================ */

    .gigl-search-wrapper {
      position: relative;

      width: 100%;

      margin: 0 0 24px;
    }

    .gigl-search-icon {
      position: absolute;

      left: 17px;
      top: 50%;

      width: 19px;
      height: 19px;

      transform: translateY(-50%);

      color: #7B8796;

      pointer-events: none;
    }

    .gigl-search {
      display: block;

      width: 100%;
      height: 52px;

      margin: 0;

      padding:
        0 18px 0 50px;

      border:
        1px solid
        var(--gigl-border);

      border-radius: 12px;

      outline: none;

      background: white;

      color: var(--gigl-text);

      font-family: var(--polymtl-gigl-font-body);
      font-size: 16px;

      box-shadow: none;

      appearance: none;

      transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
    }

    .gigl-search::placeholder {
      color: #98A2B1;
      opacity: 1;
    }

    .gigl-search:hover {
      border-color: #C8D0DA;
    }

    .gigl-search:focus {
      border-color: var(--gigl-orange);

      box-shadow:
        0 0 0 3px
        rgba(241, 90, 34, 0.12);
    }


    /* ============================================================
       SCREEN-READER ONLY
       ============================================================ */

    .gigl-sr-only {
      position: absolute;

      width: 1px;
      height: 1px;

      padding: 0;
      margin: -1px;

      overflow: hidden;

      clip: rect(0, 0, 0, 0);

      white-space: nowrap;

      border: 0;
    }


    /* ============================================================
       FORM CARD GRID
       ============================================================ */

    .gigl-forms-grid {
      display: grid;

      grid-template-columns:
        repeat(
          2,
          minmax(0, 1fr)
        );

      gap: 18px;

      width: 100%;
    }


    /* ============================================================
       FORM CARDS
       ============================================================ */

    .gigl-form-card {
      position: relative;

      min-width: 0;

      min-height: 260px;

      display: flex;
      flex-direction: column;

      padding: 28px;

      overflow: hidden;

      background: white;

      border:
        1px solid
        #D5DCE5;

      border-radius: 16px;

      color: var(--gigl-text);

      box-shadow: var(--gigl-shadow);

      text-decoration: none;

      transform: translateY(0);

      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
    }

    .gigl-form-card:hover {
      transform: translateY(-5px);

      border-color:
        rgba(241, 90, 34, 0.42);

      box-shadow: var(--gigl-shadow-hover);
    }


    /* ============================================================
       CARD CORPORATE ACCENT
       ============================================================ */

    .gigl-form-card::before {
      content: "";

      position: absolute;

      top: 0;
      left: 0;

      width: 100%;
      height: 4px;

      background: var(--polymtl-gigl-poly-gradient);

      transform:
        scaleX(0.18);

      transform-origin: left;

      opacity: 0.9;

      transition:
        transform 180ms ease;
    }

    .gigl-form-card:hover::before {
      transform: scaleX(1);
    }


    /* ============================================================
       CARD ICON
       ============================================================ */

    .gigl-card-icon {
      width: 50px;
      height: 50px;

      display: grid;
      place-items: center;

      margin: 0 0 20px;

      color: var(--gigl-orange);

      background: var(--gigl-orange-light);

      border-radius: 12px;

      box-shadow:
        0 3px 10px
        rgba(241, 90, 34, 0.08);
    }

    .gigl-card-icon svg {
      width: 24px;
      height: 24px;
    }


    /* ============================================================
       CARD CATEGORY
       ============================================================ */

    .gigl-card-category {
      margin: 0 0 7px;

      color: var(--gigl-orange);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 11px;
      font-weight: 750;

      letter-spacing: 0.08em;

      text-transform: uppercase;
    }


    /* ============================================================
       CARD TITLE
       ============================================================ */

    .gigl-form-card h3 {
      margin: 0 0 10px;

      color: var(--gigl-text);

      /*
       * Keep cards readable and UI-like rather than making them
       * oversized editorial headings.
       */
      font-family: var(--polymtl-gigl-font-body);

      font-size: 24px;

      font-weight: 700;

      line-height: 1.25;

      letter-spacing: -0.025em;

      text-transform: none;
    }

    .gigl-form-card p {
      max-width: 480px;

      margin: 0;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 15px;

      line-height: 1.6;
    }


    /* ============================================================
       CARD FOOTER
       ============================================================ */

    .gigl-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 16px;

      margin-top: auto;

      padding-top: 20px;

      border-top:
        1px solid
        #EDF0F3;
    }

    .gigl-card-link {
      display: inline-flex;
      align-items: center;

      gap: 8px;

      min-width: 0;

      color: var(--gigl-orange);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 14px;
      font-weight: 700;

      white-space: nowrap;

      transition: gap 160ms ease;
    }

    .gigl-form-card:hover .gigl-card-link {
      gap: 12px;
    }

    .gigl-card-link svg {
      width: 18px;
      height: 18px;

      flex: 0 0 auto;
    }

    .gigl-card-tag {
      flex: 0 0 auto;

      padding:
        5px 10px;

      color: #647084;

      background: #F1F3F5;

      border-radius: 999px;

      font-family: var(--polymtl-gigl-font-body);

      font-size: 11px;
      font-weight: 650;

      white-space: nowrap;
    }


    /* ============================================================
       EMPTY SEARCH STATE
       ============================================================ */

    .gigl-empty-state {
      display: none;

      padding:
        50px 20px;

      text-align: center;

      color: var(--gigl-muted);
    }

    .gigl-empty-state strong {
      display: block;

      margin-bottom: 6px;

      color: var(--gigl-text);

      font-weight: 700;
    }


    /* ============================================================
       PASSWORD RESET
       ============================================================ */

    .gigl-password-reset {
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 30px;

      margin-top: 22px;

      padding:
        20px 22px;

      background: var(--gigl-orange-soft);

      border:
        1px solid
        rgba(241, 90, 34, 0.16);

      border-radius: 12px;

      color: var(--gigl-text);
    }

    .gigl-password-reset-content {
      min-width: 0;

      display: flex;
      align-items: center;

      gap: 16px;
    }

    .gigl-password-reset-icon {
      width: 44px;
      height: 44px;

      flex: 0 0 auto;

      display: grid;
      place-items: center;

      color: var(--gigl-orange);

      background: white;

      border:
        1px solid
        rgba(241, 90, 34, 0.16);

      border-radius: 10px;
    }

    .gigl-password-reset-icon svg {
      width: 22px;
      height: 22px;
    }

    .gigl-password-reset-text {
      min-width: 0;
    }

    .gigl-password-reset-text h3 {
      margin: 0 0 3px;

      color: var(--gigl-text);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 16px;
      font-weight: 700;

      line-height: 1.3;

      text-transform: none;
    }

    .gigl-password-reset-text p {
      margin: 0;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 13px;

      line-height: 1.45;
    }

    .gigl-reset-button {
      flex: 0 0 auto;

      min-height: 42px;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      gap: 8px;

      padding:
        10px 15px;

      border: 0;
      border-radius: 10px;

      color: white;

      background: var(--gigl-orange);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 13px;
      font-weight: 750;

      line-height: 1.2;

      text-decoration: none;

      box-shadow:
        0 5px 14px
        rgba(241, 90, 34, 0.18);

      transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
    }

    .gigl-reset-button:hover {
      transform: translateY(-1px);

      background: var(--gigl-orange-dark);

      box-shadow:
        0 7px 18px
        rgba(241, 90, 34, 0.24);
    }

    .gigl-reset-button svg {
      width: 17px;
      height: 17px;

      flex: 0 0 auto;
    }


    /* ============================================================
       HELP
       ============================================================ */

    .gigl-help {
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 30px;

      margin-top: 42px;

      padding:
        24px 28px;

      background: var(--gigl-orange-soft);

      border:
        1px solid
        rgba(241, 90, 34, 0.16);

      border-radius: 16px;

      color: var(--gigl-text);
    }

    .gigl-help-content {
      min-width: 0;
    }

    .gigl-help-content h2 {
      margin: 0 0 7px;

      color: var(--gigl-text);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 18px;
      font-weight: 700;

      line-height: 1.3;

      letter-spacing: 0;

      text-transform: none;
    }

    .gigl-help-content p {
      margin: 0;

      color: var(--gigl-muted);

      font-family: var(--polymtl-gigl-font-body);

      font-size: 13px;

      line-height: 1.5;
    }

    .gigl-help-button {
      flex: 0 0 auto;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      min-height: 40px;

      padding:
        10px 16px;

      color: var(--gigl-orange);

      background: white;

      border:
        1px solid
        #DDE2E8;

      border-radius: 10px;

      font-family: var(--polymtl-gigl-font-body);

      font-size: 13px;
      font-weight: 750;

      line-height: 1.2;

      text-decoration: none;

      transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
    }

    .gigl-help-button:hover {
      transform: translateY(-1px);

      background: #FFF8F4;

      border-color:
        rgba(241, 90, 34, 0.25);
    }


/* ============================================================
   GIGL FOOTER
   ============================================================ */

.gigl-footer {
    width: 100%;

    background: white;

    border-top:
        1px solid
        #DDE2E8;
}


/* ------------------------------------------------------------
   Footer inner layout
   ------------------------------------------------------------ */

.gigl-footer-inner {
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* ------------------------------------------------------------
   Department identification
   ------------------------------------------------------------ */

.gigl-footer-brand {
    color: var(--gigl-text);

    font-family: var(--polymtl-gigl-font-body);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;
}


/* ------------------------------------------------------------
   Footer links
   ------------------------------------------------------------ */

.gigl-footer-links {
    display: flex;
    align-items: center;

    gap: 20px;
}


.gigl-footer-links a {
    color: var(--gigl-muted);

    font-family: var(--polymtl-gigl-font-body);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.2;

    text-decoration: none;

    transition:
        color 160ms ease;
}


.gigl-footer-links a:hover {
    color: var(--gigl-orange);
}


    /* ============================================================
       GIGL FOCUS
       ============================================================ */

    .gigl-page a:focus-visible,
    .gigl-page input:focus-visible {
      outline:
        3px solid
        rgba(241, 90, 34, 0.28);

      outline-offset: 3px;
    }


    /* ============================================================
       MOBILE
       ============================================================ */

    @media (max-width: 760px) {

      /*
       * IMPORTANT:
       * The width calculation is deliberately controlled here.
       * Every GIGL section and component uses the same container,
       * preventing the right-shift problem that appeared before.
       */

      .gigl-container {
        width:
          calc(100% - 28px);

        max-width:
          var(--gigl-container);
      }


      /* Header */

      .gigl-topbar {
        min-height: 78px;

        gap: 10px;
      }

      .gigl-brand {
        width: 100%;

        gap: 12px;
      }

      .gigl-poly-logo {
        width: 145px;

        max-height: 48px;

        flex: 0 0 auto;
      }

      .gigl-brand-divider {
        height: 34px;
      }

      .gigl-department-name {
        min-width: 0;
      }

      .gigl-department-name strong {
        font-size: 11px;

        line-height: 1.15;
      }

      .gigl-department-name span {
        margin-top: 3px;

        font-size: 9px;
      }

      .gigl-department-link {
        display: none;
      }


      /* Hero */

      .gigl-hero {
        padding:
          24px 0 28px;
      }

      .gigl-eyebrow {
        margin-bottom: 15px;

        font-size: 11px;
      }

      .gigl-hero h1 {
        max-width: 100%;

        font-size:
          clamp(
            40px,
            11vw,
            52px
          );

        line-height: 0.98;
      }

      .gigl-hero-description {
        max-width: 100%;

        margin-top: 18px;

        font-size: 15px;

        line-height: 1.6;
      }


      /* Main */

      .gigl-main {
        padding:
          34px 0 42px;
      }


      /* Section heading */

      .gigl-section-heading {
        display: block;

        margin-bottom: 20px;
      }

      .gigl-section-heading h2 {
        font-size: 25px;
      }

      .gigl-section-heading p {
        margin-top: 6px;

        font-size: 14px;
      }


      /* Search */

      .gigl-search-wrapper {
        width: 100%;

        margin-bottom: 20px;
      }

      .gigl-search {
        width: 100%;

        height: 52px;
      }


      /* Cards */

      .gigl-forms-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 16px;
      }

      .gigl-form-card {
        width: 100%;
        min-width: 0;

        min-height: 0;

        padding: 24px;

        border-radius: 16px;
      }

      .gigl-card-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 18px;
      }

      .gigl-form-card h3 {
        font-size: 22px;
      }

      .gigl-form-card p {
        font-size: 14px;

        line-height: 1.6;
      }

      .gigl-card-footer {
        margin-top: 20px;

        padding-top: 18px;

        gap: 10px;
      }

      .gigl-card-link {
        font-size: 13px;
      }

      .gigl-card-tag {
        font-size: 10px;
      }


      /* ========================================================
         PASSWORD RESET — MOBILE FIX
         
         This is deliberately changed from the desktop horizontal
         layout to a fully contained vertical layout.
         
         Most importantly:
         width: 100%;
         box-sizing: border-box;
         and the button is allowed to occupy the full inner width.
         ======================================================== */

      .gigl-password-reset {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;

        margin-top: 20px;

        padding: 20px;

        border-radius: 14px;
      }

      .gigl-password-reset-content {
        width: 100%;

        display: flex;
        align-items: flex-start;

        gap: 13px;
      }

      .gigl-password-reset-icon {
        width: 42px;
        height: 42px;
      }

      .gigl-password-reset-text {
        flex: 1 1 auto;

        min-width: 0;
      }

      .gigl-password-reset-text h3 {
        font-size: 15px;

        line-height: 1.35;
      }

      .gigl-password-reset-text p {
        font-size: 12px;

        line-height: 1.45;
      }

      /*
       * The button is now explicitly inside the box.
       * No negative margins, viewport widths or fixed positioning.
       */

      .gigl-reset-button {
        width: 100%;
        max-width: 100%;

        min-height: 44px;

        margin: 0;

        padding:
          11px 14px;

        align-self: stretch;

        border-radius: 10px;

        white-space: normal;

        text-align: center;
      }


      /* Help */

      .gigl-help {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 18px;

        margin-top: 36px;

        padding: 22px;

        border-radius: 14px;
      }

      .gigl-help-content {
        width: 100%;
      }

      .gigl-help-content h2 {
        font-size: 17px;
      }

      .gigl-help-content p {
        font-size: 13px;
      }

      .gigl-help-button {
        width: 100%;

        min-height: 42px;

        margin: 0;

        text-align: center;
      }


      /* Footer */

      .gigl-footer-inner {
        min-height: 78px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 7px;

        padding:
          16px 0;
      }

      .gigl-footer-brand {
        font-size: 11px;

        text-align: center;
      }

      .gigl-footer-links {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 16px;
      }

      .gigl-footer-links a {
        font-size: 11px;
      }

    }


    /* ============================================================
       VERY SMALL PHONES
       ============================================================ */

    @media (max-width: 380px) {

      .gigl-container {
        width:
          calc(100% - 24px);
      }

      .gigl-brand {
        gap: 9px;
      }

      .gigl-poly-logo {
        width: 125px;
      }

      .gigl-department-name strong {
        font-size: 10px;
      }

      .gigl-department-name span {
        font-size: 8px;
      }

      .gigl-hero h1 {
        font-size: 38px;
      }

      .gigl-form-card {
        padding: 20px;
      }

      .gigl-password-reset {
        padding: 18px;
      }

      .gigl-password-reset-content {
        gap: 11px;
      }

      .gigl-password-reset-text h3 {
        font-size: 14px;
      }

      .gigl-card-footer {
        align-items: flex-start;
      }

    }


/* ============================================================
   POLYTECHNIQUE FOUR-COLOUR BAR
   ============================================================ */

.gigl-color-bar {
    display: block;

    width: 100%;
    height: 8px;

    margin: 0;
    padding: 0;

    background: var(--polymtl-gigl-poly-gradient);
}


/* ============================================================
   GIGL APPLICATION — FINAL HERO SPACING
   ============================================================ */

/*
 * The Corporate design system provides a generic, editorial
 * hero with large vertical spacing.
 *
 * The GIGL forms application intentionally uses a more compact
 * hero, so this application-specific rule has greater
 * specificity than the Corporate .gigl-hero rule.
 */

.gigl-site .gigl-hero {
    padding-top: 38px;
    padding-bottom: 42px;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {

    .gigl-site .gigl-hero {
        padding-top: 30px;
        padding-bottom: 34px;
    }

}


/* ============================================================
   GIGL APPLICATION — FOOTER SPACING
   ============================================================ */

/*
 * Remove external spacing above the footer so that the footer
 * follows the main application section without an artificial
 * gap.
 */

.gigl-site .gigl-footer {
    margin-top: 0;
}


/* ============================================================
   GIGL SEARCH — HIDDEN CARD STATE
   ============================================================ */

.gigl-form-card[hidden] {
    display: none !important;
}


/* ============================================================
   GIGL PASSWORD RESET — BUTTON TEXT COLOR
   ============================================================ */

/*
 * Keep the password-reset action text white.
 * The more specific selector prevents general link styles
 * from overriding the button design.
 */

.gigl-site .gigl-reset-button,
.gigl-site .gigl-reset-button:link,
.gigl-site .gigl-reset-button:visited {
    color: #FFFFFF;
}

.gigl-site .gigl-reset-button:hover,
.gigl-site .gigl-reset-button:focus {
    color: #FFFFFF;
}


/* ============================================================
   GIGL HELP — BUTTON COLOR
   ============================================================ */

/*
 * Preserve the departmental orange used by the help link.
 * These selectors prevent generic WordPress/corporate link
 * styles from overriding the component.
 */

.gigl-site .gigl-help-button,
.gigl-site .gigl-help-button:link,
.gigl-site .gigl-help-button:visited {
    color: var(--gigl-orange);
}

.gigl-site .gigl-help-button:hover,
.gigl-site .gigl-help-button:focus {
    color: var(--gigl-orange-dark);
}


/* ============================================================
   GIGL APPLICATION — TYPOGRAPHY REFINEMENT
   ============================================================ */

/*
 * Temporary application-specific heading scale.
 *
 * The current fallback font renders larger/heavier than the
 * intended typeface. These values improve readability while
 * preserving the visual hierarchy of the GIGL design.
 */


/* ------------------------------------------------------------
   Hero title
   "Les formulaires, simplement."
   ------------------------------------------------------------ */

.gigl-site .gigl-hero h1 {
    font-family:
        var(--polymtl-gigl-font-display);

    font-size:
        clamp(
            2.75rem,
            6vw,
            5rem
        );

    font-weight: 800;
}


/* ------------------------------------------------------------
   Main section title
   "Choisir une catégorie"
   ------------------------------------------------------------ */

.gigl-site .gigl-section-heading h2 {
    font-family:
        var(--polymtl-gigl-font-display);

    font-size: 1.75rem;

    font-weight: 700;
}


/* ------------------------------------------------------------
   Form card titles
   ------------------------------------------------------------ */

.gigl-site .gigl-form-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
}


/* ------------------------------------------------------------
   Password reset title
   ------------------------------------------------------------ */

.gigl-site .gigl-password-reset h3 {
    font-size: 1.125rem;
}


/* ------------------------------------------------------------
   Help title
   ------------------------------------------------------------ */

.gigl-site .gigl-help-content h2 {
    font-size: 1.375rem;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .gigl-site .gigl-hero h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .gigl-site .gigl-section-heading h2 {
        font-size: 1.5rem;
    }

    .gigl-site .gigl-form-card h3 {
        font-size: 1.125rem;
    }

    .gigl-site .gigl-password-reset h3 {
        font-size: 1.0625rem;
    }

    .gigl-site .gigl-help-content h2 {
        font-size: 1.25rem;
    }

}


/* ============================================================
   GIGL FORM CARDS — READABLE TITLES
   ============================================================ */

/*
 * Card titles are interface/action text, not display headings.
 * Explicitly prevent the condensed Giorgio heading style from
 * affecting them.
 */

.gigl-site .gigl-form-card h3 {
    font-family:
        var(--polymtl-gigl-font-body);

    font-size: 1.25rem;
    font-weight: 700;

    font-stretch: normal;

    line-height: 1.3;

    letter-spacing: 0;

    text-transform: none;
}


/* ============================================================
   GIGL v4.0 — ACCEPTED FINAL LAYOUT / TYPOGRAPHY OVERRIDES
   ============================================================ */

/* Sticky footer layout, WordPress-aware. */
.gigl-site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.gigl-site > .wp-block-post-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.gigl-site > .wp-block-post-content > .gigl-page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.gigl-site > .wp-block-post-content > .gigl-page > .gigl-main,
.gigl-site > .wp-block-post-content > .gigl-main {
    flex: 1 0 auto;
}

.gigl-site > .gigl-header,
.gigl-site > .gigl-footer {
    flex: 0 0 auto;
}

/* Hero: strong Giorgio display face. */
.polymtl-gigl-site.gigl-site .gigl-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--gigl-text);
    font-family: var(--polymtl-gigl-font-display);
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: 0;
    text-transform: uppercase;
}

.polymtl-gigl-site.gigl-site .gigl-hero h1 span {
    color: var(--gigl-orange);
}

/* Major section heading. */
.polymtl-gigl-site.gigl-site .gigl-section-heading h2 {
    font-family: var(--polymtl-gigl-font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Form card titles: Polytechnique navigation-style Giorgio treatment. */
.polymtl-gigl-site.gigl-site .gigl-form-card h3 {
    font-family: var(--polymtl-gigl-font-display);
    font-size: 1.75rem;
    font-weight: 100;
    font-stretch: normal;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

/* Utility headings: same institutional family, intentionally subordinate. */
.polymtl-gigl-site.gigl-site .gigl-password-reset-text h3 {
    font-family: var(--polymtl-gigl-font-display);
    font-size: 1.0625rem;
    font-weight: 100;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.polymtl-gigl-site.gigl-site .gigl-help-content h2 {
    font-family: var(--polymtl-gigl-font-display);
    font-size: 1.25rem;
    font-weight: 100;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Explicit action-link colors so generic WordPress/corporate link rules cannot win. */
.polymtl-gigl-site.gigl-site .gigl-reset-button,
.polymtl-gigl-site.gigl-site .gigl-reset-button:link,
.polymtl-gigl-site.gigl-site .gigl-reset-button:visited,
.polymtl-gigl-site.gigl-site .gigl-reset-button:hover,
.polymtl-gigl-site.gigl-site .gigl-reset-button:focus {
    color: #FFFFFF !important;
}

.polymtl-gigl-site.gigl-site .gigl-help-button,
.polymtl-gigl-site.gigl-site .gigl-help-button:link,
.polymtl-gigl-site.gigl-site .gigl-help-button:visited {
    color: var(--gigl-orange) !important;
}

.polymtl-gigl-site.gigl-site .gigl-help-button:hover,
.polymtl-gigl-site.gigl-site .gigl-help-button:focus {
    color: var(--gigl-orange-dark) !important;
}

/* Balanced closing band; content determines final height. */
.gigl-footer {
    margin-top: 0;
    padding-block: 1.25rem;
}

@media (max-width: 760px) {
    .polymtl-gigl-site.gigl-site .gigl-section-heading h2 {
        font-size: 2rem;
    }

    .polymtl-gigl-site.gigl-site .gigl-form-card h3 {
        font-size: 1.625rem;
    }
}

/* The top band should be monochrome or move to the complementary blue color.
 * The variable names were preserved but the color values changed */
.polymtl-gigl-site {

    /* --------------------------------------------------------
       BRAND COLORS
       -------------------------------------------------------- */

    --polymtl-gigl-poly-red: #d94a32;    /* Burnt Red */
    --polymtl-gigl-poly-orange: #f15a22;   /* Orange */
    --polymtl-gigl-poly-green: #456080; /* Slate Blue */
    --polymtl-gigl-poly-blue: #0b2342;  /* Deep Navy */


    /* --------------------------------------------------------
       BRAND GRADIENT
       -------------------------------------------------------- */

    --polymtl-gigl-poly-gradient:
        linear-gradient(
            90deg,
            var(--polymtl-gigl-poly-red) 0%,
            var(--polymtl-gigl-poly-orange) 33.33%,
            var(--polymtl-gigl-poly-green) 66.66%,
            var(--polymtl-gigl-poly-blue) 100%
        );

    --polymtl-gigl-poly-gradient-vertical:
        linear-gradient(
            180deg,
            var(--polymtl-gigl-poly-red) 0%,
            var(--polymtl-gigl-poly-orange) 33.33%,
            var(--polymtl-gigl-poly-green) 66.66%,
            var(--polymtl-gigl-poly-blue) 100%
        );
}