/* ============================================================================
 * c5-compat.css — Contao 5.3 visual-compat shims for the titanum theme
 * ----------------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * The titanum theme was written for Contao 3.5. Its CSS targets C3-era
 * element markup. Contao 5.3 changed the markup that some core content
 * elements emit, so a few theme rules no longer match. This file restores
 * the intended C3 visual output on C5 WITHOUT editing vendor code, the
 * schema, or the original theme files. It is loaded from fe_page.html5
 * AFTER styles.css + customize.css so it wins the cascade.
 *
 * Loaded ONLY by the upgraded (c5) site. Do not copy to c3/c4.
 *
 * Each block below cites: (a) the C3 vs C5 markup difference, (b) the
 * affected theme rule, (c) the measured before/after on letstalkshark.com
 * (live C3) vs ltsc5.bergis.cc (c5 staging).
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Multicolumn column images render at NATURAL size on C5 (were 100%-wide).
 *
 * C3 markup (per column, e.g. a 1/4 image column):
 *   <div class="ce_image one_fourth last block">
 *     <figure class="image_container"><a><img width="523" height="523"></a></figure>
 *   </div>
 *   -> theme rule  #container .image_container img { width:100% }  => 206px
 *
 * C5 markup (core multicolumn element, PHP-generated, NOT theme-overridable):
 *   <div class="one_fourth content-image"><figure><a><img ...></a></figure></div>
 *   -> NO .image_container, so the theme rule never matches => 523px (natural)
 *
 * Measured (home, bio box): live 248px tall vs c5 560px tall before fix.
 * Fix: constrain images inside multicolumn columns to the column width.
 * ========================================================================== */
#main .inside .content-image img,
#main .inside .content-image figure img,
#main .inside .content-text  img,
#main .inside .content-text  figure img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
 * 2. "Read more" hyperlink buttons lost their .button styling on C5.
 *
 * C3 markup (theme ce_hyperlink.html5): the <a> carries the button classes:
 *   <a class="hyperlink_txt button ce_hyperlink medium rounded5 peach" ...>
 *   -> theme rule  .button { background:#005cb8; color:#fff; padding:10px 12px;
 *      display:inline-block; border-radius via .rounded5; ... }  => blue button
 *
 * C5 markup (core ce_hyperlink.html5): bare <a>, classes moved to a wrapper:
 *   <div class="medium rounded5 peach content-hyperlink">
 *     <a class="hyperlink_txt" ...>
 *   -> the <a> has no .button class => renders as a plain inline link.
 *
 * Measured (home): live read-more is a 40px tall blue rounded button; c5 was a
 * 20px plain grey inline link.
 * Fix: re-apply the .button visual contract to the C5 hyperlink wrapper's <a>.
 * The background colour (#005cb8) is the theme's standard button colour
 * (customize.css: .button { background-color:#005cb8 }).
 * ========================================================================== */
.content-hyperlink a {
    display: inline-block;
    color: #fff;
    background-color: #005cb8;
    padding: 10px 12px;
    text-align: center;
    margin-bottom: 18px;
    font-weight: bold;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.25);
    cursor: pointer;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 10px 20px rgba(255,255,255,0.12),
        inset 0 -10px 30px rgba(0,0,0,0.12);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 10px 20px rgba(255,255,255,0.12),
        inset 0 -10px 30px rgba(0,0,0,0.12);
    box-shadow: 0 2px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 10px 20px rgba(255,255,255,0.12),
        inset 0 -10px 30px rgba(0,0,0,0.12);
}
/* size modifiers carried on the C5 wrapper div (C3 had them on the <a>) */
.content-hyperlink.medium a  { font-size: 15px; }
.content-hyperlink.small  a  { padding: 8px 10px;  font-size: 11px; }
.content-hyperlink.large  a  { padding: 15px 22px; font-size: 15px; }
/* corner radii carried on the C5 wrapper div */
.content-hyperlink.rounded3  a { border-radius: 3px; }
.content-hyperlink.rounded5  a { border-radius: 5px; }
.content-hyperlink.rounded10 a { border-radius: 10px; }
.content-hyperlink.rounded99 a { border-radius: 99px; }

/* hover / active (mirror the theme .button states) */
.content-hyperlink a:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.2),
        inset 0 1px 1px rgba(255,255,255,0.5),
        inset 0 10px 20px rgba(255,255,255,0.20),
        inset 0 -10px 20px rgba(0,0,0,0.12);
    box-shadow: 0 2px 1px rgba(0,0,0,0.2),
        inset 0 1px 1px rgba(255,255,255,0.5),
        inset 0 10px 20px rgba(255,255,255,0.20),
        inset 0 -10px 20px rgba(0,0,0,0.12);
}
.content-hyperlink a:active {
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3), inset 0 10px 20px rgba(255,255,255,0.08);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.3), inset 0 10px 20px rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------------------------
 * 3. Headline icons lost their icon font on C5.
 *
 * The theme's icon-font rule targets C3 element classes only:
 *   .ce_headline[class^="icon-"]:before, .ce_headline[class*="icon-"]:before
 * Contao 5 renders headlines with class `content-headline` (C3 `ce_headline`),
 * so `.icon-home-2` etc. on the <h1> no longer get `font-family:'icons'` and
 * the glyph renders from the body font (invisible). The per-icon content
 * rules (.icon-home-2:before { content:'\e865' }) already match — they target
 * the `icon-xxx` class, which is unchanged in C5.
 *
 * Measured (home): live h1::before font-family = "icons"; c5 fell back to
 * "Source Sans Pro" (icon invisible).
 * Fix: re-declare the icon font for the C5 class names.
 * ========================================================================== */
