/* =========================================================
   TLG Layout + Breadcrumb Consistency
   Purpose:
   - one predictable main container rhythm across every routed page
   - one breadcrumb visual system across portal, submit, account, listing and news pages
   - no header overlap, no random 145/195px side margins fighting each other
   ========================================================= */
:root{
  --tlg-page-max:1180px;
  --tlg-page-gutter:clamp(16px,3.6vw,32px);
  --tlg-page-top:clamp(28px,5vw,72px);
  --tlg-page-bottom:clamp(42px,7vw,88px);
  --tlg-crumb-size:clamp(12px,.22vw + 11.5px,14px);
  --tlg-crumb-gap:clamp(14px,2vw,22px);
}

/* Universal main shells: same width, same left/right gutters, same first-block start. */
body.tlg-body:not(.home):not(.front-page) main,
body.tlg-body:not(.home):not(.front-page) main#content,
body.tlg-body:not(.home):not(.front-page) .tlg-main,
body.tlg-body:not(.home):not(.front-page) .tlg-news,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell,
body.tlg-body:not(.home):not(.front-page) .tlg-account-shell,
body.tlg-body:not(.home):not(.front-page) .tlg-single-shell,
body.tlg-body:not(.home):not(.front-page) .tlg-archive-shell,
body.tlg-body:not(.home):not(.front-page) .tlg-vivre-portal,
body.tlg-body:not(.home):not(.front-page) .tlg-work-portal,
body.tlg-body:not(.home):not(.front-page) .tlg-escape-portal,
body.tlg-body:not(.home):not(.front-page) .tlg-civic-section-page,
body.tlg-body:not(.home):not(.front-page) .tlg-search-page,
body.tlg-body:not(.home):not(.front-page) .tlg-content-page{
  width:100%!important;
  max-width:var(--tlg-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--tlg-page-gutter)!important;
  padding-right:var(--tlg-page-gutter)!important;
  padding-top:var(--tlg-page-top)!important;
  padding-bottom:var(--tlg-page-bottom)!important;
  box-sizing:border-box!important;
}

