/* **************************************** */
/*              MAIN DIVS                   */
/* **************************************** */

:root {             
  --aside-width: 300px;
  --nf-image-height: 350px;
}

header.banner div#audience-name, 
header #search-icon {
  right: var(--left-margin);
}

div.nav-secondary.section-top {
  display: none;
}
nav.secondary {
  display: block;
}

section.content {
  width: calc( 1000px - var(--aside-width) );
  padding-left: 0;
  padding-bottom: 0;        /* Because the bottom of the article gives a sufficient gap before promos */
}

section.content {
  padding-right: var(--grid-margin);    /* Gap between main content and aside - Iain 31 May 2022 */
}

/* Thanks to var(), there is no need to restate this */
/*section.content article {
  padding-left: var(--left-margin);
  padding-right: var(--left-margin);
}*/

section.content h2 {
  width: calc( 1000px - 2 * var(--left-margin));
}

aside {
  width: var(--aside-width);
}

/* **************************************** */
/* 				PRIMARY NAV 				*/
/* **************************************** */

  div.wrapper.nav {
    /* Nav has to be above the banner, but has to remain centered with its wrapper, */
    /* so let wrapper sit under the banner, but make it disappear (height 0) and    */
    /* then use negative top margin to push the nav up the page.  It's not elegant! */
    /*position: relative;
    margin-top: 0;
    height: 0;*//*Removed 22 May 2022*/
  }
  /*nav.primary {
    position: relative;
    top: -490px;
    right: auto;
    left: 0;
  }*//*Removed 22 May 2022*/

/* **************************************** */
/*          NON-FUNC PROMOS                 */
/* **************************************** */

  section#main div.promo.see-your-pension-amount {
    display: block;      /* Switched on at desktop */
  }

  section#main div#nf-promos div.promo.side-note {
    box-sizing: border-box;                 /* Should be done at tablet or mobile instead? */
    width: var(--aside-width);
    margin-left: 0;                         /* Get rid of the margin used at mobile */
    margin-right: 0;                        /* Get rid of the margin used at mobile */
    padding-left: 35px;                     /* From desktop up, 35px is enough */
    padding-right: 35px;                    /* From desktop up, 35px is enough */
  }
  /* Changed nth-of-type(2) to nth-of-type(1) 11 Jun 2024 */
  section#main div#nf-promos div:nth-of-type(1).promo.side-note {
    margin-top: calc( var(--nf-image-height) + 2 * var(--grid-margin) );
    padding-top: 10px;       /* To remove the large top margin used at Tablet */
    position: inherit;
  }
  
/* **************************************** */
/*    IMAGE ABOVE FIRST NON-FUNC PROMOS     */
/* **************************************** */

  /* Remove the :before image from all nf-promos ... */
  section#main div#nf-promos div.promo.side-note:before { content: none; }
 
  /* Changed nth-of-type(2) to nth-of-type(1) 11 Jun 2024 */
  /* ... and then add it back to the first one */
  section#main div#nf-promos div:nth-of-type(1).promo.side-note:before {
    content: '';
    background-image: url();
    width: var(--aside-width);
    height: calc( var(--nf-image-height) + 10px );          /* = top-margin of parent (200) - var(--grid-margin) */
    left: auto;
    top: auto;
    /* Position the before as a separate item above the side-note */
    /* Changed -10px to -20px as smaller gap needed now it is first item */
    margin-top: calc( 0px - var(--nf-image-height) - var(--grid-margin) - 20px );
    margin-left: -35px;                     /* To adjust for the parent's 35px left padding */
    border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
  }
  section#main div.promo.side-note h3 {
    padding-left: 0;
  }

  /* Override the background image with the Desktop one */
  section#main div.promo.side-note:before {
    background-image: url();
  }
  section#main div.promo.side-note.promo1:before    { background-position-x:    -0px; }
  section#main div.promo.side-note.promo2:before    { background-position-x:  -350px; }
  section#main div.promo.side-note.promo3:before    { background-position-x:  -700px; }
  section#main div.promo.side-note.promo4:before    { background-position-x: -1050px; }
  section#main div.promo.side-note.promo5:before    { background-position-x: -1400px; }
  section#main div.promo.side-note.promo6:before    { background-position-x: -1750px; }
  section#main div.promo.side-note.promo7:before    { background-position-x: -2100px; }
  section#main div.promo.side-note.promo8:before    { background-position-x: -2450px; }
  section#main div.promo.side-note.promo9:before    { background-position-x: -2800px; }
  section#main div.promo.side-note:before           { background-position-x: -3150px; }


/* **************************************** */
/*          EMPTY ASIDE                     */
/* **************************************** */

  aside:empty:after {
    content: '';
    display: block;
    width: 100%;
    height: var(--nf-image-height);
    border-radius: var(--border-radius-main);
    background-image: url();
    background-position: -350px 0;
  }


/* **************************************** */
/*          PROMO AREA                      */
/* **************************************** */

  div.wrapper.promos {
    padding-bottom: 20px;       /* Add grey divider between promos and full width image */
    padding-bottom: 0;      /* REMOVED 13 JUN 2024 BECAUSE PROMOS NOT BEING USED.  :empty WON'T WORK HERE */
  }

  section.content.promos {           /* ARP 3 has a full-width content section just for promos */
    float: none;
    padding: var(--left-margin)  var(--left-margin) 20px var(--left-margin);
    background-color: white;
    border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
  }
  section.content.promos:empty {
    padding: 0;
    border-radius: 0;
  }
  section.content.promos div.promo p {
    padding-left: 0px;
    padding-right: 0px;
    overflow: inherit;
    height: inherit;
    margin-bottom: 20px;
  }
  section.content.promos div.promo p:first-of-type {     /* Text para could be 1 line or 2 */
    min-height: 90px;
  }
  section.content.promos div.promo p:first-of-type.lozenge {    /* But don't catch the lozenge as well */
    min-height: auto;
  }