.content-headline[class^="icon-"]:before,
.content-headline[class*="icon-"]:before,
.content-text[class^="icon-"]:before,
.content-text[class*="icon-"]:before,
.content-headline[class^="icon-"] span:before,
.content-headline[class*="icon-"] span:before {
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.5em;
    text-align: center;
    line-height: 1em;
}

/* ---------------------------------------------------------------------------
 * 4. Multicolumn column images are inline on C5 (were block in C3).
 *
 * C3 emitted image elements the theme treats as block; the C5 core
 * multicolumn element renders column images as bare <figure><img> (inline).
 * The inline baseline adds ~25px of visual gap between a column image and
 * the element below it (e.g. between the bio photo and the "read more"
 * button: live gap 41px vs c5 16px is compensated by other C5 spacing, but
 * inline images also create uneven line-box gaps elsewhere).
 * Fix: restore block display for multicolumn column images.
 * ========================================================================== */
#main .inside .content-image figure img,
#main .inside .content-text  figure img,
#main .inside .content-image img,
#main .inside .content-text  img {
    display: block;
}

/* ---------------------------------------------------------------------------
 * 5. Home "read more" hyperlink — restore lost per-element margin.
 *
 * On the C3 live site the home "read more" hyperlink element carries a
 * per-element inline style  <div class="block hyperlink" style="margin-top:20px">
 * (the C3 theme ce_hyperlink.html5 echoes $this->style). Contao 5's core
 * ce_hyperlink.html5 does NOT render a per-element style attribute, so the
 * 20px top margin was lost and the button sits 25px too high (measured gap
 * between the bio photo and the button: live 41px vs c5 16px).
 *
 * The element's stable alias/id is `article-151` (the mod_article wrapper).
 * We restore the margin by that id. NOTE for reuse: C3 per-element inline
 * styles ($this->style) are NOT reproduced by C5 core templates — when you
 * find a C5 element sitting where a C3 inline style pushed it, add a targeted
 * rule by the element's stable id (#article-NNN) here.
 * ========================================================================== */
#article-151 {
    margin-top: 20px;
}

