/* ==========================================================================
   temple.dinamalar.com — Phase 1 mobile retrofit
   --------------------------------------------------------------------------
   Loaded from includes/head_responsive.php.

   DESKTOP IS DELIBERATELY UNTOUCHED. Every layout/typography override below
   lives inside @media (max-width:900px). The only always-on rules are the
   new navigation, which is additive markup that did not exist before.

   Why a retrofit and not a rewrite: the templates are XHTML table layouts
   with 292 inline style attributes on the homepage alone. Overriding at the
   stylesheet level makes the site usable on a phone today; converting the
   templates to semantic markup is Phase 1 days 9-18.
   ========================================================================== */

:root{
  --dmr-brand:#af002d;        /* brand-600, matches cinema.dinamalar.com */
  --dmr-brand-dark:#8a0024;   /* brand-700 */
  --dmr-brand-tint:#ffe5ec;   /* brand-100 */
  --dmr-ink:#1a1a1a;
  --dmr-muted:#5b5b5b;
  --dmr-line:rgba(0,0,0,.10);
  --dmr-nav-h:48px;
  --dmr-bottom-h:56px;
  --dmr-tamil:"Noto Sans Tamil","Latha","Nirmala UI",sans-serif;
}

/* ==========================================================================
   1. Section navigation — mirrors the cinema.dinamalar.com pattern
   ========================================================================== */