/* The selected main node itself should not add extra Bootstrap/container margins internally. */
body.tlg-body:not(.home):not(.front-page) main > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-main > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-news > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-account-shell > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-single-shell > .container,
body.tlg-body:not(.home):not(.front-page) .tlg-archive-shell > .container{
  max-width:100%!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Hero/banner modules must start from the same y-level after the header. */
body.tlg-body:not(.home):not(.front-page) .tlg-news-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-account-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-search-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-single-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-ohio-section-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-vp-subhero,
body.tlg-body:not(.home):not(.front-page) .tlg-work-subhero,
body.tlg-body:not(.home):not(.front-page) .tlg-escape-subhero{
  margin-top:0!important;
  padding-top:0!important;
}

/* Section/hero cards should align with the unified main width, not create a second page system. */
body.tlg-body:not(.home):not(.front-page) .tlg-news-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-news-search,
body.tlg-body:not(.home):not(.front-page) .tlg-news-filter-panel,
body.tlg-body:not(.home):not(.front-page) .tlg-news-results,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-form,
body.tlg-body:not(.home):not(.front-page) .tlg-account-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-account-stats,
body.tlg-body:not(.home):not(.front-page) .tlg-account-panels,
body.tlg-body:not(.home):not(.front-page) .tlg-single-card,
body.tlg-body:not(.home):not(.front-page) .tlg-archive-grid,
body.tlg-body:not(.home):not(.front-page) .tlg-vp-section,
body.tlg-body:not(.home):not(.front-page) .tlg-work-section,
body.tlg-body:not(.home):not(.front-page) .tlg-escape-section{
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* One breadcrumb system, regardless of each module's class name. */
body.tlg-body .tlg-breadcrumb-line,
body.tlg-body .tlg-single-breadcrumb,
body.tlg-body .tlg-submit-breadcrumb,
body.tlg-body .tlg-vp-breadcrumb,
body.tlg-body .tlg-work-breadcrumb,
body.tlg-body .tlg-escape-breadcrumb,
body.tlg-body nav[class*="breadcrumb"],
body.tlg-body div[class*="breadcrumb"]{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:.45rem!important;
  width:100%!important;
  max-width:var(--tlg-page-max)!important;
  margin:0 0 var(--tlg-crumb-gap)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:#465568!important;
  font-size:var(--tlg-crumb-size)!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

body.tlg-body .tlg-breadcrumb-line a,
body.tlg-body .tlg-single-breadcrumb a,
body.tlg-body .tlg-submit-breadcrumb a,
body.tlg-body .tlg-vp-breadcrumb a,
body.tlg-body .tlg-work-breadcrumb a,
body.tlg-body .tlg-escape-breadcrumb a,
body.tlg-body nav[class*="breadcrumb"] a,
body.tlg-body div[class*="breadcrumb"] a{
  color:#c41230!important;
  text-decoration:none!important;
  font-size:inherit!important;
  font-weight:800!important;
}

body.tlg-body .tlg-breadcrumb-line a:hover,
body.tlg-body .tlg-single-breadcrumb a:hover,
body.tlg-body .tlg-submit-breadcrumb a:hover,
body.tlg-body .tlg-vp-breadcrumb a:hover,
body.tlg-body .tlg-work-breadcrumb a:hover,
body.tlg-body .tlg-escape-breadcrumb a:hover,
body.tlg-body nav[class*="breadcrumb"] a:hover,
body.tlg-body div[class*="breadcrumb"] a:hover{
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

/* Normalize breadcrumb text separators visually when templates use arrows or slashes. */
body.tlg-body .tlg-single-breadcrumb span,
body.tlg-body .tlg-submit-breadcrumb span,
body.tlg-body .tlg-vp-breadcrumb span,
body.tlg-body .tlg-work-breadcrumb span,
body.tlg-body .tlg-escape-breadcrumb span{
  color:#6b7788!important;
  font-size:inherit!important;
  line-height:inherit!important;
}

/* Keep first cards/hero content from adding extra top offset after breadcrumbs. */
body.tlg-body .tlg-breadcrumb-line + *,
body.tlg-body .tlg-single-breadcrumb + *,
body.tlg-body .tlg-submit-breadcrumb + *,
body.tlg-body .tlg-vp-breadcrumb + *,
body.tlg-body .tlg-work-breadcrumb + *,
body.tlg-body .tlg-escape-breadcrumb + *{
  margin-top:0!important;
}

/* Homepage remains full-bleed/visual, but its internal content grid keeps the same max width. */
body.tlg-body.home .tlg-ohio-copy-home,
body.tlg-body.front-page .tlg-ohio-copy-home{
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
}
body.tlg-body.home .tlg-ohio-section-intro .container,
body.tlg-body.front-page .tlg-ohio-section-intro .container,
body.tlg-body.home .tlg-ohio-copy-sections,
body.tlg-body.front-page .tlg-ohio-copy-sections,
body.tlg-body.home .tlg-ohio-copy-actions,
body.tlg-body.front-page .tlg-ohio-copy-actions{
  max-width:var(--tlg-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--tlg-page-gutter)!important;
  padding-right:var(--tlg-page-gutter)!important;
  box-sizing:border-box!important;
}

@media (max-width:900px){
  :root{--tlg-page-top:28px;--tlg-page-gutter:20px;}
}
@media (max-width:640px){
  :root{--tlg-page-top:22px;--tlg-page-gutter:16px;--tlg-page-bottom:56px;}
  body.tlg-body .tlg-breadcrumb-line,
  body.tlg-body .tlg-single-breadcrumb,
  body.tlg-body .tlg-submit-breadcrumb,
  body.tlg-body .tlg-vp-breadcrumb,
  body.tlg-body .tlg-work-breadcrumb,
  body.tlg-body .tlg-escape-breadcrumb,
  body.tlg-body nav[class*="breadcrumb"],
  body.tlg-body div[class*="breadcrumb"]{
    gap:.35rem!important;
    margin-bottom:16px!important;
  }
}

/* =========================================================
   Submit shell final alignment
   The /soumettre hub and /soumettre/* children use <main class="tlg-submit-shell">.
   Force that main node to use the same page math as news/listing/article shells:
   max-width 1180px, centered, with padding clamp(28px, 5vw, 76px) 16px.
   ========================================================= */
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell{
  width:100%!important;
  max-width:var(--tlg-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:clamp(28px, 5vw, 76px) 16px clamp(42px, 7vw, 88px)!important;
  box-sizing:border-box!important;
}

body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell > *,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell > *{
  max-width:100%!important;
}

body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell .tlg-submit-breadcrumb{
  margin-top:0!important;
  margin-bottom:var(--tlg-crumb-gap)!important;
}

body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell .tlg-submit-hero,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell .tlg-submit-form,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell .tlg-submit-card,
body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell .tlg-submit-rules{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media (max-width:640px){
  body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell,
  body.tlg-body:not(.home):not(.front-page) .tlg-submit-shell{
    padding:22px 16px 56px!important;
  }
}


/* =========================================================
   Submit root shell correction — v2.0.5
   Root cause: tlg-core-submit.css kept /soumettre at 1080px while
   other pages use the shared 1180px shell. Force the submit hub and
   all children to the same main geometry as articles, listings,
   Actualités, account and portal pages.
   ========================================================= */
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell{
  display:block!important;
  width:100%!important;
  max-width:var(--tlg-page-max)!important;
  margin-inline:auto!important;
  padding-block:var(--tlg-page-top) var(--tlg-page-bottom)!important;
  padding-inline:var(--tlg-page-gutter)!important;
  box-sizing:border-box!important;
}
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-hero,
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-grid,
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-form,
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-rules,
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-success,
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-error{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell .tlg-submit-breadcrumb{
  min-height:0!important;
  margin:0 0 var(--tlg-crumb-gap)!important;
}
@media (max-width:640px){
  body.tlg-body:not(.home):not(.front-page) main.tlg-submit-shell{
    padding-block:22px 56px!important;
    padding-inline:16px!important;
  }
}