/* ---------------------------------------------------------------------------
 * 6. Gallery (ce_gallery) renders as a VERTICAL STACK on C5 (was a 3-col row).
 *
 * C3 markup (theme gallery, e.g. a 3-column gallery):
 *   <div class="ce_gallery full block"><ul>
 *     <li class="row3 col_0 col_first"><figure>...<img width="920" height="518"></figure></li>
 *     <li class="row3 col_1">...</li>
 *     <li class="row3 col_2 col_last">...</li>
 *   </ul></div>
 *   -> theme rules  .ce_gallery .row3 { width:30%; margin-left:5%; float:left;
 *      margin-bottom:15px }  .ce_gallery .col_first { margin-left:0; clear:both }
 *      .ce_gallery img { width:100% }  =>  3 images side-by-side, ~294px each, 181px tall
 *
 * C5 markup (core content-gallery element, PHP-generated, NOT theme-overridable):
 *   <div class="full content-gallery content-gallery--cols-3"><ul>
 *     <li><figure>...<img width="920" height="518"></figure></li>
 *     <li>...</li>
 *     <li>...</li>
 *   </ul></div>
 *   -> the C3 row3/col_first classes are GONE, so none of the theme gallery
 *      rules match. The 3 <li> fall back to block layout => 3 images STACKED
 *      vertically at natural 920px (1568px tall). This is the "middle section
 *      doesn't match" on the workshops page (staging 7164px vs live 4435px).
 *
 * Measured (workshops, middle galleries): live 181px tall, 294px images;
 * c5 before fix 1568px tall, 920px images.
 * Fix: re-apply the C3 row3 gutter (30% + 5% left, first col flush) to the
 * stable C5 class `content-gallery--cols-3`. The --cols-3 suffix is emitted
 * by C5 core for a 3-column gallery, so this is data-driven and reusable —
 * no per-element id needed. The C3 `.col_first` flush (margin-left:0 +
 * clear:both) must apply to the FIRST <li> OF EACH ROW, i.e. every 3rd
 * boundary -> `:nth-child(3n+1)` (a single `:first-child` only clears row 1
 * and overflows row 2's last item, which is what happened on the about page:
 * 6-image gallery wrapped to a spurious 3rd row, 541px instead of 361px).
 * (For other column counts C5 emits content-gallery--cols-N; extend the same
 * rule per N if needed, using :nth-child(Nn+1) for the row-start flush.)
 * ========================================================================== */
.content-gallery--cols-3 > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.content-gallery--cols-3 > ul > li { float: left; width: 30%; margin-left: 5%; margin-bottom: 15px; }
.content-gallery--cols-3 > ul > li:nth-child(3n+1) { margin-left: 0; clear: both; }
.content-gallery--cols-3 img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
 * 7. Form top-row text fields render at NATURAL width on C5 (were 100% of col).
 *
 * C3 markup (theme form fields): each field wrapped in
 *   <div class="input-wrapper block one_third first mandatory"><label/><input ...></div>
 *   -> theme rule  .input-wrapper input { width:100% } (or the one_third col
 *      width cascades)  =>  each text input fills its 191px column.
 *
 * C5 markup (core form widget): the field is wrapped in a .widget div that
 *   carries the size class:
 *   <div class="widget widget-text one_third first mandatory"><label/><input ...></div>
 *   -> the .widget wrapper is correctly sized (191px), but the theme's
 *      input-width rule no longer matches the C5 widget markup, so the
 *      <input> falls back to its intrinsic width (~57px) instead of filling
 *      the column.
 *
 * Measured (contact-22 upper row, Name/Phone/Mail): live 191px each; c5
 * before fix 57px each (their .widget wrapper was already 191px).
 * Fix: make text/email/tel/search inputs fill their widget column. box-sizing
 * border-box keeps the 191px total (the C3 inputs had borders that fit inside).
 * ========================================================================== */
.ce_form .widget input[type="text"],
.ce_form .widget input[type="email"],
.ce_form .widget input[type="tel"],
.ce_form .widget input[type="search"] {
    width: 100%;
    box-sizing: border-box;
}