/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2026 | 15:35:24 */
/*
  Name:         footer
  Type:         CSS
  Area:         website/footer.md
  Purpose:      The site footer: layout, language-aware text, newsletter form and small print.
  Depends on:   lang-switcher.css (.lang-id, .lang-en, .lang-de visibility rule)
  Used by:      Every page
  Loads:        Simple Custom CSS and JS · Where on site: Frontend · Where in page: In the header
  Last updated: 29 October 2026 (later)
*/

/* ==========================================================
   URAKAN FOOTER
   Paste into Simple Custom CSS and JS as its own CSS file.
   Works with the .lang-id / .lang-en / .lang-de visibility rule.
   ========================================================== */

/* ---- Band ---- */
.urakan-footer {
  background: #1A1712;
  color: #F5F0E8;
  margin-top: 0 !important;
  /* No side padding: content lines up with the page content above. */
  /* Bottom space = just enough for the floating light/dark and
     language buttons to sit like the next line under the copyright.
     Adjust this one value if they touch or float too far. */
  padding: 3rem 0 3.5rem !important;
  /* Paint the background out to both screen edges without
     changing the content width or causing sideways scrolling. */
  box-shadow: 0 0 0 100vmax #1A1712;
  clip-path: inset(0 -100vmax -100vmax -100vmax);  /* also fills any gap below */
}
.urakan-footer .footer-inner {
  max-width: none;
  margin: 0;
}
.urakan-footer p { margin: 0; }
.urakan-footer .wp-block-group { margin-block-start: 0; }

/* ---- Links ---- */
.urakan-footer a {
  color: #F5F0E8;
  text-decoration: none;
}
.urakan-footer a:focus-visible {
  outline: 2px solid #F5F0E8;
  outline-offset: 3px;
}

/* ---- Small column labels (sentence case, not all caps) ---- */
.urakan-footer .footer-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #E0564A;   /* the lighter red, made for dark backgrounds; held in both modes below */
  margin-bottom: 0.9rem;
}

/* ---- Contribute call-out ---- */
.urakan-footer .footer-callout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid #3A352D;
  align-items: center;
}
.urakan-footer .footer-callout-text {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  max-width: 24ch;
}
.urakan-footer .footer-callout-button { margin: 0; }
/* The call-out is hidden on the contribution guidelines pages, which
   already end in a form. Those pages (all three languages) carry the
   anchor id "kirim" on the form panel. The collection page is handled
   in the archive snippet. */
