/* The main CSS file created anew along with the new page layout. Some attributes, for example, colors, match the legacy styles in master.css. */

a   { color:#0077bb;}
.help a:hover { color:#da9300; }    /* master.css */

/*body, html {*/
html {
    margin: 0;
    padding: 0;
    /*font-family: sans-serif;*/
    height: 100%;
}

span.no-wrap {
    white-space: nowrap;
}

/* Page Wrapper */
.page-wrapper {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    /*padding-left: 9px;  !* [VT] Matches the bg_page in legacy master.css - added when noticed that the gap between the left and right banner images is too large. *!*/
    /*padding-right: 9px; !* [VT] Matches the bg_page in legacy master.css *!*/
    /*border: 1px dashed #666;    !* For UI design visibility - keep commented out when committing to Git *!*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: white;
}

/* Wrap the page header and the banner sections and made them 960px wide to replicate the appearance
   of the legacy pages that contain the `bg_page` element. */
.page-wrapper .page-top-wrapper {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
}

/* Header Styling */
/* From the ui-design layout - it only implemented it for a box, not internal content. layout.css site-header is used */
/*.page-header {*/
/*    background-color: lightblue;*/
/*    padding: 15px;*/
/*    min-height: 50px;*/
/*    flex-shrink: 0;*/
/*    box-sizing: border-box;*/
/*}*/

/* Banner Styling - UPDATED */
.banner-section {
    /*background-color: lightgreen; !* Layout design color *!*/
    height: 180px;             /* Fixed height to match images */
    display: flex;             /* Use Flexbox to manage items inside */
    align-items: flex-start;   /* Align items (images) to the top */
    overflow: hidden;          /* Hide anything that might accidentally overflow */
    padding: 12px 10px 0 10px; /* [VT] Leave a gap from the Logo above and align the right and left side to the Logo and the Search GO. */
    flex-shrink: 0;
    box-sizing: border-box;
    /* Default alignment is flex-start (left) */
}

/* For the SINGLE image banner (right-aligned) */
.banner-section.banner-align-right {
    justify-content: flex-end; /* Pushes flex items to the right */
}

/* Optional: If you want to ensure the single image has its explicit dimensions via CSS */
.banner-section.banner-align-right > img {
    width: 700px;
    height: 180px;
    flex-shrink: 0; /* Prevent shrinking if banner somehow gets narrower */
}

.banner-full-width {
    justify-content: center; /* Centers the single (potentially slightly narrower) image */
}

.banner-side-by-side {
    justify-content: flex-start; /* Default, explicitly defined */
    /* Optional: Add spacing between side-by-side images if needed */
    /* gap: 20px; */ /* Uncomment and adjust if you want space */
}

/* --- Styling for Images WITHIN the Banner --- */
/* It's often better to style the specific images via fragments or more specific classes,
   but this provides a basic default if needed. */
.banner-section img {
    display: block; /* Removes extra space below inline images */
    height: 180px;  /* Ensure image height is respected */
    /* Width will be set inline or via specific fragment styles */
    /*object-fit: cover; !* Optional: How image should resize if its aspect ratio doesn't match *!*/
    /*
       'contain': Scales the image (while preserving its aspect ratio) to fit
                  within the <img> element's box. If the image's aspect ratio
                  is different from the box, there will be empty space (letterboxing).
                  This is ideal for "scale down to fit" requirement.
    */
    object-fit: contain;
}

/* === STYLES FOR THE TWO-IMAGE BANNER === */

/* Left interactive image container */
.banner-section .banner-image-left {
    width: 220px;
    height: 180px;
    flex-shrink: 0; /* Prevent this image from shrinking */
    /* The background image and hover effect will be handled by .left-tout */
}

/* Right static image container */
.banner-section .banner-image-right {
    width: 700px;
    height: 180px;
    flex-shrink: 0; /* Prevent this image from shrinking */
    margin-left: auto; /* This is the magic! Pushes the right image to the far right, creating a gap. */
}

/* --- Styles for the .left-tout interactive image (from your legacy CSS, with hover) --- */
/* Ensure these are correctly pathed relative to your CSS file */

/* Base style for .left-tout if any common properties are needed (e.g., display: block) */
.left-tout {
    display: block; /* Ensures it behaves like a block element */
    /* Add a smooth transition for the background position change */
    transition: background-position 0.3s ease-in-out;
}

/* French Version */
.lang-fr .left-tout {
    background: transparent url(../images/get_more_with_ease_fr.gif) no-repeat -220px 0;
}
.lang-fr .left-tout:hover {
    background-position: 0 0; /* Show the left half on hover */
}

/* English Version */
.lang-en .left-tout {
    background: transparent url(../images/get_more_with_ease_en.gif) no-repeat -220px 0;
}
.lang-en .left-tout:hover {
    background-position: 0 0; /* Show the left half on hover */
}

/* Main Content Area Styling */
.main-content {
    /*background-color: lightyellow; !* Layout design color *!*/
    display: flex;
    flex-grow: 1;
}

/* Sidebar Styling */
.sidebar {
    /*background-color: skyblue; !* Layout design color *!*/
    width: 220px;
    flex-shrink: 0;
    padding: 15px;
    box-sizing: border-box;
}

/* SignIn Page Article Styling */
/* There is also `page-article` (originally from the ui-design) - see below */
.page-signin-article {
    /*background-color: peachpuff; !* Layout design color *!*/
    flex-grow: 1;
    min-width: 0;
    padding: 10px 10px 0 0; /* Top:10, Right:10, Bottom:0, Left:0 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling for children within .page-article */
.signin-info {
    font-size: 12px;
    /*background-color: #f1c1c1;  !* Layout design color *!*/
    /*padding: 10px;*/
    width: 100%;
    max-width: 700px; /* Max width - 700px aligns it with the banner (402px would align it with the Okta Widget) */
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 10px;
    /*min-height: 30px;*/
    flex-shrink: 0;
}

.signin-info ul { padding: 4px 0 4px 20px; }
.signin-info li { padding: 0 0 2px 0; }

/* Align the notice displayed above the Okta Widget with the notice below it */
.signin-info.advisor {
    font-size: 13px;    /* Slightly larger text for advisor notices */
    color: #003c69;
    text-align: left;
    margin-left: 40px;
    line-height: 1.2em;
    padding-right: 60px;   /* With 60px, for a message with border, the "box" will appear as centered. */
}

.signin-info.groupaccess {
    max-width: 725px;
    padding-left: 25px;
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 4px; /* Override margin-bottom: 10px */
}

.signin-info.investor {
    max-width: 725px;
    padding-left: 25px;
    text-align: left;
    line-height: 1.5em;
    margin-bottom: 4px; /* Override margin-bottom: 10px */
}
.signin-info.investor p {
    padding-bottom: 10px;
}

/* Page Article Styling - page content aligned with the banner */
.page-article {
    /*background-color: peachpuff; !* Layout design color *!*/
    flex-grow: 1;
    min-width: 0;
    /* MODIFIED Padding: Top:10, Right:10, Bottom:0, Left:50
       Update: right changed to 16px - even though it does not align perfectly with the banner, it is more appealing;
       Also added 6px padding to the bottom */
    padding: 10px 16px 6px 50px;
    box-sizing: border-box;
    /* Keep display flex if you want internal items to stack vertically easily */
    display: flex;
    flex-direction: column;
}

/* Copied from layout.css .main-article - these originally were generated based on the master.css */
/* `%` replaced with unitless (`em`) and adjusted visually */
.page-article h1 { padding:15px 0 25px 0; font-size:24px; color:#003c69; }
.page-article h2 { padding:15px 0 25px 0; font-size:16px; color:#003c69; }
.page-article h3 { padding:15px 0 10px 0; font-size:14px; font-weight:bold; color:#003c69; }
.page-article p {
    padding-bottom: 5px;     /* Reduced the padding-bottom from 15px to 5px; */
    line-height: 1.5;
    text-align: justify;     /* text-align: justify; was added, not in the master.css */
}
.page-article ul {
    padding: 2px 0 2px 20px; /* In legacy master.css: ul { padding: 10px 0 20px 20px;} */
}
.page-article ul li {
    list-style: disc;
    padding: 0 0 2px 0; /* Originally 0 0 10px 0; - too much vertical space */
    line-height:1.5;
}
.page-article ul li li {
    list-style: circle;
    padding-left: 15px;
}

/* === Ordered List Styling (Refined from legacy master.css ol.numberedOutside) === */
/* Style for ordered lists specifically marked with .numberedOutside within the main article */
.page-article ol.numbered-outside {
    /* Replaces global 'ol' padding and '.numberedOutside' margin/padding */
    margin-top: 1em;    /* Add space above the list */
    margin-bottom: 1em; /* Add space below the list */
    margin-left: 0;     /* Remove browser default margin */
    padding-left: 2.5em; /* Indentation for the list items (adjust as needed) */
    /* Using 'em' makes indentation relative to font size */
    list-style-position: outside; /* This is better placed on the OL or LI directly */
    /* Let's apply it directly to LI below */
}
.page-article ol.numbered-outside li {
    list-style-type: decimal;       /* Ensure decimal numbering (1, 2, 3...) */
    list-style-position: outside;   /* KEY: Numbers hang outside the text flow */
    margin-bottom: 0.5em;           /* Add some space between list items */
    padding-left: 0.5em;            /* Add a small gap between number and text */
    line-height: 1.5em;             /* Added line height for readability - it matches the `.page-article p` */
}

.page-article a { color:#0077bb; }
.page-article a:hover { text-decoration: underline; }

.okta-widget {
    /*border: 1px solid #999;*/ /* widget already has a border */
    width: 402px;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Renamed and updated notice-visitor styling */
.signin-notice {
    font-size: 12px;              /* Adjust size as needed */
    /*background-color: #f0f0f0;  !* Layout design color *!*/
    /*padding: 10px;             !* Original padding *!*/
    /*padding-bottom: 10px;      !* Add extra padding below content before the border *!*/
    /*padding-right: 10px;       !* Align with the banner image *!*/
    /*width: 100%;*/
    /*max-width: 402px;          !* Optional max width *!*/
    box-sizing: border-box;
    text-align: left;
    min-height: 30px;          /* Original min-height */
    flex-shrink: 0;
    /* NEW: Add the border, using color from legacy style */
    /* Moved to the .signin-notice class */
    /*border-top: 1px solid #00406C;*/
    /*border-bottom: 1px solid #00406C;*/
    /* NEW: Adjust margin-bottom to account for old hr noticehr margin */
    margin-bottom: 10px;       /* 20px in the legacy noticehr margin-bottom */
    /* Alignment & Width Changes */
    width: 700px;              /* Fixed width */
    /* Calculate necessary left margin to align within the 750px content box */
    /* Parent article content width = 980(wrapper) - 220(sidebar) - 0(padding-left) - 10(padding-right) = 750px */
    /* Margin needed = 750px (container width) - 700px (element width) = 50px */
    /*margin-right: 10px;       !* Align with the banner image *!*/
    /*margin-left: 50px;*/
    /* [VT] Moved the block to the left 10px to align the text in the heading to align with the paragraph text which is moved 10px to right.
       Basically the notices text is aligned with the banner */
    margin-left: 40px;

    /* REMOVED: width: 100%; max-width: 402px; min-height: 30px; */
    /* This element will be pushed 50px from the left edge of page-article's content box */
    /* align-self: flex-end; is not needed because width + margin fills the container */
}

/* --- Styles for content INSIDE .signin-notice --- */

.signin-notice .notice-block {
    margin-bottom: 16px; /* Space between the two notice blocks */
}

.signin-notice .notice-block:first-child {
    /*border-top: 1px solid #00406C;*/ /* Don't display - vertical space is limited with Okta Widget */
}

.signin-notice .notice-block:last-child {
    padding-bottom: 8px; /* Small gap after the last block and before the bottom border */
    margin-bottom: 4px;  /* Small gap after the last block and after the bottom border */
    border-bottom: 1px solid #003C6A; /* Same color as the notice-heading */
}

.signin-notice .notice-heading {
    background-color: #003C6A; /* From legacy .impNote */
    color: white;             /* From legacy .impNote */
    padding: 8px 12px;        /* From legacy .impNote (adjusted slightly) */
    font-weight: bold;        /* From legacy .impNote */
    margin: 0 0 10px 0;       /* Reset browser default heading margin, add space below */
    /*font-size: 1em;           !* Adjust size as needed *!*/
}

.signin-notice p {
    margin: 0 0 12px 10px; /* Space below paragraphs (replaces <br>); [VT] added 10px padding-left to align the paragraph text with the heading text */
    line-height: 1.5;   /* Improve readability */
    /*font-size: 0.9em;   !* Slightly smaller text for notices *!*/
    color: #333;        /* Standard text color */
}

.signin-notice ul { padding: 4px 0 0 22px; }

.notice-block.advisor > p {
    color: #003c6b;
    margin: 0;           /* Overrides `.signin-notice p` */
    font-size: 13px;    /* Slightly larger text for advisor notices - 14px in legacy */
}

.signin-notice p:last-child {
    margin-bottom: 0; /* No margin after the very last paragraph in a block */
}

.signin-notice p strong {
    /* font-weight: bold; is default, but explicitly stating can be useful */
    font-weight: bold;
    display: block; /* Makes the "New to..."/"Already..." act like mini-headings */
    margin-bottom: 5px; /* Small space after these bolded lines */
    color: #003C6A; /* Use the darker color for emphasis */
}

.signin-notice a {
    color: #0056b3; /* Standard link blue */
    text-decoration: underline;
}

.signin-notice a:hover {
    color: #003C6A; /* Darker blue on hover */
}

/* REMOVED the .notice-hr CSS rule entirely */

/* Footer Styling - UPDATED */
.page-footer {
    /*background-color: lightcoral; !* Layout design color *!*/
    background-color: #efefef;    /* Light grey for footer */
    padding: 15px 20px;           /* Adjust padding as needed */
    min-height: 40px;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Use Flexbox to arrange nav and copyright */
    display: flex;
    justify-content: space-between; /* Pushes nav left, copyright right */
    align-items: center;          /* Vertically aligns items in the middle */
    flex-wrap: wrap;              /* Allow wrapping on very small screens */
    gap: 15px;                    /* Adds space if items wrap */
}

/* --- Styles for content INSIDE .page-footer --- */

.footer-nav {
    /* Container for the links */
    display: flex;
    gap: 15px;      /* Space between the links (replaces |  ) */
}

.footer-nav a {
    text-decoration: none;  /* Remove underline */
    font-size: 0.9em;       /* Same as in master.css .legallinks */
}

.footer-nav a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Optional: Add the vertical bar separator using CSS */
/* Add this if the gap alone isn't enough visual separation */
.footer-nav a:first-child::after {
    content: "|";
    color: #333;
    margin-left: 15px;
    display: inline-block;
}

.footer-copyright {
    color: #333;       /* master.css */
    margin: 0;         /* Remove default paragraph margin */
    font-size: 0.9em;  /* master.css .copyright */
    text-align: right; /* Ensure it stays right if it wraps below nav */
}

/* General Paragraph Styling (Remove bold) */
.page-header p,
.banner-section p,
.sidebar p,
    /* Note: .page-article p styling is now handled by more specific rules */
    /* like .signin-info p, .signin-notice p */
.page-footer p { /* Only targets the copyright p directly */
    margin: 0 0 5px 0;
    color: #333;
    /* font-weight: bold; REMOVED */
}
/* Style the copyright specifically */
.page-footer p.footer-copyright {
    color: #333;    /* From master.css */
    margin: 0;      /* Reset margin for copyright */
}

/* === Styles for "Investor Registration" pages and fragments === */
/* === Styles for Registration Info Fragment === */
/* Retain the existing legacy style as it's specific and correct */
/* For Investor Register, move the internal content slightly to the left so the Register Widget aligned with the banner */
.page-article.investor-register {
    padding: 0 60px 0 40px;
}

.page-article.investor-register h1 { padding:20px 0 15px 0; }
.page-article.investor-register h2 { padding:20px 0 15px 0; }
.page-article.investor-register h3 { padding: 5px 0 10px 0; }

.firstTimeVisit {
    font-size: 14px;
    font-weight: 600;
    /*margin-bottom: 2em; !* Add some space after the intro *!*/
}

/* A container for each registration step to manage spacing */
.registration-step {
    padding-left: 10px;
    /*margin-bottom: 1.5em; !* Space between steps *!*/
    /*color: #447393; !* The blueish color from the inline style *!*/
}

/* Style the step headings (replaces the bold, larger span) */
.registration-step h3 {
    font-size: 14px;
    font-weight: bold;
    color: inherit; /* Inherit the color from the parent */
    margin: 0 0 0 0; /* Remove extra margin from h3 */
}

/* Style the paragraph within a step */
.registration-step p {
    margin: 0;
    line-height: 1.5; /* Ensure consistent line height */
}

/* Container for the note section */
.registration-note {
    padding-left: 10px;
    margin-top: 0.5em; /* More space before the note */
    /*color: #447393;*/
}

/* The paragraph within the note */
.registration-note p {
    margin-bottom: 0.5em;
}

/* Style the contact details list */
.registration-note .contact-details {
    list-style-type: none; /* Remove default bullets */
    margin: 0;
    padding-left: 30px; /* Indent the whole list (40px total from edge) */
}

.registration-note .contact-details li {
    margin-bottom: 0.25em; /* Small space between contact lines */
}

/* Row container for the side-by-side "Account Number" and "Registration ID" info */
.info-row {
    display: flex;
    /* 1. Change from space-between to center */
    justify-content: center;
    align-items: center;
    /* 2. Add a gap to create the space */
    gap: 30px; /* Adjust this value to get the spacing you want */
    margin-top: 2em;
    margin-bottom: 2em;
    /* Padding is no longer needed for spacing, but can be kept for safety */
    padding: 0 30px 0 0;
}

/* Alternative positioning - can be removed after appearance is approved */
/*.info-row {*/
/*    display: flex;                 !* Enable Flexbox layout *!*/
/*    justify-content: space-between;!* Pushes children to opposite ends of the container *!*/
/*    align-items: center;           !* Vertically aligns text and images in the middle *!*/
/*    margin-top: 2em;               !* Adds space above this row *!*/
/*    margin-bottom: 2em;            !* Adds space below this row *!*/
/*    padding: 0 100px 0 100px;      !* A little horizontal padding to prevent touching edges *!*/
/*}*/


/* Individual item within the info-row (e.g., the text and image combo) */
.info-item {
    display: flex;         /* Use Flexbox for the item itself */
    align-items: center;   /* Vertically align the text and the oval image */
    gap: 10px;             /* Adds a 10px space between the text and the image */
}

/* Container for the centered statement image and its caption */
.centered-content {
    display: flex;               /* Enable Flexbox layout */
    flex-direction: column;      /* Stack children vertically */
    align-items: center;         /* Horizontally center all children */
    margin: 2em 0 2em 0;             /* Adds space above this section */
}

/* Replaces the old deprecated border="1" attribute */
.image-with-border {
    border: 1px solid #ccc; /* A subtle grey border is usually better than the default */
    vertical-align: top;    /* Good practice, though Flexbox handles alignment now */
}

/* Style for the "Account Statement" caption below the image */
.image-caption {
    font-weight: bold;
    margin-top: 0.5em; /* Adds a bit of space between the image and the caption */
}