.dmr-sectionnav{
  background:var(--dmr-brand);
  box-shadow:0 4px 14px rgba(175,0,45,.18);
  position:sticky; top:0; z-index:40;
}
.dmr-sectionnav__inner{
  display:flex; align-items:stretch; gap:0;
  /* The site's content column is 1000px, but ten Tamil section labels do
     not fit in it, and capping there clipped the last item. Allow a little
     more room and tighten the item padding so the full set is visible on a
     normal desktop; it still scrolls if the window is narrower. */
  max-width:1240px; margin:0 auto;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.dmr-sectionnav__inner::-webkit-scrollbar{display:none}
.dmr-sectionnav a{
  display:flex; align-items:center;
  padding:0 11px; min-height:var(--dmr-nav-h);
  color:#fff; text-decoration:none; white-space:nowrap;
  font-family:var(--dmr-tamil); font-size:14px; line-height:1.2;
  border-bottom:3px solid transparent;
}
.dmr-sectionnav a:hover,
.dmr-sectionnav a:focus-visible{background:var(--dmr-brand-dark)}
.dmr-sectionnav a[aria-current="page"]{
  border-bottom-color:#fff; font-weight:600;
}
.dmr-sectionnav a:focus-visible{outline:2px solid #fff; outline-offset:-4px}

/* Bottom navigation: mobile only, 5 destinations, same as cinema */
.dmr-bottomnav{display:none}

/* ==========================================================================
   2. Mobile retrofit — everything below applies only to small screens
   ========================================================================== */
@media (max-width:900px){

  /* ---- 2.1 stop the 502px horizontal overflow -------------------------- */
  html,body{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  /* Legacy fixed-width layout tables — 44 on the homepage, the outermost
     declaring width="1000".

     width:100% alone is not enough: with the default table-layout:auto a
     table still grows to fit its content, so a 1000px table measured 771px
     inside a 502px viewport. And max-width:100% on an image resolves
     against a cell whose width is itself content-driven, so images never
     clamp either - the constraint is circular.

     table-layout:fixed alone was tried and rejected: it honoured the
     declared column ratios, which squeezed the 41% left column down to
     roughly 90px and wrapped its text one word per line.

     Stacking the OUTERMOST layout table instead gives each top-level
     column the full viewport width. Inner tables keep behaving as tables,
     so cell-level design (borders, backgrounds, the masthead) is
     untouched. This is the smallest change that produces a real mobile
     layout rather than a squeezed desktop one.

     `body > table` was tried first and missed: an include opens a <div>
     before it, so the real shape is body > div > table. The outer table is
     instead identified by its declared width, which is width="1000" in 172
     of the templates - a far more reliable handle than position. */
  table[width="1000"],
  table[width="1000"] > tbody,
  table[width="1000"] > tbody > tr{
    display:block !important; width:100% !important; max-width:100% !important;
  }
  table[width="1000"] > tbody > tr > td{
    display:block !important; width:100% !important; max-width:100% !important;
    height:auto !important;
  }
  /* the narrow spacer cells that framed the fixed-width design become
     full-width empty blocks once stacked */
  table[width="1000"] > tbody > tr > td:empty{display:none !important}

  /* NOT DONE ON PURPOSE: stacking a second level.
     The content area inside each stacked cell is itself a layout table
     splitting into percentage columns, which leaves two ~243px columns.
     Linearising that level was tried and reverted - the masthead is built
     from the same nested structure, so stacking it clipped the banner to a
     third of its width and opened a large blank area above the content.
     Two narrow-but-working columns beat a broken masthead. Fixing this
     properly means converting the templates, which is the days 9-18 work,
     not a stylesheet override. */

  /* inner tables simply fit; fixed layout keeps their images clamped */
  table{max-width:100% !important; height:auto !important}
  table table{table-layout:fixed !important; width:100% !important}
  td,th{word-break:break-word; overflow-wrap:anywhere}

  /* media must never exceed the viewport */
  img,iframe,object,embed,video{max-width:100% !important; height:auto}

  /* content boxes that carry their own intrinsic width */
  .indbox,.indbox > ul{max-width:100% !important; box-sizing:border-box}

  /* Decorative frame from the fixed-width design. The carved pillars were
     the left and right edges of a 1000px canvas; once the columns stack
     they become a 450px full-width band above the content. The <img>
     pillars are pure ornament and go; the pillar background-images sit on
     cells that DO hold content, so only the decoration is dropped, never
     the cell. */
  img[src*="pillar" i]{display:none !important}
  td[style*="pillar_left_cont" i],
  td[style*="pillar_right_cont" i]{
    background-image:none !important; padding-left:0 !important; padding-right:0 !important;
  }

  /* Carousels. Two different libraries are in play and they need opposite
     treatment, so do not collapse these rules together.

     Owl Carousel sets an inline width on .owl-stage (measured: 3520px) and
     slides it with a transform. Clamping the stage would break the slider,
     so clamp the OUTER element instead and let the stage move inside it. */
  .owl-carousel,.owl-stage-outer{
    max-width:100% !important; overflow:hidden !important;
  }
  .owl-item{max-width:100vw}

  /* The legacy gallery loop hard-codes style="width:6000px" on the track
     itself and is not transform-driven, so it can simply scroll. */
  #vgalleryloop,[style*="6000px"],[style*="6000PX"]{
    width:auto !important; max-width:100% !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .bxflt,.vidfl{max-width:100% !important}

  /* Horizontal <ul> strips (measured one at 3025px) scroll rather than
     stretch the page. */
  ul.clearfix{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}

  /* anything still too wide scrolls inside itself rather than the page */
  .dmr-scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}

  /* ---- 2.2 typography -------------------------------------------------- */
  /* Measured before this change: 92% of text under 14px, modal size 11px. */
  body{
    font-family:var(--dmr-tamil);
    font-size:16px; line-height:1.7; color:var(--dmr-ink);
  }

  /* the exact classes carrying 9-13px in style.css */
  .navigation,.topic,.subhead,.newsdetails,.newsdetails1,
  .dailypalan,.thoughts,.text,.titdc,.heading h3,.heading h3 a,
  #nav li,#nav li a{
    font-size:16px !important; line-height:1.65 !important;
  }
  .style1{font-size:14px !important; line-height:1.6 !important}
  .tithd{font-size:18px !important; line-height:1.4 !important; font-weight:600}

  /* second pass: the classes and elements still measuring 10-13px after the
     first pass. .play1 is deliberately absent - it is a sprite whose label
     is hidden at 1px, and raising it would print "play button" on the page. */
  .clsBellf,.more01,.adsearch{font-size:15px !important}
  p,li{font-size:16px !important; line-height:1.65 !important}
  strong,b,em,i{font-size:inherit !important}
  a{font-size:15px !important}

  /* Inline font-size wins over any class rule, so neutralise it - but match
     on the VALUE so only the small ones are raised. A blanket
     [style*="font-size"] would also shrink the deliberately large inline
     sizes used for headings and the masthead. */
  [style*="font-size:9px"],[style*="font-size: 9px"],
  [style*="font-size:10px"],[style*="font-size: 10px"],
  [style*="font-size:11px"],[style*="font-size: 11px"],
  [style*="font-size:12px"],[style*="font-size: 12px"],
  [style*="font-size:13px"],[style*="font-size: 13px"]{
    font-size:15px !important;
  }

  /* headings: the homepage currently has none at all */
  h1{font-size:30px; line-height:1.25; margin:.4em 0}
  h2{font-size:22px; line-height:1.30; margin:.5em 0}
  h3{font-size:18px; line-height:1.40; margin:.5em 0}
  h1,h2,h3{font-family:var(--dmr-tamil); color:var(--dmr-ink); text-wrap:balance}

  /* body copy set anywhere via inline font tags or tiny classes */
  p,li,td{font-family:var(--dmr-tamil)}

  /* ---- 2.3 tap targets (74% were under 44px) --------------------------- */
  a,button,input[type=submit],input[type=button]{
    min-height:44px;
  }
  /* inline links inside running text must NOT become 44px blocks */
  p a,li a,td a.inline,span a{min-height:0}
  #nav li a,.navigation,.dmr-sectionnav a{
    display:flex; align-items:center; min-height:44px;
  }
  input[type=text],input[type=search],select,textarea{
    min-height:44px; font-size:16px; /* 16px stops iOS zoom-on-focus */
    max-width:100%;
  }

  /* ---- 2.4 the legacy cross-property strip ----------------------------- */
  /* Keep it (it is the network bar, cinema has the same) but let it scroll
     instead of forcing the page wide. */
  #dmr-navbar{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap; max-width:100%;
  }
  #dmr-navbar::-webkit-scrollbar{display:none}
  #dmr-navbar ul{display:inline-flex; flex-wrap:nowrap}

  /* ---- 2.5 navigation swap -------------------------------------------- */
  .dmr-sectionnav{display:none}          /* desktop bar hides on mobile   */

  .dmr-bottomnav{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:2147483000;
    background:#fff; border-top:1px solid var(--dmr-line);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .dmr-bottomnav a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:var(--dmr-bottom-h);
    text-decoration:none; color:var(--dmr-muted);
    font-family:var(--dmr-tamil); font-size:11.5px; line-height:1.15;
    text-align:center; padding:6px 2px;
  }
  .dmr-bottomnav a svg{width:22px; height:22px; flex:none}
  .dmr-bottomnav a[aria-current="page"]{color:var(--dmr-brand); font-weight:600}
  .dmr-bottomnav a:focus-visible{outline:2px solid var(--dmr-brand); outline-offset:-3px}

  /* keep the fixed bar from covering the end of the page */
  body{padding-bottom:calc(var(--dmr-bottom-h) + env(safe-area-inset-bottom) + 8px)}
}

/* ==========================================================================
   3. Accessibility
   ========================================================================== */
.dmr-skip{
  position:absolute; left:-9999px; top:0;
  background:#fff; color:var(--dmr-brand); padding:10px 16px; z-index:2147483001;
  font-family:var(--dmr-tamil);
}
.dmr-skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}