body:has(#kirim) .urakan-footer .footer-callout { display: none !important; }
/* ---- Four columns ---- */
.urakan-footer .footer-grid {
  gap: 3rem 4rem;
  margin: 0 0 3rem !important;
}
.urakan-footer .footer-grid > .wp-block-column:nth-child(1) { flex: 1.3 1 0; }
.urakan-footer .footer-grid > .wp-block-column:nth-child(2) { flex: 0.7 1 0; }
.urakan-footer .footer-grid > .wp-block-column:nth-child(3) { flex: 1 1 0; }
.urakan-footer .footer-grid > .wp-block-column:nth-child(4) { flex: 1.4 1 0; }

/* ---- Logo: the stacked lockup ----
   A static SVG (Custom HTML block in the footer template), not text, so
   it has no glitch effect. The footer is always Dark Ink, so it always
   uses the dark-background version. Block 64px high on desktop (239px
   wide); it scales down if the column is narrower (tablets). Phones
   are set in the phone part below. */
.urakan-footer .footer-logo {
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
  margin-bottom: 1rem;
  text-decoration: none !important;
  background-image: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.urakan-footer .footer-logo svg {
  display: block;
  width: 239px;
  max-width: 100%;
  height: auto;
}
.urakan-footer .footer-tagline {
  font-size: 17px;
  line-height: 1.55;
  color: #D9D2C5;
  margin-bottom: 0.5rem;
}
.urakan-footer .footer-muted {
  font-size: 14px;
  color: #A39C90;
}

.urakan-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 15px;
  line-height: 1.4;
}

/* ---- Newsletter column ---- */
.urakan-footer .footer-promise {
  font-size: 16px;
  line-height: 1.5;
  color: #D9D2C5;
  margin-bottom: 1rem;
}
.urakan-footer .wp-block-jetpack-contact-form { color: #F5F0E8 !important; }
.urakan-footer .wp-block-jetpack-contact-form label {
  color: #D9D2C5 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.urakan-footer .wp-block-jetpack-contact-form input[type="email"] {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 1rem !important;
  background: transparent !important;
  border: 1px solid #4A443A !important;
  border-radius: 999px !important;
  color: #F5F0E8 !important;
  font-size: 15px !important;
}
.urakan-footer .wp-block-jetpack-contact-form input[type="email"]:focus {
  border-color: #F5F0E8 !important;
  outline: none;
}
.urakan-footer .wp-block-jetpack-contact-form button {
  width: 100%;          /* full width of the form column */
  cursor: pointer;
}
/* The subscribe button fills the column, so it grows less
   than other buttons to stay inside the form edges. */
.urakan-footer .wp-block-jetpack-contact-form button:hover {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .urakan-footer .wp-block-jetpack-contact-form button:hover { transform: none; }
}

.urakan-footer.urakan-footer.urakan-footer .wp-block-jetpack-contact-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- Subscribe button: the same in every language ----
   The Indonesian form is a synced block that cannot carry the class
   urk-btn-outline, so the look is set here for all three. Outline at
   rest; red on hover and keyboard focus; and red as soon as the email
   is valid and the consent box is ticked (the form is ready to send).
   The class is repeated to beat the dark mode and outline rules, which
   use !important. :has() needs Safari 15.4 or newer; older browsers just
   keep the outline button. */
.urakan-footer.urakan-footer.urakan-footer .wp-block-jetpack-contact-form button {
  background: transparent !important;
  background-color: transparent !important;
  color: #F5F0E8 !important;
  border: 1px solid color-mix(in srgb, #F5F0E8 55%, transparent) !important;
}
.urakan-footer.urakan-footer.urakan-footer .wp-block-jetpack-contact-form button:hover,
.urakan-footer.urakan-footer.urakan-footer .wp-block-jetpack-contact-form button:focus-visible,
.urakan-footer.urakan-footer.urakan-footer .wp-block-jetpack-contact-form:has(input[type="email"]:valid):has(input[type="checkbox"]:checked) button {
  background: #C0392B !important;
  background-color: #C0392B !important;
  border-color: #C0392B !important;
  color: #F5F0E8 !important;
}

/* Email label sits inside the field as placeholder text.
   The visible label is hidden but still read by screen readers. */
.urakan-footer .grunion-field-email-wrap label,
.urakan-footer .wp-block-jetpack-field-email label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.urakan-footer .wp-block-jetpack-contact-form input[type="email"]::placeholder {
  color: #A39C90;
  opacity: 1;
}
.urakan-footer .wp-block-jetpack-contact-form input[type="email"]:focus::placeholder {
  color: transparent;
}

/* Consent: checkbox sits right next to its sentence */
.urakan-footer .grunion-field-consent-wrap label,
.urakan-footer .wp-block-jetpack-field-consent label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
}
/* The checkbox itself is drawn in "Same in light and dark mode" below */

/* Confirmation message after subscribing */
.urakan-footer .contact-form-submission,
.urakan-footer .contact-form-submission * {
  color: #F5F0E8 !important;
}
.urakan-footer .contact-form-submission h4,
.urakan-footer .wp-block-jetpack-contact-form h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

/* Instagram sits in the first column. On desktop it drops to the
   bottom of the row: the icon and the handle share one baseline, and
   that baseline sits on the bottom edge of the subscribe button (the
   descender of the g hangs below it, like type on a baseline).
   The logo moves down 6.3px so its top meets the top of the capital
   letters in the column labels next to it (Read, URAKAN, Updates),
   not the top of their line box. Tied to the label size (13px) and
   line height. */
@media (min-width: 782px) {
  .urakan-footer .footer-logo {
    margin-top: 6.3px;
  }
  .urakan-footer .footer-grid {
    align-items: stretch !important;          /* all columns same height */
  }
  .urakan-footer .footer-grid > .wp-block-column:nth-child(1) {
    display: flex;
    flex-direction: column;
  }
  .urakan-footer .footer-grid > .wp-block-column:nth-child(1) > .footer-social {
    margin-top: auto !important;              /* push to the bottom */
    /* -13.2px = -8px (cancels the link's tap padding) and -5.2px (the
       space under the baseline of the line). Measured on the live page,
       22 October 2026: the handle's baseline and the bottom edge of the
       button are the same line. Change it only together with the handle
       size (live: 16.9px, see the note below) or the icon size (26px). */
    margin-bottom: -13.2px !important;
  }
  /* Nothing may add space under the subscribe button,
     or the two bottoms won't line up. */
  .urakan-footer .footer-grid > .wp-block-column:nth-child(4) > *:last-child,
  .urakan-footer .wp-block-jetpack-contact-form,
  .urakan-footer .wp-block-jetpack-contact-form form,
  .urakan-footer .wp-block-jetpack-contact-form .wp-block-jetpack-button {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}
.urakan-footer .footer-social {
  padding-top: 1.25rem;
  margin-bottom: 0;
  gap: 0;
}
.urakan-footer .footer-social .wp-social-link {
  background: none !important;
  color: #F5F0E8 !important;
  font-size: 26px;
}
/* Icon and handle sit on one text line, not in a flex row: the handle's
   baseline is the same in Safari and Chrome (flex baselines differ
   between them), and the handle stays where the line puts it.
   Handle size: this file says 15px below, but WordPress core's rule
   ".wp-block-social-links .wp-social-link span:not(.screen-reader-text)"
   (0.65em of 26px) out-ranks it, so the live handle is 16.9px. */
.urakan-footer .footer-social .wp-social-link a {
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap;
  padding: 0.5rem;
  margin-left: -0.5rem;   /* keeps the handle's line aligned with the text above */
}
/* The icon is placed like the one on the author pages: centred on the
   handle's text, 9.6px (0.6rem) from it, and its drawn square starts on
   the left edge of the column, in line with the logo and the motto.
   top 3.9px (position: relative, no effect on the layout): lowers the
   icon from the baseline to the handle's centre (the centre of the text
   sits 0.4em, 6.76px, above the baseline), so the handle's line, and
   its baseline on the button's bottom edge on desktop, do not move.
   margin-left -3.25px: the Instagram square is drawn from x 3 to 21 of
   its 24-unit frame, so its drawn left edge is 3.25px inside the 26px
   frame; this pulls the drawn square onto the column edge.
   margin-right 1.2px: with the 8.4px blank between the two inline items
   (a space at 26px) it makes the 9.6px between the frame and the handle.
   Measured on the live page at 499px and 1280px wide, 29 October 2026
   (the drawn icon starts at the logo's left edge to 0.01px).
   Change these only together with the icon size (26px) or the handle
   size (live: 16.9px, see above). */
.urakan-footer .footer-social .wp-social-link svg {
  display: inline-block !important;
  vertical-align: -0.09em !important;
  margin-left: -3.25px;
  margin-right: 1.2px;
  fill: currentColor;
  position: relative;
  top: 3.9px;
}
.urakan-footer .footer-social .wp-block-social-link-label {
  display: inline !important;
  vertical-align: baseline !important;
  font-size: 15px;
  line-height: 1;
  padding: 0 !important;
}
/* No underline of any kind, whichever way the theme draws it */
.urakan-footer .footer-social a,
.urakan-footer .footer-social a:hover,
.urakan-footer .footer-social a *,
.urakan-footer .footer-social a:hover * {
  text-decoration: none !important;
  background-image: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.urakan-footer .footer-social a::before,
.urakan-footer .footer-social a::after {
  display: none !important;
}
/* Icon and handle turn red on hover, at the same speed as the
   buttons (0.3s). Colour is set on each part directly, so the theme's
   own link transitions can't stack and slow it down. */
.urakan-footer .footer-social a,
.urakan-footer .footer-social a svg,
.urakan-footer .footer-social a .wp-block-social-link-label {
  color: #F5F0E8 !important;
  fill: currentColor;
  transition: color 0.3s ease, fill 0.3s ease !important;
}
.urakan-footer .footer-social a:hover,
.urakan-footer .footer-social a:hover svg,
.urakan-footer .footer-social a:hover .wp-block-social-link-label,
.urakan-footer .footer-social a:focus-visible,
.urakan-footer .footer-social a:focus-visible svg,
.urakan-footer .footer-social a:focus-visible .wp-block-social-link-label {
  color: #E0564A !important;
}
.urakan-footer .footer-social .wp-social-link:hover {
  transform: none;
}

/* ---- Bottom row ---- */
.urakan-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3A352D;
  font-size: 13px;
  line-height: 1.5;
  color: #A39C90;
}
.urakan-footer .footer-bottom a { color: #D9D2C5; }

/* ---- Same in light and dark mode ----
   The footer is always Dark Ink, so it must not follow the light/dark
   switch. The dark mode snippet recolours text, links, labels and form
   fields site-wide with !important; the rules below hold the footer's
   own values in both modes. ":not(#urk-lock)" matches every footer (no
   element has that id): it only adds weight, so these rules win over
   the dark mode rules whichever snippet loads last. */
.urakan-footer:not(#urk-lock) .footer-label,
.urakan-footer:not(#urk-lock) .footer-label :is(a, span, strong, em) {
  color: #E0564A !important;   /* the lighter red, made for dark backgrounds */
}
.urakan-footer:not(#urk-lock) :is(.footer-tagline, .footer-promise) {
  color: #D9D2C5 !important;
}
.urakan-footer:not(#urk-lock) :is(.footer-muted, .footer-bottom, .footer-bottom p) {
  color: #A39C90 !important;
}
.urakan-footer:not(#urk-lock) .footer-bottom a:not(:hover):not(:focus-visible) {
  color: #D9D2C5 !important;
}
/* URAKAN inside these lines follows the line's colour (no !important,
   so the glitch hover still runs) */
.urakan-footer:not(#urk-lock) :is(.footer-tagline, .footer-promise, .footer-muted, .footer-bottom) .urakan-glitch {
  color: inherit;
}
/* Newsletter: email field */
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="email"] {
  background-color: transparent !important;
  border-color: #4A443A !important;
  color: #F5F0E8 !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="email"]:focus {
  border-color: #F5F0E8 !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="email"]::placeholder {
  color: #A39C90 !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="email"]:focus::placeholder {
  color: transparent !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form label {
  color: #D9D2C5 !important;
}
/* Newsletter: consent checkbox, drawn the same in both modes
   (thin muted frame, lighter red tick), same size and place */
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  position: relative !important;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px !important;
  height: 14px !important;
  margin: 0.3em 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 1.5px solid #A39C90 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  vertical-align: baseline;
  cursor: pointer;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"]::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0.62em !important;
  height: 0.62em !important;
  margin: 0 !important;
  border: 0 !important;
  background: #E0564A !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"]:checked {
  border-color: #E0564A !important;
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}
.urakan-footer:not(#urk-lock) .wp-block-jetpack-contact-form input[type="checkbox"]:focus-visible {
  outline: 2px solid #E0564A;
  outline-offset: 2px;
}

/* ---- Phones ---- */
@media (max-width: 781px) {
  /* ---- Phones: compact footer ----
     Logo and Kabar stay full width; Baca and URAKAN sit side by side.
     Gaps between stacked groups are about 32px (2rem). */
  .urakan-footer {
    padding-top: 2rem !important;
    padding-bottom: 2.75rem !important;
  }
  .urakan-footer .footer-callout {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    gap: 1.25rem;
  }
  .urakan-footer .footer-grid {
    flex-wrap: wrap !important;
    gap: 2rem 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  .urakan-footer .footer-grid > .wp-block-column {
    flex: 0 0 100% !important;
    min-width: 0;
  }
  .urakan-footer .footer-grid > .wp-block-column:nth-child(2),
  .urakan-footer .footer-grid > .wp-block-column:nth-child(3) {
    flex: 0 0 calc(50% - 0.75rem) !important;   /* two menus side by side */
  }
  .urakan-footer .footer-label { margin-bottom: 0.5rem; }
  .urakan-footer .footer-logo { margin-bottom: 0.75rem; }
  .urakan-footer .footer-logo svg { width: 209px; }   /* block 56px high */
  .urakan-footer .footer-social { margin-top: 0.5rem !important; padding-top: 0; }
  .urakan-footer .footer-links { gap: 0; }
  .urakan-footer .footer-links a {
    display: inline-block;
    padding: 0.5rem 0;   /* keeps comfortable tap targets */
  }
  .urakan-footer .footer-bottom {
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 1.25rem;
  }
}

/* ---- Masthead anchors on the About pages ----
   Stops a sticky header from covering the heading after the jump. */
#redaksi, #masthead, #redaktion { scroll-margin-top: 6rem; }

/* ---- Dark below the page end ----
   Phones (and trackpad overscroll) show the page's base color past the
   last element. Making that base Dark Ink means the area under the
   footer matches it. The body keeps its own cream / dark-mode color. */
html { background-color: #1A1712; }
body { min-height: 100vh; min-height: 100dvh; }