@charset "UTF-8";
/*
  responsive.css – Joensuun suomalais-ranskalainen yhdistys ry
  Load AFTER css/style2.css:
    <link rel="stylesheet" type="text/css" href="css/style2.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
  Desktop (>980px) looks the same as before; smaller screens get a fluid,
  single-column layout and a button-style menu instead of the image slider.
*/

/* ---------- Fluid base (all sizes) ---------- */
*, *::before, *::after { box-sizing: border-box; }
img { /*max-width: 100%; height: auto; */}

.Fixbody,
.Fixbody #container,
.Fixfooter { width: auto; max-width: 980px; }
.fixjalka  { width: 100%; max-width: 960px; }

/* Main two-column table (has width="940px" attribute) */
#container table { width: 100% !important; max-width: 940px; }

/* Coloured box headers were fixed 600px / 330px */
div.nippleBox1 div.bar,
div.nippleBox div.bar { width: auto; }
div.nippleBox1, div.nippleBox { margin-bottom: 12px; }

/* Calendar / news images */
.Fixuutinen #kuvat { max-width: 100%; }
.Fixuutinen #kuvat img { max-width: 100%; max-height: 340px; height: auto; }

/* Long e-mail addresses and URLs must not push the page wider */
.Fixuutinen, .subtexti { overflow-wrap: anywhere; }

/* Facebook widget has inline width:330px */
.fb-page, .fb-page span, .fb-page iframe { max-width: 100% !important; }

/* Header / slider wrapper is 962px in imageMenu.css (loaded later in <body>,
   hence !important) */
@media (max-width: 980px) {
  #containermenu { width: auto !important; margin-right: 0 !important; }
}

/* ---------- Tablet & phone: stack columns ---------- */
@media (max-width: 820px) {
   
  .Fixbody #container { background-image: none; }

  #container table,
  #container table tbody,
  #container table tr,
  #container table td {
    display: block;
    width: 100% !important;
  }
  #container table td { padding: 0 12px; }

  /* Footer: stack the two texts */
  .Fixfooter { height: auto; min-height: 60px; padding: 10px 0; }
  .fixjalka td { display: block; }
  .footertext {
    float: none !important;
    text-align: center;
    padding: 4px 12px;
  }
  .Fixfooter {
    background-image: none;
  }
}

/* ---------- Phone: image slider -> button menu ---------- */
/* ---------- Hamburger toggle (button is added by responsive.js) ---------- */
.menu-toggle { display: none; }

/* ---------- Phone: image slider -> hamburger menu ---------- */
@media (max-width: 680px) {
  #containermenu { background: none !important; }
   img { max-width: 100%; height: auto; }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 24px);
    margin: 0 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: #273a8c;                 /* logo blue */
    color: #fff;
    font: bold 15px Verdana, sans-serif;
    cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 3px solid #F78CC4; outline-offset: 2px; }

  /* Three-line icon that turns into an X */
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s, background-color .2s;
  }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -7px; }
  .menu-icon::after  { top:  7px; }
  .menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon::after  { transform: translateY(-7px) rotate(-45deg); }

  .slideOuter {
    width: auto !important;
    height: auto !important;
    margin: 6px 12px 0 !important;
    overflow: visible;
  }
  /* Menu is hidden only when the script is running (no JS = links stay visible) */
  .js-menu .slideOuter { display: none; }
  .js-menu .slideOuter.is-open { display: block; }

  .slideOuter .slide {
    width: auto !important;
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    overflow: visible;
  }
  .slideOuter .slide li { float: none; }

  /* Override every width rule of the desktop slider */
  .slideOuter .slide li a,
  .slideOuter .slide li a.current,
  .slideOuter .slide a#p1, .slideOuter .slide a#p2, .slideOuter .slide a#p3,
  .slideOuter .slide a#p4, .slideOuter .slide a#p5, .slideOuter .slide a#p6 {
    float: none;
    display: flex;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    min-height: 46px;            /* comfortable touch target */
    padding: 0 14px;
    border: 0;
    border-left: 5px solid #4ebaff;
    border-radius: 4px;
    background: #f4f5f7;
    color: #1d2129;
    font: bold 15px/1.2 Verdana, sans-serif;
    text-decoration: none;
    transition: none;
  }
  .slideOuter .slide li a:hover,
  .slideOuter .slide li a[aria-current="page"] { background: #e4e7ee; }
  .slideOuter .slide li a[aria-current="page"]::before { content: "›"; margin-right: 8px; }
  .slideOuter .slide li a img { display: none; }
  .slideOuter .slide li a::after { content: attr(title); }

  /* Same colours as the section boxes */
  .slideOuter .slide a#p1 { border-left-color: #4ebaff !important; } /* Etusivu */
  .slideOuter .slide a#p2 { border-left-color: #90d5ec !important; } /* Uutiset */
  .slideOuter .slide a#p3 { border-left-color: #aad450 !important; } /* Kalenteri */
  .slideOuter .slide a#p4 { border-left-color: #F78CC4 !important; } /* Yhteystiedot */
  .slideOuter .slide a#p5 { border-left-color: #fbca54 !important; } /* Linkit */
  .slideOuter .slide a#p6 { border-left-color: #B060ED !important; } /* Galleria */

  /* Box headers: allow wrapping */
  div.nippleBox1 div.bar, div.nippleBox div.bar { height: auto; min-height: 25px; }
  div.nippleBox1 div.bar h4, div.nippleBox div.bar h4 { float: none; line-height: 1.4; padding: 3px 8px; }

  .Fixuutinen { padding: 5px 4px; }
}